02/2022- 07/2022
Design System
The development of Vampr’s design system, starting from scratch, emphasizes the establishment of core principles, design methods, and research as its foundation. This transformation not only enhances the visual aesthetics of Vampr but also serves as an internal resource employed by the team to achieve a cohesive product.
Role
👨🏻💻 Lead Product Design
📂 Design System
Timeline
6 months
The Before
Vampr’s design team initially lacked a unified UI library, leading to numerous inconsistencies across the app. As veteran designers continued to introduce new components and interfaces without clear guidelines, this resulted in production interfaces featuring a mishmash of different colors, text styles, spacing, shadows, and overall disjointed components.
I took on the responsibility of building Vampr’s very first design system from the ground up. My task involved conducting a comprehensive audit of the entire app, documenting all the styles, spacings, treatments, and components in use. The goal was to create a comprehensive system capable of replicating everything we had in production. However, it also needed to simplify the design landscape by reducing the number of styles and components while ensuring it remained user-friendly for our designers.
In the first stage of our project, we took a close look at our app, examining all the colors, text styles, spaces, shadows, and components we used on every screen. During this audit, I organized similar components to figure out just how many variations of each type of component we had. One interesting discovery was that we were using different button styles throughout the app.
After completing the audit and grouping process, I gained a clear understanding of the chances we had to simplify and unify the various treatments for the same components into a more streamlined set.
Outcomes
I collaborated with Engineering to smoothly transition our system into production via Storybook, focusing on key elements like color styles, text styles, and basic components initially. This boosted consistency in the app. In 2022, I managed system maintenance alongside other projects, meeting the design team’s needs. The system remains active and continues to receive positive feedback from daily users.
