Design approach
This project involved both brand design and product design. Before developing the design system, I needed to derive brand guidelines from the company logo. Additionally, CREED's platform aims to be available as both a desktop and mobile app, necessitating a responsive and adaptable design system.
I divided this project into three parts, each with its own deliverables:
- Design guidelines: Extract guidelines from the logo, detailing text styles and colors for web and print.
- Design system: Build a robust and scalable system of components for the CREED app.
- Implementation: Reskin the existing application screens.
The solution
Documenting guidelines
Utilizing the new logo's colors and font, I developed a palette suitable for all CREED assets. I added several new shades to the primary brand colors for increased flexibility and conducted color research to introduce new functional colors to the palette.
Building the design system
I adopted a pyramidal approach to this project, following Atomic Design principles. I began by building the smallest components before moving on to more complex elements, allowing for rapid progress and efficient documentation.
To ensure scalability and ease of implementation, I utilized Figma's variants extensively. Each variant state was designed to be intuitive and well-documented to facilitate smooth hand-offs and offboarding with the client.
Implementation
The ultimate test for my design system was applying it to real screens. CREED's existing live app required a complete rebranding, providing the perfect opportunity to revamp the UI while also improving some aspects of the UX (with more comprehensive UX refinements planned for later).