Design Systems & Branding
Building a design system at Qualio
The foundation that increased productivity and unified the Qualio brand
Project overview
Role
Design Systems & Branding
Timeline
July-September 2021
Status
Fully deployed
Before implementing a design system at Qualio, the brand faced several challenges in scaling designs and maintaining consistency, which ultimately affected brand awareness and growth.
The goal of this project was to create a scalable design system and establish a single source of truth for designers and developers, boosting productivity, reducing guesswork, and enhancing Qualio’s brand presence across all internal and external channels.
As a fast-growing startup, Qualio understood that a unified brand approach was essential for competing effectively in the market. By implementing this system, I streamlined design processes and strengthened the company’s position as a key player in the industry.
80%
increase in productivity, reducing design & development turnaround times
300%
growth on social channels, positively impacting brand awareness
The process
Creating the system’s building blocks
This design system was built using the atomic design principle, following a hierarchical approach from core components to high-fidelity pages:
01.
Foundation: I started by selecting the color palette, defining typography, and implementing a grid system. Additionally, I designed the iconography, illustrations, and key brand assets that make up the visual identity.
02.
Base components: once the foundation was set, I created the base UI components, like buttons, tags, and form inputs, which are the building blocks for all other main components.
03.
Main components: with the base components in place, I combined them to shape the layout structure and create objects that would eventually form modules and pages. Examples of these main components include navigation, footers, call-to-actions (CTAs), and feature cards.
04.
Modules: next, I focused on developing fully functional modules that form templates and pages. The key benefit of this stage was consistency, which made the page-building process seamless and efficient.
05.
Templates & pages: finally, I worked on the templates and pages, defining the layout structure and establishing the overall tone. It was essential to capture a variety of scenarios and implement guidelines on how to use them effectively.
Royal Blue
Primary
Yellow
Primary
Orange
Primary
Purple
Secondary
Pink
Secondary
The solution
Shaping components, templates, and pages
To maintain a consistent style throughout the website, all components, templates, and pages were developed based on the core and base components. Applying the grid system and typography scale was crucial for achieving a user-friendly experience.
The entire website was built with three main templates: a default template used for most product and solution pages, an article-style template for blogs and resources, and a lighter demo template featuring a simpler header and footer. This approach increased productivity by eliminating guesswork while allowing for flexibility in design through interchangeable modules.
Creating multiple pages and adding content became easy and straightforward with these templates in place!
Primary button
Secondary button
Tertiary button
Blue tag
Orange tag
Yellow tag
Pink tag
