Project Details
Duration – 3 months and ongoing
Team – 1 software engineer, 1 project manager, supporting designer and me
My role – Leading the DAC Design System project
Tools – DAC team and stakeholders workshops
Deliverable – Documented atomic design components
Project Structure
I structured this project based on Atomic Design methodology by starting with the foundations (breakpoints, grids, colour, typography), then atoms (buttons, input fields) and then focusing on other complex building blocks such as molecules and organisms. The project followed these steps:
Introduced DAC design principles
Revised the core styles
Introduced an Atomic Design System
Named the components
Categorised the card logic
Created DAC Design System repository
Opportunities
Efficiency
Instead of repeatedly building similar components from scratch, Design Systems enable designers and developers to reuse components and increase their efficiency.
Consistency
Design Systems introduce a shared set of principles and rules to build components. It becomes much easier to create consistent experiences across different pages.
Scalability and better QA
Increased efficiency and consistency lead to gaining more time for other activities such as new features, A/B testing, accessibility, performance and other experiments.
Design Principles
I kicked off the project by running a workshop for our team to set design principles. I wanted us all together to come up with a set of values that would help to better align design decisions within the DAC team and to create a shared understanding of the design approach.
Before the workshop, the team had to write down what they thought a good design for the DAC website was. In the session they shared their ideas on sticky notes which were grouped into themes and dot voted.
Documenting the Workshop Output
After collating and organising all the data from the workshop, another designer and I selected the candidates for DAC’s design principles.
After refining the best ideas we presented the following principles to Google stakeholders to get their input:
1. Consistency, not uniformity
Elements that share similarities in their nature, purpose or function should be treated in a similar way. At the same time, they could still maintain some unique characteristics wherever it helps to better achieve the goal.
2. Encourage learning and growth
Facilitate users to discover the content across the whole site. Information should be presented in a way that enables users to scan the content, get key takeaways and act on it.
3. Design with purpose
Form should follow function. Create practical and purposeful design that favours usability and accessibility.
4. Be bold and playful
Use bold colour blocks and illustrations especially for the content that needs to inspire and stand out. Find visual balance by combining bold and neutral interface elements.
5. Make it modular
Every element is part of DAC’s design system. We aim to re-use existing system elements as long as they solve the right problem.
Core Styles
Horizontal Grid
I worked closely with a developer to introduce a grid system across different breakpoints so that all content could be aligned to the grid.
Vertical Grid
The appropriate vertical spacing depended on how much content blocks were related. A smaller grid spacing was used for related blocks of content and a larger grid spacing for unrelated content.
Typography
The aim was to improve the consistency and introduce some guidelines in typography usage throughout the site.
I introduced a better information hierarchy by adjusting some font sizes across various touch points on DAC.
Atomic Design
The next step was to break existing top level pages into atoms, molecules and organisms. I facilitated a workshop to identify atomic elements as a team. It was important to educate the engineers and a project manager about the concept of atomic design and also share the tasks together as a team.
DAC Cards
Cards were the predominant components on the DAC platform. There was an increasingly growing number of different card styles and variants, due to the continuous evolvement of DAC and the absence of a design system. These inconsistencies affected the visual balance and coherence of the platform.
Cards research started by doing a cards inventory on DAC top level pages. The aim was to identify the purpose of every card and after that merge or re-design the cards that were redundant.
Cards Purpose
During the card research, it became clear that the cards could be broken down into three main categories:
1. Promotional cards – used for the highest priority promotional content.
2. Informational cards – used to showcase and link to educational content.
3. Navigational cards – used to help the user to navigate around the site.
