Overview
Tellimer lacked a true organized design system that unified core guidelines and UI components to create consistency and cohesion across their website.
This revealed a need to streamline the design process and ultimately create a better user experience across the site.
Project Goals
Update/redesign existing UI components and account for all types, states, sizes, etc
Create new necessary components
Create core guidelines for colour, type, grid, spacing styles
Company
Tellimer
Project Duration (for MVP)
Ongoing
Role
UI/UX Designer: UI Component Design, Brand/Visual Identity
Tools
Figma
*This was a collaborative project done with the UX Design team
Background
Current State Audit
We started by auditing our old design files for the Tellimer website and compiling a list of all the components we currently had and which we needed to create.
As you can see, the old design file is disorganized, with no clear hierarchy or structured system.
Components that were synced to the library weren’t made using variants to streamline the design process, and some component states were missing as well.
This set up our workflow to accomplish the project goals mentioned above.
Core Guidelines
The core guidelines is the foundation of the design system. These are building blocks that are used across the entire website, like grids, borders, spacing, effects, colour, and typography.
File Organisation
How we chose to organise these core guidelines within the Figma file allowed for more control for easy maintenance and updating in the long run. We implemented a clear hierarchy within the file along with detailed specs and styles to account for any and all instances.
Things to note:
Each core guideline has its own page (shown on left sidebar)
Everything is labelled clearly and consistently
All styles are synced to the asset library so designers can easily add/change styles (shown on the right sidebar)
Spacing
We used an 8-point grid system for spacing, allowing us to easily scale designs, create cleaner layouts, and have consistency across components.
The spacing units are also synced to the asset library so designers can quickly switch between vertical and horizontal spacing units for creating specs.
Typography & Colour Styles
This encompasses all the type styles and colour styles used across the website, so it’s quite extensive. We’ve also experimented with using design tokens for each type and colour style. Design tokens essentially add a value to style that can be pulled from a central location by developers for easier site maintenance and overall consistency from design to development.
We’ve broken each text style down by name, properties, and where the style is used on the site. Colour styles are categorised by primary, secondary, and tertiary. They are broken down into name, hex code, a swatch, and where the style is used.
We’ve also displayed our brand colours visually with each colour’s gradation values. These are marked by clear naming using values of 10, with the brand colour being 100.
UI Components
The website UI components use the core guidelines as a foundation. All components are made as variants of a parent component in Figma and utilise auto layout for scalability, consistency, and efficiency.
File Organisation
Much alike to the core guidelines file organisation, the UI components file is structured to allow for easy maintenance of designs. We implemented a clear hierarchy within the file along with detailed specs and styles to account for any and all instances.
Things to note:
Each component has its own page (shown on left sidebar) with a visual system to keep track of which components are done versus which need to be created still
Everything is labelled with detail and consistency
Each component style uses a template that clearly breaks down the various states, types, and sizes
A Closer Look
Below are two examples of components in detail to get a sense of how we organised and created them. As shown in the template, each component type is labelled and described on the left, built out as variants in the middle, and shown as specs on the right.
Alert
For example, the alert component is broken alerts down into default alerts and actionable alerts, clearly distinguished in their own sections. Each of these alerts has 4 states including info, success, warning, and error.
All of these states are created as variants of the alert parent component. On the right, each alert’s specs are mapped out using the spacing units.
Date picker
Take a more complex component, like a date picker. Following the same formula, the date picker is categorized into two types: default and range with 3 different sizes.
The date picker is essentially made up of 2 different components itself: the calendar and the input field. Within the calendar, the actual date also needs to be a component with various states as shown below, so we created parent components for these as well in order to continue the system being thorough and methodical in approach.
Components List
Below are just a few of the components included in the design system with their various states shown. The UI components utilize the core guidelines as building blocks to create a consistent system across the entire site.
The list of components is extensive, but we managed to organize all components coherently with clear naming conventions and usage of parent components with variants in Figma.
Next Steps
The design system will continually evolve as we reevaluate the website’s needs and user’s needs. Along with helping streamline design for Tellimer’s website, the design system allowed us to create a better user experience across the site.
This is in large part due to cutting out components we don’t need and being as lean as possible with what’s needed. This forced us to create rules around components, helping create more intuitive patterns for users on the site.
We especially want to find the best way to incorporate design tokens for a seamless design to development handoff.
Design systems are fascinating and I’m keen to learn more about them and the impact they make in product design.
Questions for the Design System’s Future
How might we implement design tokens?
How might we continually gather user feedback on the website to validate the UI component designs?
How might we find even more ways to streamline and organize the design system?