Project Overview
1) Introduction
2) Design, Development and Organization
3) Zeroheight Overview
4) Review
5) Principles
6)Tokens
7) Components
Introduction
I have built, maintain and evolved design libraries two times, once at Keepr, and once in my current company Fünf Digital Design.
Earlier in Trendyol and Garanti, I contributed to maintaining consistency, and helped developing the Design Systems by adding new material when needed.
At Fünf Digital, one of our clients, asked for redesign of their existing e-commerce platform. Since, they did not have either an organized design library or a design system, they also wanted us to develop one as part of the project.
Our goal was to create the components and relevant systematic documentation while redesigning the platform which required effective collaboration between all the stakeholders, making multiple iterations of ideation and taking organizational decision.
Eventually we hosted it on Zeroheight in order to make sure that it works as single source of truth.
As an important detail, Developers did not create each component from scratch, we used Ant Design, as a source for the components which are functioning and suitable for our system. Only for the ones were created by the developers, where Ant Design was not sufficient, and those were checked and decided by the design team.
Design System - Library
As we worked on the designing the platform, we started to organize material and elements of the design system such as ux principles, style guide, pattern guide, tokens and components in Figma. A comprehensive challenging work has been executed during this process together with the other designers. Please see the Figma file below, more importantly the relevant organization respectively:
Tokens
Actions
Form Elements
Feedback Indicators
Structure
Navigation
Graphic Elements
Design System - Zeroheight Overview
Figma file alone was not sufficient to help keeping the system organized and synced, while we needed a single source of truth, therefore we decided to host the system in Zeroheight where design, documentation and code can be in one place, where every stakeholder can access to.
It would be also better to keep Storybook and Figma files synced and design tokens to function.
On Zeroheight, the main navigation pages were:
-
UX Principles
-
Designs Tokens
-
Components
-
Patterns
Design System - Review
As design libraries grow, it’s important to built each component the proper way. Therefore when a new component is being added, it needs to be checked by another set of eyes
I created a checklist so that we are all on the same page on what exactly needs to be checked upon review.
Design System - Principles
We document and list our UX Principles to have a base of our approach.
Design System - Design Tokens
We started to create our design tokens and naming conventions in order to point to style values like colors, fonts, and measurements so that we can use design tokens instead of hardcoded values, for example: md.fab.container.color; which allows even if a token’s end value is changed, its name and use remain the same. It also aligns with storybook so that the changes can be applied faster and smoother.
Design System - Components
The majority of the content on this page. On the left side there is a navigation bar with all of our components.
Per component the following information is provided:
-
Design Overview
-
Code
-
Usage
-
Style Guide
Design Overview
For every component, there is a overview of the component displayed as well as the basic information.
Code
Code for each component is called and synced with Storybook
Usage
To make sure we achieve consistency among the different products, guidelines needs to be defined: clear rules on how each component should be used, as well as best practices (do’s & don’ts).
Style Guide
Style guide is defined for each component and category along with overview code and usage.
