The Challenge
Curebase faced significant hurdles. Firstly, there were no components built in Figma, hindering design efficiency. Secondly, the design team had to rely on platform screenshots to design. Causing the handoff process between designers and engineers to be inaccurate, leading to inconsistencies in implementation. Additionally, manual spec creation added unnecessary overhead.
The App's user interface (UI) had unintuitive commands and it lacked a proper Visual System
Solutions
The solution encompasses the fundamental aspects of a robust design system:
- Design Tokens: Solid foundation for design tokens, That ensure consistency across the entire product ( spacing system, typography, border radius, shadows, color palette).
- Component Library: Extensive component library within Figma, targeting the creation of new components based on prioritized product features.
- Component Documentation: comprehensive documentation of each component to provide clear guidelines for designers and engineers.
- Design & Engineering Collaboration: Design system process to facilitate collaboration between design and engineering teams, ensuring an efficient review and implementation workflow.
Outcomes
A notable decrease in UI/UX debt-related issues as reported in previous 'Heuristic Analysis reports' for the product's main features.
Reduced development handoff and implementation times per feature by using the design and code component library provided by the design and engineering teams.
Consistency Enhancement across new product features.
Significant increase in the usage and component adoption during the creation and maintenance of product features.
Focus UI design system repository in storybook. ( The focus UI system is an ongoing project )
The journey started with the necessity of a foundation for the design system, the design tokens. As a team, I led design audits with the design team to gain a comprehensive understanding of the existing design tokens within Curebase.
We started with Curebase's existing app colors, recognizing the need for a consistent and accessible color system. Through the audit, we uncovered disparities, issues with contrast accessibility, and an absence of semantic color categories.
Upon finalizing the new color proposals, I led a collaborative effort with the engineering team to establish the rest of the tokens and to create a unified naming convention that seamlessly accommodated both teams, including color, border radius, shadows, spacing, and the grid system.
Curebase Focus UI design tokens.
With the foundation firmly established, I crafted a design system roadmap for 2023, outlining the key focus areas that our team needed to address in order to achieve success and meet our objectives.
The roadmap served as our North Star, keeping us on track and making sure we were all rowing in the same direction. We had to do a bit of a shuffle along the road with our to-do list as company priorities changed, but we tackled this challenge by re-prioritizing our design system roadmap efforts accordingly.
Collaborative Design System Roadmap
Design System Roadmap Items
1.- Prioritize Component Work (Q1):
Focusing on aligning component design efforts with Q1 goals, specifically aimed at the "Patient Experience MVP" for the participant experience pod. Some of the components targeted for this iteration were, buttons, lists, text fields, radio buttons, checkboxes, inline callouts, etc.
Figma Component Library
2.- Establish Design System Processes (Q1- Q2):
The goal was to develop a streamlined process for designing components collaboratively with both design and engineering teams. I Introduced and facilitated design system ceremonies involving both teams.
Including bi-weekly progress syncs with PM, engineers, and VP of product, Weekly design components reviews, and Component review implementation with engineers.
Design System Component Creation & Review Process
3.-Design System Structure for Global Usage ( Q2-Q3 )
Our main goal was to work hand-in-hand with the Mobile and APP API Teams to organize fundamental components for universal applications so we could outline those essential "Core Components" from the component library that could have global applications, while also designing unique components tailored to each of the experiences.
This required us to collaborate with engineers and the wider platform team for thorough audits and to determine the priority of new components.
4.-Design System Component Documentation (Q1-Q4):
The focus was to create a comprehensive source of information detailing component usage and specifications. Establish an easily accessible repository for existing components and global tokens.
To accomplish this effectively, I organized collaborative sessions involving both the design and engineering teams to devise an optimal approach for documenting component guidelines. We collectively agreed to provide comprehensive context for each component, specifying its primary use cases, supported types, and variants.
It made the most sense to store the documentation in Figma. This decision was primarily because the teams were already utilizing Figma for building components. However, we also recognized that in the future, depending on the evolving needs, the documentation might find its home in both Figma and Storybook.
Example of Design System Documentation
5.- Sites/Builder platform Design System Integration (not yet started ):
Implement both core and new components into the Curebase platform. aiming to address existing design inconsistencies and tackle UX debt within these areas. Additionally, it seeks to resolve design and accessibility issues, ensuring ADA compliance, improving affordance and implementing various other enhancements.
The Focus UI design system is an ongoing project that requires significant collaboration between design and engineering teams.
We are continuously developing and adding new components while also refining our processes.
Learnings
Maintaining the design system in a startup environment could be challenging especially because of the lack of resources. Being able to strategically select what were the most important things that could allow us to advance the work was key to our success.
Constantly socializing the progress and context around the design system to different teams and stakeholders allowed us to get buy-in from leadership.
NEXT PROJECT
Optimizing CRC Scheduling and Availability Management at Curebase
Curebase is a technology company focused on decentralized clinical trials
Let's Talk!
Feel Free to send me a line at mmedina.ldg@gmail.com