Our company provides white-label products for gig companies, including DoorDash, Uber, and Lyft, while also developing our internal product.
As our design team grew from 1 to 4 designers, the challenge of designing and launching new features for all client apps on tight timelines, while maintaining design consistency, improving workflow efficiency, and ensuring a unified visual language, became increasingly difficult.
As a Senior Product Designer, I led the end-to-end creation of our design system from scratch—defining the design foundations, building a reusable component library, and documenting usage guidelines. I partnered closely with engineering to ensure accurate implementation and drive adoption.
The system streamlined design-to-dev handoffs, reduced QA friction, and brought strong visual consistency across products. It played a key role in the successful launch of both the Uber and Lyft apps, which now serve millions of users and hold 4.9-star ratings in the App Store.
It’s been a while, come to think of it. Back then, we were all using XD—can you believe that?
As we transitioned to Figma and migrated our design files, we started taking on more clients. Over time, we realized many of our products were similar across different clients. Managing branding across all these files became increasingly difficult, and the designs started to get messy.
As I began reviewing all our product screens and design assets, I examined the details of the components we’ve been using and identified design patterns across all products. It became clear how we should tackle the issue. This process helped me pinpoint common elements, along with inconsistencies and areas for improvement.
Here are a few key points that needed to be addressed:
After identifying the inconsistencies, we established simplicity, flexibility, and accessibility as our core principles. From there, I defined the design foundations—creating a cohesive color palette, typography scale, spacing, and grid guidelines tailored to each client’s brand.
Color palette tailored to different clients' brands
Examples of different client brands
Typography
Text variables
Once the design foundations were in place across our various clients, I moved on to designing each component to accommodate different sizes, styles, and states. Adoption was just as important as creation. I worked closely with engineers to ensure components were built to spec, created detailed documentation, hosted walkthroughs in our weekly design syncs, and provided hands-on support to the team.
📝 First, I outlined the essential components needed for the project.
✏️ Then I began designing core UI elements that could scale across brands and user flows.
Component - Form Fields
Component - Lists
🎯 To keep the component library manageable and easy to maintain, I focused on making the main components flexible enough to work in different situations by adding variants.
Along the way, I tried out different ways to build and organize them, constantly improving to make sure they were reusable and adaptable.
Example of the same component with increased flexibility
🪨 One of the main challenges was balancing each client's unique brand identity while identifying shared elements that could form the foundation of a unified design system. I approached this by focusing on flexible design tokens and modular components that could be easily customized without compromising consistency.
Example of the same component updated with varying client branding
This design library greatly streamlined the design workflow, saving valuable time—especially when developing new features or adapting functionality for different client branding. Furthermore, the design system enhanced the overall product quality by ensuring consistent alignment with brand guidelines and maintaining a cohesive brand identity, even as the product evolves.
Reflecting on the creation of the design system, I learned the importance of balancing consistency with flexibility. One of the biggest challenges was maintaining a cohesive user experience while ensuring the system could adapt to the unique needs of different clients. This required frequent iterations based on feedback from both designers and the development team.
I also realized the value of user-centric design. It was essential to think from the perspective of other designers who would be using the system, making sure it was not only functional but also intuitive and efficient. I focused on clear documentation and a logical structure so that anyone could easily understand how to implement or update components.
Ultimately, I’ve come to view the design system as a living, evolving part of the product. As the product grows, the system needs to be continuously refined and updated. This process reinforced the importance of clear communication, flexibility, and long-term vision—skills that will continue to guide me in future projects.
Example of Switching Mode Based on Different Clients