How might we build a design system
to create more consistent user experience?
Developing Pollen Design System for Kernel Care
About Client
1 in 10 babies are born premature around the world, While each situation is different, during this stressful and bewildering time the new parents need support and encouragement. Kernel Care founders wanted to practically and emotionally support families through this stressful time. The Kernel Care web/app provides a safe platform for new parents to share their concern, questions and experience with other parents and Kernel Care experts during their journey.
The Project Aim
The aim of this project was to define a design system to guide and leverage Kernel Care’s product development team’s collective efforts and also provide a consistent experience for users when they interact with the brand and products.
“As the craft of web design continues to evolve, We’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. Atomic design is a methodology for creating design systems.”
— Brad Frost —
The process
A design system is defined as a large set of reusable components combined with a set of rules and design information that enables designers and product development team to generate consistency across brand’s digital products and user experience in a short period of time.
I found some great resources for developing the Design system, like the book Atomic Design, by Brad Frost, InVision’s Design Systems Handbook and some complex and well-documented design systems developed for companies like IBM, Airbnb, and Atlassian that inspired and guided me.
For this project the atomic Design methodology by Brad Frost was applied to accelerate the process of crafting the design system. The Atomic Design Methodology provide a valuable approach that bring logic and structure to the UI design, and by providing a big picture and steps, it help align team members to have a better understanding of the concept of design system.
During the process of development of each building blocks it was considered if those components are: 1) meet brand’s design principles 2) accessible 3) can be reused 4) tested or not.
Atoms
Molecules
Organisms
Templates
Pages
A visual created to explain the Atomic Design Methodology
Atoms are the smallest elements that can not be broken down any further without losing any use, like text styles, legos, icons, buttons, etc.
Molecules are simple UI components that made of a collection of atoms, like input fields with buttons
Organisms are functional parts of a page, made from groups of atoms and molecules like navigation, sidebars, forms, etc.
Templates are an underlying structure of a website layout made from combination of organisms.
Pages are made from adding content to a template.
Tools
This project started in the Sketch app, and Craft plugin used to upload the design system in Invision Design system manager platform. However, during the project I explored different alternatives and at the end Figma was used for organising and sharing the design system.
Started the project in Sketch + InVision Design System Manager
Figma used for developing the Design system
Progress
Developing design system is an ongoing project. As Nathan CurtisIt said“A Design System isn’t a Project. It’s a Product, Serving Products. “
In order to prioritise and understand which components should developed first, a guide list of components was used. It helped to select that beside the basic components of the design system (such as Colour, font, buttons,…) which other components needs to be considered.
prioritising development of design system components
Defining Brand’s Design Principles
Before starting the project, a set of coherent design principles base on Kernel Care brand values was defined. It is essential to make sure that a design system has a solid design principles that shows brand values, it help to be able to review and evaluate any new pattern and change that will be proposed for the design system in the future.
Embrace Accessibility
According to the World Health Organisation between 110-190 million adults have very significant difficulties in functioning. Disabilities affect 15% of the population and this rate is increasing, due to population ageing and the global increase in chronic health conditions.
In order to provide this opportunity for everyone to understand, navigate, and interact with our digital products, accessibility guidelines and web accessibility standards (WCAG) was considered during the development of design system project.
Building a Colour Palette
The colour pallete divided by primary, secondary, gray, and notification colours. Choosing the right shade of colour is fundamental to the final product accessibility. All the chosen colours met WCAG 2.0 colour contrast of 3.0 (for large, heavier type) or 4.5 (for standard type). This guideline helps users with who have colour blindness (1 in 12 men, 1 in 200 women), or have low vision (1 in 30 people) to distinguish one colour from another. Some great tools such as Coloursafe and WebAIM’s Color Contrast Checker helped to test colour pallets accessibility.
Choosing a Typeface
For choosing typeface for on-screen use, factors such as legiblity, being open Source, having a large x-hight, size of the counter and open counter space and having a range of font weights was considered.
For headings I chose Source Sans Pro which is a sans-serif font. It inspired by twentieth-century American gothic typeface design and provides a clean and legible headers with variety of wights.
To add a contrast between text-dense contents and headings, Merriweather was chosen for contents. It is an open source serif typeface and with a tall x-hight it is highly-readable on screen. unlike a lot of other serifs available on Google fonts, it has full set of light, normal, bold and ultra-bold—all with matching italics weights.
Source Sans Pro and Merriweather chosen for typeface and a style for each classification was created
Iconography Guidelines
Icons communicate the core idea and intent of a product in a simple, bold, and friendly way.
Icons are created and provided in vector format (SVG) which works best for scalability and responsive design. The icons turned into components which are UI elements that can be reused throughout of development of a products and help to deliver a consistent design across projects.
Icons turned into a master components to be reused across different designs
Shadows
Figma has a feature that let store effects like shadows as a style. I defined series of shadows that later used for creating buttons and cards shadows.
Also, this shadows styles could later be used as a part of library.
Icons turned into a master components to be reused across different designs
Spacing Guidelines
Compiling Components’ Library
Components can be used Molecules or Organisms components in a design system. Creating a component library is a great way to create a consistent UI across different products and speed up products development process.
Collaborating with developers
In Figma, styles for colours, grids, text, and effects like shadows and blurs were defined. For the other UI elements, a component was created which help to keep interfaces consistent and make collaboration between designers and developers much easier.
Defining and sorting colour palettes, typography, effect styles and components took some time at the beginning of the design system creation project. However, it assists developers to have access to code panel which providing helpful information about the designs they’re inspecting. Figma code panel has a feature that allow developers to switch viewing codes between CSS, iOS, and Android to have access to any added descriptions.
Outcome
As the relationship between users and products evolves over time, design systems need to be constantly reassessed and improved accordingly. Building a design system is an ongoing project and it is a journey that never ends. As Kyle Peatt said “The effort required to build a design system is tiny compared to the effort required to maintain it.” This case study is just a fraction of the design system project as Pollen Design system development is not over yet.
This project gave me the opportunity to study and compare lots of other great examples of design systems to understand which layout works for this project.It also helped me to try different design system development platforms and find limitations and advantages of them.