How we build Espresso Design System and Increase product design and developer work time efficiency by 400%++
Project Overview
The first day I join to Otten Coffee, I feel in the middle of nowhere. I’m the first Product Designer ever to join Otten Coffee. No design tools, no design resource (eg: documentation), there’s nothing. And in the upcoming project we will faced really big project to revamp the whole Otten Coffee Digital Product. From there I'm starting to talk with some of engineer to build our own design system.
The Problem
Otten Coffee has more than One Digital Product (E-commerce, Subscription, Smart Retail) it mean, more product will be more inconsistency if we designed it and develop it with traditional way
We have to Revamped the whole Otten Coffee Digital Product on all platform (Desktop, Mobile web, iOS and Android)
Designing and develop a product or feature is not too effective because we need to build a component in every different page (example : button and form)
TIme to finish the project before design system
The Process
Audit Component in Existing Product
At the first, we audit component in existing product which component should be made or not
Build the Design Token (Foundation)
Start to define the foundational element such as color, iconography, typography, Spacing, Radius, Shadow. And build it in Design Tools (we use figma) and documented it.
Build the Design Component
We separate component between Mobile (Android, iOS, web) and Desktop because there will be differences in terms of size and layout.
Document It
Besides making documentation in notion or paper, we also create documentation in the form of a website. The goal is that everyone can access it easily and become a source of truth for Developer and Designer.
Announce to the team
Actually we always giving our update to the team while working on design system from the first process till it already to use. But in this time we want to giving the formal announcement to the whole team that we have built our own design system.
The Result
After we implement our design system in our design and development workflow. We have more consistent Design and of course more effective time and faster development time
Implementation
Here is the implementation of Design System in cart from 3 different Product :
Smart Retail, Subsccription and E-Commerce
Before Using DS
After Using DS
New registration design & flow
Project Impact
Work hard pays off, after so much process, so much times, so much effort. We have success built our own design system and saving development time by 428,57%.
Not only that, we also managed to make all otten products more Consistent and have the same experience. And if we have Design System, we can solving more serious problem rather dan solving how to make button in every page. I really enjoyed the process and all of the experience.
We are still working to improve our Design System nowadays to support the business and creating effective work environment through this Design System.
Increase development time by 428,57%
Maintaining product consistency across all Otten Coffee Product
Improve Designer & Engineer working flow and discussion