Compass Design System
Scaling design consistency and efficiency at Container xChange
Overview
As Container xChange grew, maintaining consistent UI patterns became challenging, slowing down design and development teams. Inconsistencies caused confusion among users and developers, and redundant design work reduced overall efficiency.
Teams needed a unified, scalable, and easy-to-use source of truth to deliver cohesive user experiences and streamline the design-to-development workflow.
Goal
The goal was to create Compass, a scalable design system that would unify UI patterns, improve collaboration between design and engineering, and accelerate product delivery. The objective was to empower teams with reusable components, clear guidelines, and standardized practices, eliminating redundant efforts and enhancing product consistency.
Scope
UI audit & research, Figma component library, design tokens & styles, system documentation, governance & maintenance strategy, team training & workshops
Team
Sector
Container Logistics
Duration
12 months
Impact & Key Metrics
We measured the success of Compass by looking at adoption, workflow improvements, and overall design quality. After implementation, we observed significant improvements:
100%
adoption across design and development teams
30%
reduction in design-to-development handoff time
53%
increase in team-reported design consistency
38%
improvement in overall team satisfaction with UI workflows
The Solution
Compass provided teams with a centralized system to improve efficiency, reduce errors, and maintain consistency across products.
Unified Component Library
Created reusable Figma components to ensure consistent UI and speed up design iterations.
Design Tokens
Standardized typography, spacing, color schemes, and interactions, facilitating easy scalability.
Clear Documentation
Established structured guidelines in Notion and Confluence for seamless onboarding and continuous use.
Process & Approach
We followed a structured, research-driven approach to ensure Compass met real team needs and improved daily workflows across the company.
Research & Discovery
We first aimed to understand the pain points faced by our teams:
Conducted interviews with designers, developers, and PMs to identify workflow inefficiencies.
Ran a comprehensive UI audit across the platform to spot inconsistencies.
Performed competitive analysis of 5 leading design systems to identify industry best practices.
Design & Iteration
Based on our insights, we designed and iterated on the Compass system components:
Created multiple prototype iterations, validating them in regular review sessions.
Established design token libraries early on to ensure flexibility and consistency.
Conducted ongoing usability testing and feedback sessions with cross-functional teams to ensure broad alignment.
Implementation & Rollout
Ensuring smooth integration across teams was critical to the success of Compass:
Organized hands-on training sessions for designers and engineers.
Developed clear documentation and onboarding resources to streamline adoption.
Implemented a structured feedback process to quickly adapt and refine the system post-launch.
Before / After applying the new system
Challenges & Learnings
Building and scaling a design system introduced unique challenges, teaching us valuable lessons in cross-functional collaboration and flexibility:
Balancing Flexibility & Consistency
Ensuring components were adaptable without sacrificing system-wide coherence.
Collaboration with Engineering
Establishing effective communication processes to achieve accurate design-to-code implementation.
Sustaining Adoption
Continuously educating and empowering teams, resulting in sustained engagement and high adoption rates.
Final Implementation
Compass fundamentally transformed how Container xChange approached UI design, creating a more streamlined, collaborative, and efficient workflow. Post-launch, the design system became central to product development, facilitating faster iterations, reducing design debt, and enabling teams to deliver cohesive user experiences at scale.
Regularly updated and refined documentation based on team feedback.
Established governance processes for maintaining system integrity and scalability.
Continued monitoring adoption metrics and satisfaction, ensuring Compass evolved with the team's needs
More Case Studies
Interested in more of my work? Check out these case studies:
