During the research phase for Code19's website, we identified the need for a design system that embodies the company's racing DNA and is scalable across different platforms as the business grows.
How might we create a design system that embodies Code19's racing DNA and scales effectively across multiple platforms, enhancing user engagement and brand consistency?
During my research, I conducted a UX audit of the current website, along with user interviews and user testing. These three phases revealed key issues and needs of the website.
Inconsistent branding across platforms can lead to confusion and decreased user engagement.
I conducted a stakeholder analysis to ensure alignment, identifying key groups such as the development team, marketing department, and potential users. Through interviews, I gathered insights into their needs and expectations and prioritized these requirements based on their impact and feasibility, ensuring a balanced and strategic approach to product development.
I developed a comprehensive tree diagram approach for the design system foundation. This approach consists of three key components: the Roots (Brand Collection), which define essential elements like font family, hex codes, and font weightage to establish a consistent brand identity; the Leaves (Alias Collection), which develop color roles for success, error, and warning states to create a cohesive visual language; and the Branches (Mapped Collection), which specify text, icon, surface, and border colors to ensure visual harmony across the platform. This structured approach forms the backbone of our design system, enabling scalability and consistency across Code19's digital presence.
