Eden Design System
Edenlife · 2021
My role
Designed the end-to-end experience and collaborated with multiple teams as the project required having touch points on almost every surface on the app.
The Team
I worked as the sole designer on embedded on a squad. 1 product manager, 10 engineers, 1 content designer and numerous teams for collaboration
Problem
Eden’s internal tool (Lighthouse) was undergoing a redesign and the redesign involved us checking through every moving part of the product. From conversations with employees (users of Lighthouse) it was mentioned over and over again that Lighthouse looked confrontational and too mechanical.
Adding to this, the product and engineering team had increased over the last 6 months and we recognised that there were lapses in internal design consistency. This meant we had multiple instances of components that seemingly did the same thing that had been designed and developed by multiple designers and engineers.
Goals
Taking from all the comments made by users during user interviews, we recognised that we needed to update the design system. While updating the design system it was important for us to reduce duplicated effort across our products. The main goals of this update were as follows.
Update the Design Language and make it more comprehensive.
Make the overall design system less Confrontational.
Document the design system extensively.
Update and Unify inconsistent components.
To understand what we needed, we focused on working on the Foundations of the design system. Getting these foundations right was important as they defined what the larger blocks and components were.
Colours
Based on our current use case for colours, we had 3 categories of colours that we had subconsciously defined as a team. These subconscious colour definitions had become what we had used across our products. It was important that we had these colours documented and formally defined. We divided colours into the following categories.
Neutrals
Product Colours
Primary Colours
Neutrals
The neutral colours basically consisted of Black on one extreme of the spectrum and white on the other end. For the Neutral colours, we created different shades of Grey to use across our products. We also defined a naming convention for all colours including the Neutral colours.
Primary
Secondary
Tertiary
Quaternary
Quinary
Senary
Septenary
Octonary
For the Neutrals, we added White as the final colour.
Product Colours
Eden has a series of products that we actively sell to our customers. We already had colours that we used to identify each product. The products we had are as follows:
Meal (Green)
Laundry (Blue)
Cleaning (Orange)
Primary Colours
The primary colours were created for the sole purpose of showing the state of elements and components. They were primarily designed to be used in cases where the state of a UI element is important.
Typography
At Eden, we incorporated 2 core typefaces into all of our designs.
Cerebri Sans
PT Serif
These typefaces have different use cases. Cerebri Sans is used for Body text and PT Serif is used for Heading texts.
Type Scale
For the type scale, we defined the base and max font sizes for body and heading texts.
Body (Cerebri Sans) - 12px to 24px
Heading (PT Serif) - 18px to 60px
The formula for scaling fonts was heavily inspired by IBM Carbon’s type scale.
Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2 Xn: step n-type size Xn-1: step n-1 type size
Spacing
Spacing is an important and often overlooked aspect of an interface. It helps with grouping similar pieces of information, it helps with establishing hierarchy and also with improving readability.
In appropriately using space, we needed to ensure there was a level of uniformity in everything that we did. We used an 8px spacing system. 8px because it is easy to break down into smaller bits without forming decimals. Alternatively, 8px could also be multiplied easily to create bigger spaces.
Components
While designing our components, we made sure all components were designed in Figma using Figma components, auto layout and variants. Using auto layouts and variants made it possible to create components that could scale and adapt based on where they are being used. It also made it possible to create extensive states so developers could cover all the edge cases that came with each component.
While designing the components, we made sure we designed the core components that every web app would typically have. Redesigning Lighthouse also gave us reasons to continuously create components and their states as we encountered and needed them. Here are some of the base components we worked on:
Buttons
Text Inputs
Dropdowns
Alerts
Badges
Radio Buttons
Checkboxes
Toggles
Tables
Pagination
Date Picker
Creating Combinations
To create truly useful and reusable components, while designing the products, we paid attention to the how we combined our base components to create combinations. This helped use create components not just for the sake of it, but for the actual use cases we encountered as we evolved the system.
Level up to Pages
Bring foundational elements, base components, and combinations together to create pages.
Documentation
Proper component documentation is the single most crucial part of a design system. Keeping said document clear and explicit is integral to ensuring organisation-wide adoption. We took inspiration from some of the most detailed open to reference design systems we had encountered. This made it easy for us to properly document the design system with as much detail as possible.
We made sure every component was fully detailed. We outlined their use cases, their various states, rules on when and not to use them and even how to properly combine component types. Our documentation encompassed the following:
Introduction.
Component Breakdown.
Use Cases.
Anatomy
Sizes.
States.
Content-Type.
In action.
Design Documentation
After components are created, they were shared and made accessible to all members of the team through Figma’s shared library for use across all our products. A core aspect of the entire design process was differentiating what components were allowed for use on the marketing website and which ones to use on the web app. All of these were what we had to factor into while designing and documenting.
System in Use
The system was delivered at put into use in the redesign of the products at Eden. This made development and design a lot faster. The foundations set by the design system also helped with creating a consistent experience across all our products.
After creating the design system, we made sure the design system was updated every month to suit updates to our product needs. We decided to assign a time to it as opposed to randomly adding anytime changes occurred so as to ensure consistent and intentional updates.