Design system (Storefronts)
The design of the stores of MyOnlineStore was inconsistent and outdated. The templates were based a on a complex and rigid style without clear design guidelines. This resulted in inconsistency and lack of flexibility. It was time to create a design system for the storefronts of MyOnlineStore.
⚠️ Work in progress...
Oh no! This project is still a work in progress. Please check back soon or contact me directly if you want to find out more!
⚙️ Initial setup
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:
- 🕵️ Planning & auditing (1 month)
- 🎨 Designing core elements (2 months)
- 💎 Developing a component library (2 months)
- 🚀 Integration & rollout (1 month)
🕵️ Planning & auditing
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.
🎨 Designing core elements
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.
💎 Developing a component library
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.
🚀 Integration & rollout
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.
Design old vs recent
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. 🎉
