How I created a design system for MyOnlineStore
Organisation
MyOnlineStore B.V.
Project
Bricks Design System
Challenge
The design of the admin environment of MyOnlineStore was inconsistent and outdated. A lot of design elements were added over the years without clear design guidelines. This resulted in inconsistency. For example: there were many different styles for the same button type. It was time to create a design system to bring consistency and modern design to the UI of MyOnlineStore.
My role
UX / UI Designer
Duration
2 months
The UI of the admin environment of MyOnlineStore was inconsistent due to a lot of features being added over the years without clear design guidelines. When I started for the company I felt the need to create the missing guidelines and update the look-and-feel of the design. Essentially creating the design system called Bricks for the company.
I took it upon myself to research, design and fix it within 6 months.
To get to a point of a stable and implemented design system I began by making an inventory of all the current styles and provided a battle plan for the team. The outlines of the plan were as follows:
I started the project by assembling a team, creating a planning and doing a design audit. During the audit it was clear that (even though there were branding guidelines) there was a lot of room for interpretation. For example: I found 27 different styles for a 'primary button' and the use of three different icon sets on the same page.
It was clear that a design system was needed. I started by creating the core elements (playing around with different styles within the brand guidelines). I held the current state of the UI into account and created a set of design tokens using a systematic approach. Slowly filling all the elements needed for a design system. From colors, to icons, to fonts and logo's.
The next step was using the core elements to create all the components needed for the UI of the admin environment. With the help of our frontend team we created a library containing all components using Storybook. In 2 months time, we had all the basic components needed to support the UI.
After we had everything we needed to start updating the components and styles we started to map the current code and design changes based on logical groups. Either grouping them technically or based on position/impact in the UI (or both). Every sprint we implemented some of the changes and tested them before deploying them to production. After about 3 sprints we had changed the entire look & feel of the UI, without people getting mad. Massively improving consistency and flexibility.
If we want to make a change to a button. We now only have to change it in one place instead of several. This led to many of the steps towards the current state of the UI. Best step we ever made. 🎉
