My role:
Sole UI/UX designer
Timeline:
7 months to deliver release 1
Scope:
143 components | 560 variants
Aptitude is a healthcare performance improvement company that streamlines category management for hospitals and suppliers. Acting as a mediator, it negotiates contracts, pricing, and provides performance analytics.
The platform required consistent design practices and scalable solutions. For this reason, I was tasked as the sole UI/UX designer with creating the Aptitude Design System.
My goal was to standardize design practices, reduce design and development time, and create a system that could grow with the platform.
1. Component inconsistencies and missing design standards:
The platform pages lacked a unified design framework leading to varied interpretations of brand guidelines. The inconsistent visual and functional aspects produced misaligned elements throughout the platform. The teams faced problems because documentation lacked detail and standard practices were undefined. Therefore, I needed to establish processes along with comprehensive guidelines.
2. Accessibility gaps:
The brand color scheme failed to meet WCAG 2.1 AA accessibility standards which restricted user accessibility for different audiences. The new color scheme became essential because it needed to meet the standards and improve color contrast for a more user-friendly experience.
3. Lack of reusable design patterns:
The lack of reusable design patterns made it challenging to scale and maintain consistency across the platform. Components were often created independently, without a cohesive structure or reuse strategy. This fragmented approach restricted platform development for future requirements. To address these issues, I had an essential need to introduce atomic design principles and a hierarchical structure.
These observations created my foundation for addressing key challenges and implementing appropriate solutions.
In that period, the company transitioned from Sketch to Figma. In general, the move improved collaboration, but it also required adapting to a tool with no pre-existing design assets or components.
As the sole designer, I needed to create a comprehensive framework from scratch – define the scope, establish scalable principles, and build tailored components.
To guide the project, I implemented an atomic design methodology as it allows me to begin the process with basic tokens and atoms and then scale up to more complex elements, resulting in fully designed pages.
This organized approach maintains consistency at all design levels and ensures efficient growth potential:
Tokens
Atoms
Molecules
Organisms
Templates
Pages
So firstly, I introduced design tokens. They are small, reusable variables that standardize core elements like spacing, sizing, typography, and colors. By converting raw values into reusable tokens, I created a flexible system that adapts to any design need. These tokens followed a clear hierarchy – starting with general roles and eventually mapping to specific components:
#F2F2F2
Raw value
$neutral-100
Semantic token
$surface-light
Contextual value
$card-bg
$input-bg
$modal-bg
Component value
Addressing accessibility gaps was necessary to meet WCAG 2.1 AA standards. In particular, the primary green color presented difficulties because of its inadequate color contrast values. The analysis of current color choices revealed which areas needed enhancement (see "Existing colors").
I proposed a new color scheme that met accessibility requirements while enhancing the platform's visual organization. A key focus was improving color contrasts and adding more colors for interactive elements, which made content more accessible.
I updated the palette (see "Updated color palette") within the LCH color space. This approach provides precise control to achieve uniformity across all colors.
Exsisting colors
Updated color palette
The design audit revealed a significant misalignment in components, each with different styles, interactions, sizes, and spacing within the platform.
The visual below showcases header variations on the same level:
To address this challenge, I conducted a discovery phase for each component to determine recurring patterns and establish rules for consistent implementation. This process covered analyzing the platform's components, defining their basic features and properties, and developing a unified set of guidelines.
Regular feedback sessions with the team allowed me to refine and improve components iteratively. Sometimes progress was slow and required adapting on the fly. I often needed to balance immediate fixes with the development of long-term solutions.
These efforts have helped to eliminate inconsistencies and standardize all aspects of component design (text styles, weights, colors, size, spacing, and interaction) and, therefore, enhance cohesiveness.
After addressing the key challenges, I moved on to the modular components and the gradual advancement of the design system. Starting with the foundational tokens, I progressively expanded into atoms, molecules, organisms, and complete and fully functional pages.
I utilized Figma's robust features, such as variants, nested component properties, booleans, variable synchronization, and auto layout. These made components flexible and easy to customize, so the team could easily switch configurations.
The video below demonstrates how every design level works together to create fully customizable and cohesive pages:
As the design system evolved, I collaborated with the design team more closely. The members offered feedback, made suggestions, and reported problems with components. I also helped to refine and transform team designs into reusable components.
By the way, the design team has found the grids (data tables) and their components the most transformative due to their ease of use, the consistency they brought, and the time saved in the process.
To document the design system and its implementation, I had to create comprehensive guidelines and handoffs for developers. Collaboration was key in refining those guidelines and aligning on a shared understanding of the system. Also, the EightShapes Specs plugin allowed me to make the process quicker and easier.
Anatomy
Layout and spacing
Creating the design system from scratch took just over seven months. By the end of that period, I released a solid version 1, featuring 143 components and 560 variants.
At the time, the design team was small, consisting of 3 designers, including me. As the only person responsible for the new design system, I regularly gathered the team’s feedback to gain insights and refine it. Analyzing how the design system was used, I can confidently say that it achieved measurable improvements within the first year:
~80%
time saved on
foundational elements
~40%
shift in designer focus on
creative problem-solving
~75%
reduction in
visual inconsistencies
After transitioning from Sketch to Figma with no pre-existing assets or components, the adoption rate for the design system grew rapidly. It was the only source of components for creating designs. That's why the team relied entirely on it, which enabled them to focus on creativity and problem-solving instead of doing repetitive tasks.
The first test of the design system’s impact was during the annual “Access” process — a major update release. Typically, it required much effort for extensive screen rebuilding and alignment across all designs. The update release was scheduled to happen just 3 months after I began building the design system. Even then it already significantly streamlined the workflow and reduced the time required for mockups. That year and in subsequent years, the “Access” process ran smoothly and efficiently.
The atomic methodology framework I implemented empowered the design system to grow with the platform’s evolving needs. By standardizing foundational elements, the design system brought a sense of unity across all designs. As one of my colleagues noted:
"I really appreciate knowing that even if we aren't talking about our designs with each other, they will feel like aptitude because we are using the exact same system that has laid out everything the team could ask for."
I consider building the Aptitude Design System as a transformative experience that offered invaluable challenges, enriched my knowledge, and deepened my passion for design systems.
At first, creating the system from scratch was overwhelming and worsened my imposter syndrome, but I learned to focus on small wins. Creating a grid, refining a button style, or resolving an alignment issue — every small accomplishment was proof of the right direction.
The other crucial lesson of this project was to take initiative when faced with ambiguous situations. It pushed me to develop the skills needed to lead large-scale projects with minimal guidance.
The progress wasn’t always smooth. In some stages of work, I had to resolve issues along the way. These situations taught me to strike a balance between addressing immediate fixes and planning for long-term solutions. They also underscored the importance of staying flexible and collaborative in order to achieve a goal.
The success of the Aptitude Design System and positive feedback from my colleagues reaffirmed how impactful a well-executed design system can be for an entire team. And that inspired me to continue creating systems, while the journey itself equipped me with the confidence and skills to approach future opportunities.
