Portfolio – Tracker design system

CASE STUDY

From Fragmentation to Cohesion: Creating Tracker’s Design System

Tracker operates within a complex ecosystem of vehicle monitoring, security, and fleet management products. Multiple teams were building independently across web and mobile, resulting in fragmented user experiences and inconsistent UI patterns.

The goal was to create a unified design system for web that could scale across products while aligning closely with the mobile app experience.

Role

Senior Product Designer

Company

Tracker SA

Team: Web

Cross-functional teams across product, engineering, and business

Context

Tracker is a leading vehicle monitoring and telematics company in South Africa, offering products across stolen vehicle recovery, fleet management, and consumer tracking. Over time, multiple digital products were developed by independent teams across web and mobile, each responding to different business needs and user groups.

Objective

The objective was to design and implement a unified design system for the web platform that could establish consistency across multiple products and teams, improve usability within complex, data-driven interfaces and align web experiences with mobile app patterns where appropriate.

Outcome

The Tracker Design System created a shared foundation across teams, significantly improving consistency, collaboration, and speed of delivery. It enabled a more cohesive cross-platform experience while setting the groundwork for scalable, system-driven product development.

As UI Lead and Product Designer, I led the end-to-end design system initiative across multiple cross-functional teams, ensuring alignment between design, engineering, and product.

Design System Strategy

Defined the vision, principles, and roadmap for the design system
Balanced immediate product needs with long-term scalability
Established system foundations including typography, colour, spacing, and layout

Audit & Rationalisation

Conducted a comprehensive audit of existing web and mobile interfaces
Identified inconsistencies, duplication, and gaps across products
Consolidated patterns into a unified, reusable system

Cross-Functional Collaboration

Facilitated workshops with product managers, designers, and developers
Aligned teams on shared patterns, behaviours, and standards
Acted as the central point of coordination across multiple squads

Component & Pattern Design

Designed scalable, reusable components for complex, data-heavy interfaces
Ensured alignment between web and mobile experiences where applicable
Considered accessibility and usability throughout

Design + Development Alignment

Partnered closely with engineers to translate designs into production-ready components
Supported implementation and ensured design quality in build
Contributed to documentation for both design and development teams

Governance & Adoption

Established contribution and governance models for ongoing system growth
Supported teams in adopting and using the system effectively
Advocated for consistency while allowing flexibility where needed

Tools used

Figma
FigJam
Miro
Figma Dev Mode
AzureDevOps

1. Audit & Discovery

Reviewed existing web and mobile products
Found inconsistencies, duplicates, and gaps
Looked at key user journeys across products

2. Define Foundations

Set clear design principles to guide decisions
Defined basics like type, colour, spacing, and layout
Agreed on accessibility and usability standards

3. Alignment & Workshops

Ran workshops with design, product, and engineering teams
Aligned on problems, needs, and priorities
Created shared understanding of how things should work

4. System Design

Designed reusable components and patterns
Standardised how elements behave across products
Made sure web and mobile stayed aligned where possible

5. Build & Collaborate

Worked closely with developers during implementation
Checked designs as they were built
Made improvements based on feedback

6. Document & Share

Created clear guidelines for how to use the system
Documented components and usage rules
Made it easy for teams to adopt

7. Maintain & Improve

Supported teams using the system
Updated components when needed
Improved the system over time based on real use

Methods used

Agile working in cross-functional teams
Design workshops with product, design, and engineering
Sprint planning and sprint reviews
Design refinements and regular feedback sessions
User journey mapping
Service blueprinting
Design critiques (internal reviews)
Usability testing and feedback loops
Iterative prototyping in Figma
Pairing closely with developers during implementation
Stand-ups for alignment across teams

The problem

Different product teams were solving similar problems in different ways, leading to:

Inconsistent user interfaces across platforms
Slower design and development cycles
Repeated work and duplicated components
A disconnected experience between web and app

This lack of cohesion made it harder to scale products efficiently and maintain a strong, recognizable product experience.

The Approach

I led the design system initiative across multiple teams, balancing immediate product needs with long-term scalability.

Key activities included:

Auditing existing products and UI patterns
Running cross-team alignment workshops
Defining design principles and system foundations
Collaborating closely with developers for implementation
Establishing governance and contribution models

Research

Research focused on understanding the current product landscape, team workflows, and user experience across web and mobile. The aim was to identify gaps, inconsistencies, and opportunities to inform the design system.

What I did

Reviewed existing products and interfaces across web and mobile
Analysed user flows and key journeys
Looked at support tickets and internal feedback
Spoke to designers, developers, and product managers

How it informed the work
These insights helped prioritise what to standardise first, shaped the system foundations, and ensured the design system solved real team and user problems rather than just creating UI consistency.

The solution

The Tracker Design System became a central source of truth for product teams. It established clear foundations including typography, colour, spacing, and layout, with accessibility built in from the start.

A reusable component library was created for web, designed to stay aligned with mobile patterns where possible. Close collaboration with engineering ensured components were implemented effectively, supported by clear documentation for both designers and developers.

The system was built to scale across multiple products, with the flexibility to adapt to different use cases over time.

Final Design

The design system was rolled out incrementally across products, starting with core foundations and high-use components.

I worked closely with engineering teams to translate designs into reusable, production-ready components, ensuring consistency between design and build. Components were integrated into live products as part of ongoing sprints, allowing teams to adopt the system without slowing delivery.

Clear documentation and guidelines supported adoption, while regular check-ins and feedback loops helped refine the system in real use. This approach ensured a smooth implementation, with the system becoming part of everyday workflows rather than a separate layer.

Results

The design system significantly improved both team efficiency and product consistency. It led to faster design and development cycles, reduced duplication across teams, and created a more consistent experience across web and mobile. Collaboration between teams also improved, with clearer alignment and shared ways of working. For users, this resulted in more intuitive and predictable interfaces, along with improved usability across both web and app experiences.

What worked well

Strong collaboration across design, product, and engineering made a big difference. Early alignment on principles and priorities helped teams move in the same direction, and rolling the system out gradually made it easier to adopt without slowing delivery.

Challenges

Aligning multiple teams with different goals and timelines was not always easy. There were trade-offs between speed and maintaining system quality, and getting consistent adoption across teams took time and ongoing support.

What I'd do differently

I would invest earlier in governance and clearer contribution guidelines to reduce confusion as the system grew. I would also involve engineering even earlier in defining foundations to strengthen alignment from the start.