Khamelia – Issue Tracking & Project Management Application

Web Designer – Individual Contributor · 2015 · 10 months · 2 people · 7 min read

Delivered the complete frontend build of a futuristic-design issue tracking and project management web application — leading requirement analysis, timeline estimation, and pixel-accurate HTML5/CSS3 implementation from client mockups, through to full development team integration support

Overview

Built the frontend for Khamelia — a feature-rich issue tracking and project management web application offering bug tracking, issue management, and team collaboration tools wrapped in a bold, futuristic visual design. Working as the sole frontend contributor within a small team, owned the full pre-build and build lifecycle: from requirement analysis and project scoping through to HTML5/CSS3 page builds and hands-on integration support for the backend development team. The application was designed to compete with established issue tracking tools while differentiating on a distinctly modern, forward-looking visual identity.

Problem

Issue tracking and project management tools of the period — Jira, Redmine, Bugzilla — were functional but visually dated, with dense, form-heavy interfaces that prioritised data density over user experience. Khamelia's product vision was to deliver the same core functionality — bug tracking, issue management, sprint planning, and project oversight — within a UI that felt genuinely modern and differentiated. Translating a futuristic design vision from client mockups into a standards-compliant, maintainable, and backend-integration-ready frontend required both design sensitivity and disciplined frontend engineering.

Constraints

  • Futuristic design language required precise CSS implementation — visual differentiation was a core product value, not a cosmetic concern
  • No frontend framework — built entirely in HTML5, CSS3, jQuery, and vanilla JavaScript
  • Design delivered as client mockups — pixel-accurate translation required without independent design decisions
  • Frontend must integrate cleanly with the backend development environment without markup restructuring post-handoff
  • Application UI complexity — dashboards, issue boards, project views, and reporting interfaces — was significantly higher than a marketing website

Approach

Began with a thorough requirement analysis — reviewing the full mockup set, cataloguing the page inventory, identifying reusable UI patterns across the application, and clarifying design intent with the client on any ambiguous specifications. Produced a structured project timeline and effort estimate before build commenced, establishing a shared delivery plan with both the client and backend team. Built the application interface module by module — dashboard, issue board, project management views, and reporting — using semantic HTML5 and a modular CSS3 architecture that mapped directly to the component patterns in the mockups. Applied jQuery for the interactive layer: dynamic filtering, drag-and-drop issue management, modal workflows, and real-time UI feedback patterns. Supported the development team through the integration phase with hands-on assistance resolving markup, styling, and browser rendering issues as they emerged.

Key Decisions

Component-first CSS architecture mapped to the mockup design system

Reasoning:

Khamelia's application interface — with its dashboards, issue cards, status boards, and data tables — contained a high volume of repeating UI patterns across multiple views. Building CSS around a component vocabulary derived from the mockups (issue cards, status badges, priority indicators, action menus) rather than on a per-page basis ensured consistent visual execution across the full application and made the development team's integration work significantly more predictable.

Alternatives considered:
  • Per-page CSS with duplicated styles across views
  • Bootstrap adapted to match the futuristic design language
  • Inline styles for rapid translation without architecture

jQuery for interactive application patterns over vanilla JavaScript

Reasoning:

Khamelia required richer interactivity than a typical marketing site — drag-and-drop issue management, dynamic filtering, modal workflows, and AJAX-driven UI updates. In 2015, jQuery provided reliable cross-browser event handling, DOM manipulation, and AJAX abstractions that would have required substantial polyfill overhead in raw JavaScript. Its plugin ecosystem also offered well-tested drag-and-drop and sortable implementations suited to an issue board interface.

Alternatives considered:
  • Vanilla JavaScript with manual cross-browser polyfills
  • A JavaScript MVC framework (Backbone.js, AngularJS 1.x)
  • Minimal JavaScript with server-rendered interactions only

Semantic, templating-friendly HTML to minimise backend integration friction

Reasoning:

Application frontends are integrated by backend developers who need to inject dynamic data into the markup — conditionally show/hide elements, loop over data collections, and bind server-side state to the UI. Writing HTML that anticipated these integration points — with clear, predictable class naming, logical sectioning, and minimal presentational nesting — made the backend team's integration work faster and reduced the round-trips required to resolve markup conflicts during handoff.

Alternatives considered:
  • Markup optimised for visual accuracy only, with integration as the backend team's concern
  • Provide a style guide and let the backend team write their own HTML
  • Use a frontend templating engine (Handlebars, Mustache) to pre-structure the integration layer

Tech Stack

  • HTML5
  • CSS3
  • jQuery
  • JavaScript
  • Responsive Design
  • CSS Animations

Result & Impact

  • Issue tracking & project management
    Application Type
  • Solo frontend, 10 months
    Delivery Model
  • Futuristic, multi-view application UI
    Design Complexity
  • Full dev team integration support
    Handoff Quality

Khamelia launched with a frontend that delivered on its core design promise — a visually differentiated issue tracking experience that stood apart from the utilitarian interfaces of established competitors. The component-driven CSS architecture produced a consistent, maintainable codebase that the backend team could integrate predictably across all application views. The structured planning phase ensured the ten-month timeline was met without scope compression. For an early-career engagement, Khamelia represented a significant step up in frontend complexity — a full application interface, not a marketing site — and demonstrated the ability to manage both design precision and engineering discipline on a product with real UX ambition.

Learnings

  • Application frontends require component-based CSS architecture for reusable UI patterns across multiple views
  • Complex design systems demand careful CSS implementation to maintain visual integrity
  • HTML should anticipate backend integration needs to reduce development friction
  • Requirement analysis reveals interaction complexity that mockups miss, preventing development surprises
  • jQuery solved complex browser interactivity in 2015, informing modern framework choices
  • Early planning discipline builds long-term habits of owning delivery outcomes

Requirements & Planning

Owned the full pre-build phase, establishing clarity and alignment before any implementation began:

  • Requirement analysis — reviewed the complete mockup set, catalogued the full page and view inventory, and identified all reusable UI patterns across the application interface
  • Interaction state mapping — worked with the client to clarify ambiguous UI states not represented in static mockups: empty states, loading indicators, error conditions, and confirmation flows
  • Project timeline and estimation — produced a structured delivery plan covering component build, page assembly, interactive layer development, and integration handoff
  • Client communication — maintained direct contact with the client throughout planning to confirm design intent and flag any specification gaps before they became build blockers

Application Interface Build

Translated the futuristic design vision into a fully functional, standards-compliant application frontend:

  • Dashboard views — summary interface displaying project health, open issue counts, recent activity, and sprint progress in a visually rich, data-dense layout
  • Issue board — Kanban-style issue tracking interface with status columns, priority indicators, assignee avatars, and drag-and-drop card management
  • Issue detail views — full issue pages covering description, comments, activity log, attachments, and status/priority management controls
  • Project management views — project overview, milestone tracking, and team member assignment interfaces
  • Reporting and analytics — summary charts and issue trend visualisations surfacing project health data for team leads and stakeholders

Futuristic UI & Interactive Layer

Implemented the distinctive visual design and interactive patterns central to Khamelia’s product identity:

  • Futuristic design execution — precise CSS3 implementation of the client’s bold, forward-looking visual language, including custom color schemes, geometric layouts, and typographic treatments not achievable with standard frameworks
  • CSS animations and transitions — subtle motion design for state changes, panel reveals, and interactive feedback, reinforcing the premium UI feel
  • Drag-and-drop issue management — jQuery-powered sortable issue cards across status columns on the issue board
  • Dynamic filtering and search — real-time issue filtering by status, priority, assignee, and label without page reloads
  • Modal workflows — issue creation, editing, and confirmation dialogs with focus management and keyboard operability
  • AJAX-driven UI updates — status changes, assignments, and comment submissions reflected in the interface without full page refreshes

Development Team Integration

Supported the backend team through the full integration phase:

  • Integration-ready HTML — semantic, templating-friendly markup with clear class naming and logical data boundaries to minimise backend developer friction
  • Component documentation — annotated markup examples for each reusable UI component, enabling the backend team to apply patterns consistently across dynamically generated views
  • Integration support — hands-on assistance resolving styling discrepancies, browser rendering issues, and markup conflicts as they emerged in the development environment
  • Cross-browser validation — tested and resolved rendering inconsistencies across Chrome, Firefox, Internet Explorer, and Safari throughout the integration phase
All projects