Bukalapak
2022
Figma
Prodduct Design
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.
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.
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.
Think of a design audit like using a magnifying glass to zoom in on your brand's visual stuff. It's like giving everything your company puts out a really good check-up to make sure your brand's look, feel, and message are super strong and always the same, no matter where people see it. You want folks to recognize you, whether they're scrolling your website or checking out your ads.
Basically, with a design audit, we're aiming to spot where our design isn't quite right and where it's not working as well as it could.
But here's the thing: a design audit isn't just something nice to do; it's a must for any brand that wants to be on top of their game. Here's the deal: You gotta know what's going on with your product before you can get your design system in order.
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.
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.
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.
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.
After implementing the design system and revamping the design, we've achieved noticeable improvements. The design now appears more consistent, and we've introduced several elements aimed at boosting trust and credibility among users. These include showcasing available payment methods (highlighting our partnerships), incorporating an influencer review video section, and more. I may delve into these details and the revamp process further in another case study. Additionally, this implementation has streamlined development time, as both engineering and design teams now share a unified source of truth for components.
