Lead Web Designer
Design Systems
2023
Navan
TripActions, a well-established disruptor in the business travel sector, sought to expand its presence into fintech and international markets. Recognizing the limitations of their existing name, the decision was made to rebrand as Navan, necessitating a comprehensive rebranding effort. As the lead web designer, my responsibility was to incorporate the new web brand elements into a new design system. Leveraging Figma as our design tool, I established new color libraries, typography styles, button designs, and design guidelines, following guidance from our brand agency, Pentagram.
The objective was to fully integrate the design system promptly, enabling the development team to begin the construction of design libraries and apply the new Navan branding to the marketing website.
I collaborated with the brand and product teams, gaining insights into how they envisioned utilizing the new brand elements. Our discussions encompassed crucial design aspects, including accessibility, usability, and actionable influences. After aligning on the design direction, I documented design guidelines that laid the groundwork for the new web design system.
I organized the colors into base, primary, and secondary categories, complete with hex codes and token identifications. To maintain consistency, I provided detailed descriptions for the primary colors. Utilizing Figma's variable and group libraries, I made the colors easily accessible for future use. Additionally, I demonstrated the optimal use of each primary color against different backgrounds to prioritize accessibility and readability.
Following collaboration with our development team, we opted for a structured approach in our typography library, categorizing styles based on specific sizes like small, medium, large, and aligning them with our Tailwind CSS conventions. These defined settings were integrated into the text styles within our Figma asset library. Each style includes descriptions and is nested within responsive device groups for comprehensive organization.
I started by documenting the design and development notes in the Figma project with visual representations for all relevant use cases, including font sizes, weights, and button padding. Each distinct set of button configurations was organized into a component and integrated into our newly established design system asset library.
Having laid the foundation for the new web design system, the next crucial step involved the implementation of these elements into the actual marketing website. With the design system fully integrated, along with the new component system (see case study) my focus shifted to collaborating with the development team as they began constructing design libraries and implementing the Navan rebrand on the marketing website.
In the last phase, I implemented a subtle website-wide reskin, incorporating newly defined design properties and guidelines. Daily meetings with the development team were held to discuss and test reskin applications on various page templates. The objective was to enhance the user experience by simplifying existing templates—utilizing more white space, minimizing bold contrasts, and creating a visually spacious design.
In conclusion, the journey from TripActions to Navan marked a significant transformation in both brand identity and web design strategy. As the lead web designer, my role in integrating the new design elements into a comprehensive system was instrumental. Leveraging Figma, I enjoyed crafted color libraries, typography styles, and design guidelines in collaboration with our internal teams. The successful establishment of the design system paved the way for a collaborative effort with the development team, ensuring the swift implementation of Navan's rebrand on the marketing website.
