Building a Design System from Scratch
Overview
The online marketplace, formerly known as Goast.store, underwent a name change to TechGem.Store due to unexpected circumstances. This transition marked a crucial moment as it joined a new vertical under Bukalapak.
On July 13th, 2022, Techgem.Store was officially launched, providing users with a platform to buy used phones directly. Marketing efforts kicked off on August 9th, with the aim of driving traffic to the upper funnel. With the target of achieving 100 transactions daily, we closely examined the website's performance to spot areas for improvement, especially in boosting user conversion rates throughout the funnel. Throughout the launch of TechGem.Store, our team diligently tracked the website's performance, focusing on user satisfaction, ease of use, and pinpointing any issues users encountered.
Role
Product Designer
Industry
Ecommerce
Background
Three months post-launch, we conducted feedback sessions by interviewing users to gather insights. One significant finding from our analysis was the presence of trust issues deterring users across both the lower and upper funnel. A key contributor to this lack of trust was the inconsistent, unprofessional, and cluttered website design, which failed to instill confidence in users.
Consequently, we decided to revamp the website to foster a sense of security and trust among users.
Although the entire revamp process won't be discussed here, I'll delve into how I developed a design system to improve consistency within the website.
The Problem
So, the big problem we're seeing is all these inconsistencies popping up during and after we hand things over. And you know what's causing it? Techgem not having a solid design system in place. We've been talking to folks, and it turns out these inconsistencies are making users feel shaky about trusting our website to actually buy stuff. They're looking at it and thinking, "Hmm, seems kinda sketchy." Plus, what we see in Figma and what the engineers end up with sometimes don't match, especially when it comes to things like colors and shadows. And let's not forget, without a design system, it's taking us forever to get a page sorted out.
Component Audit
During the design audit, I organized the frequently used components in those designs. I came across approximately 70+ components (excluding variants), which I'll now create and store in our design system.
The Design System Structure
Before diving into creating my design system, it's essential to pause and consider its structure. Now that I understand the significance of design systems, let's delve deeper into their contents and organization. The atomic design framework, as proposed by Brad Frost, offers a method that aids designers in constructing robust design systems. It's akin to erecting a building, beginning with the smallest components and gradually assembling them into the complete structure.
The Design System
Through my efforts, I managed to assemble a total of 488 components and 109 styles, significantly improving the designing and hand-off processes for our team.Efficiency stands as a central pillar in design systems, and mine is no exception. The primary goal of this design system is to expedite asset creation by granting me access to a wealth of reusable components.
By eliminating the need to recreate basic elements from scratch, I can dedicate my time to innovation, swiftly crafting pages using purpose-built components and patterns.
Each UI component comes complete with usage guidelines and a range of variations, catering to different states and use cases. The accompanying documentation outlines available properties, empowering me to comprehend how to customize each component to suit my needs.
The Guide and Rules
As part of the process, I ensure that each design element and component receives meticulous documentation, offering clear guidance on their proper usage. Well-documented design systems serve as invaluable resources, communicating essential rules and best practices to support both designers and developers throughout the design and implementation journey. I find it beneficial to outline common use cases for each element while also highlighting how they should not be used, thereby minimizing inconsistencies in the final design.This documentation takes various forms, including comprehensive overviews, visual examples or use cases, and detailed scenario explanations. By providing ample detail on how to utilize each element and offering clarity, confusion is effectively avoided.
I've delved into Figma properties extensively, gaining insight into how components should be configured for optimal performance and visual coherence. Through meticulous documentation and visual aids, I've outlined a clear hierarchy for elements, using buttons as an example, distinguishing between primary, secondary, and tertiary variations to guide their appropriate usage. Moreover, I've placed a strong emphasis on accessibility considerations, ensuring that designs are inclusive and cater to the needs of diverse users.
The Implementation
As part of the process, I ensure that each design element and component receives meticulous documentation, offering clear guidance on their proper usage. Well-documented design systems serve as invaluable resources, communicating essential rules and best practices to support both designers and developers throughout the design and implementation journey. I find it beneficial to outline common use cases for each element while also highlighting how they should not be used, thereby minimizing inconsistencies in the final design.This documentation takes various forms, including comprehensive overviews, visual examples or use cases, and detailed scenario explanations. By providing ample detail on how to utilize each element and offering clarity, confusion is effectively avoided.
I've delved into Figma properties extensively, gaining insight into how components should be configured for optimal performance and visual coherence. Through meticulous documentation and visual aids, I've outlined a clear hierarchy for elements, using buttons as an example, distinguishing between primary, secondary, and tertiary variations to guide their appropriate usage. Moreover, I've placed a strong emphasis on accessibility considerations, ensuring that designs are inclusive and cater to the needs of diverse users.
Lesson Learn
A design system must strike a balance between consistency and flexibility to serve diverse use cases.
Documentation is as important as the design itself—it ensures adoption and consistency.
Collaboration with developers is key to ensuring the design system is implemented as intended.
Sorry 😞
This page is only availabvle on desktop at the moment