Lead Designer
Design Systems
2023
Navan
As the company (Navan) initiated a rebranding effort, we seized the opportunity to create a new component library. Our existing set of components were scattered in Figma and were not designed for scalability. I was tasked with the responsibility of managing this project and designing the new library.
I launched the project with a stakeholder discovery meeting to identify their requirements. We delved into their vision, drawing inspiration from examples of components on other websites. Documenting these insights in Confluence, I later referenced these resources throughout the design process.
I drew inspiration from stakeholder-provided examples and conducted a comprehensive competitor analysis. This strategic approach helped me pinpoint elements that would seamlessly fit into our content management system (CMS).
After incorporating stakeholder input and research findings, I transitioned into building wireframes for the primary components. Leveraging Figma's auto layout feature, I ensured flexibility by enabling each wireframe component to expand or minimize seamlessly for various viewport references.
I presented the component wireframes to the web development team. This collaborative discussion aimed to streamline the development process, uncovering potential enhancements, and gauging the estimated development time for each component. We also solidified how the components would integrate into our CMS and what fields and new features would be needed. I incorporated the developer notes into the project document as well as the Figma project.
In the conclusive design sprint, I crafted a total of 22 new components, each featuring responsive variations and integrated updates to our Figma asset and variable libraries. Throughout this sprint, ongoing communication with our development team was paramount. Daily updates ensured they could promptly commence coding upon the completion of each component, maintaining a seamless workflow and efficient integration of the new design elements.
The developers worked efficiently, crafting components using the new UI library. They benefitted from their early involvement in the discussion before receiving the Figma asset library. This proactive collaboration minimized design queries and streamlined the development process.
Utilizing Contentful's live preview feature, we were able to provide content creators with visual representations of the new components, making it easy for them to build new pages with ease. I provided training and how-to documentation to further assist the content team in their efforts.
We conducted various A/B tests to validate the enhanced performance of our redesigned components compared to their older counterparts. In each test, the new components consistently yielded higher conversions and improved user retention, affirming our confidence in the efficacy of the new UI library.
