PORTFOLIO
InsideTracker
Design system
Project Overview
Recognizing a growing need for consistency and collaboration within our product team, we embarked on a transformative journey – building a comprehensive design system for InsideTracker.
The catalyst? A bold decision to migrate from Sketch to Figma, opening a window to revolutionize our design workflow.
Championing this initiative, I spearheaded the creation of a robust UI kit and design system. From evangelizing its value to meticulous implementation, I orchestrated every step. Collaboration was key, fostering open communication across design, development, and product to ensure the system truly met everyone's needs.
My Role:
Product Strategy, Design Lead, Product Designer
Team:
Design (4), Product Management (4), Project Management (1), Engineering (7), QA (2)
Timeline:
2022 - ongoing

The Challenge
Migrating a company's design system from one platform to another can be a daunting task. But it can also be an opportunity to streamline workflows, improve consistency, and elevate the overall design experience. That's exactly what I achieved at InsideTracker when I spearheaded the transition from Sketch to Figma, weaving together a comprehensive design system in the process.
​
Laying the Foundation:
​
The first step was establishing a strong foundation. We defined clear design principles, outlining our core values and the user experience we wanted to create. These principles acted as guiding lights throughout the entire process, ensuring every design decision aligned with our vision.
​
Identifying the Building Blocks:
​
Next, we embarked on a meticulous inventory of existing design elements. Identifying common buttons, menus, forms, and other components allowed us to consolidate and refine them into a library of reusable building blocks. This component library became the heart of our new design system, ensuring consistency and efficiency across all InsideTracker projects.
​
Bringing it to Life:
​
With the components in place, it was time to define the visual language. We carefully curated a color palette, established typography guidelines, and crafted a hierarchy of design elements. Accessibility was paramount, so we rigorously applied ADA compliance standards to ensure all users could enjoy a seamless and inclusive experience.
​
Collaboration and Refinement:
​
No design system is complete without collaboration. We actively engaged stakeholders from across the company, incorporating their feedback throughout the process. Iterative testing and refinement helped us iron out any wrinkles and ensure the system truly met the needs of both designers and developers.
​
Bridging the Gap:
​
Finally, we seamlessly integrated the design system with development workflows. This not only saved time and resources but also fostered a deeper understanding and appreciation for design principles among the development team.
​
A Living, Breathing Ecosystem:
​
The design system wasn't a one-time project; it's a living, breathing ecosystem that needs constant care and attention. We established a clear governance structure and documentation to ensure consistency and facilitate ongoing contributions. As new needs arise and technologies evolve, the system will continue to adapt and grow, keeping InsideTracker's design language fresh and vibrant.
​
This is just the beginning of InsideTracker's design journey. The newly established design system has already brought a sense of unity and efficiency to our design process, and we're excited to see how it continues to evolve and empower us to create exceptional user experiences in the years to come.

Company Overview
InsideTracker is a personalized nutrition and wellness platform that leverages cutting-edge science and technology to provide individuals with actionable insights into their body's unique needs. By analyzing blood and genetic data, InsideTracker offers personalized recommendations for optimizing health, fitness, and overall well-being.
