menu
close
Coupang is the largest e-commerce app in Korea.
I was responsible for building and maintaining Coupang’s core design system.
2021 - 2024
As a Senior Product Designer at Coupang, Korea's largest e-commerce app with 21M+ customers, I was responsible for building, refining, and scaling core design system components. Through Carousel migration, we achieved a tenfold increase in adoption and 83% better engineering efficiency.
Design Systems
ABÂ Testing
Figma
Protopie
Our North Star was to achieve design excellence through our design system. I led a collaborative workshop with leaders from design, PM, and engineering to evaluate our current state and align on goals and priorities for the next quarter.
Design
Enhance design coherence and scalability
PM
Foster cross-functional alignment
Engineering
Reduce engineering inefficiencies
We audited all app domains and identified the Carousel component as the most impactful area for improvement, as it was the most used design system component and generated significant GMV (Gross Merchandise Value). Addressing problems with the Carousel led to notable enhancements in success metrics, demonstrating its impact.
There are more than 100 Product Carousels throughout the app, but each with different designs. Important elements like the Price, Logo, Button and Image size were inconsistent, resulting in cognitive load for the customer.
The different designs also meant that the code was fragmented, resulting in enormous engineering inefficiencies. Site-wide changes would take more than 100MD to implement.
The Product Carousel is a widget that displays a group of products recommended to the customer. It typically consists of a row of products that can be scrolled horizontally.
The purple areas below show where the Carousels are placed in the purchase flow. Carousels take up the majority of real estate on almost all pages.
Breaking down the legacy Carousels, we can see that similar elements are styled differently, even though they serve the same function in each Carousel.
Coupang has 21M+ active users in Korea, which is 41% of the country's total population.
Out of the 100+ Carousels that customers see, the adoption rate of Coupang’s design system Carousel component was a mere 6%.
The goal of this project was to raise the adoption rate and unify the different Carousels.
Coupang’s design system follows Brad Frost’s concept of Atomic Design, the idea that the user interface can be broken down into the following 5 stages.
As such, the Carousel component can be broken down into a Header and Product Unit, and the Product Unit broken down further into its subsequent parts.
Collaborating closely with engineering, we categorized and named each part of the Product Unit, redefining its overall structure. We transformed each group into Figma's nested components, incorporating flexible properties to make them more intuitive and versatile for designers to use.
The Product Unit was then optimized for each delivery type and product category.
Using the new Product Unit component, we could also make the Carousel consistent. The image size, price, logo, and Button label were adjusted.
The Product Carousel consists of smaller components like the Header, Product Unit, and Divider. The spacing between the components is shown below.
The Product Carousel has a responsive width so that it looks scrollable on any device. It is designed to show 2.5 number of items regardless of the Carousel width.
At the end of the Product Unit list, there is an additional "See More" Button with an enlarged touch area to make the button more touch-accessible.
We then created different variations of the Carousel, so that long pages with multiple Carousels would look less monotonous.
The age group for Coupang's users covers a wide range, from Gen Z to Baby Boomers. Approximately 60% of users change their display setting to enlarge their device font size. Taking this into account, we improved the accessibility for the Carousel component by adjusting its font size and spacing.
There are 7 levels in the display font size setting on iOS and Android. The majority of customers that change the setting use it to enlarge the text size. We defined the 7 levels of font sizes for the Header and Product Unit in the Carousel component.
Before, the enlarged version of the Carousel at font level 7 had the title truncated to one line, which made it impossible to read the whole title of the Carousel anywhere. This was changed to show the full title text up to two lines. Also, the product name was bigger than the price, making the price less glanceable. The font size and spacing were adjusted for better visual hierarchy and readability.
We migrated a total of 22 Carousels in the Gateway home screen alone, each Carousel optimized depending on the recommendation type. A key consideration was that these Carousels were all shown listed together.
Some Carousels have a Quick-Add-To-Cart (QATC) button so that customers can add items to Cart without visiting the product detail page. This is especially useful for Fresh products where there is not much differentiation in product attributes.
Through migration, we were able to raise the adoption rate of the Carousel from 6% to 60%, a tenfold increase. Through AB testing, we confirmed that the guardrail metrics remained neutral, which meant there was no negative impact on business metrics such as GMV.
As a result of the migration, we could also improve engineering efficiency by 83%. It is now much easier to apply site-wide changes to the entire app.
For example, a feature that takes 1MD to build would take approximately 54MD in order to apply to 100 Carousels. On the other hand, for the design system Carousel, this will only take 9MD in total for native and backend effort.
Migrating the Carousel component meant making some trade-offs to balance priorities and resources. While the plan was to update all carousels in the app, we had to focus on the most impactful areas due to evolving business needs and time constraints. Key considerations included focusing on high-traffic areas like the Gateway and Category Home pages in order to maximize improvement in user experience, while less critical updates were put on hold. This selective approach allowed us to stay aligned with overall business goals without overextending resources.
We also quickly realized that product teams often wanted to customize the Carousel component to align with their specific goals. It was a challenge for us to achieve a unified design system while at the same time having the flexibility to meet different business requirements. Finding this balance became key to ensuring the Carousel was both consistent and adaptable.
In addition to the core design system, I also created a toolkit for designers to use. The toolkit has its own design system, from typography and color to spacing and various components including templates and spec tools. The toolkit has a total of 156 components, is used by more than 36 teams, with an average of 8,000 insertions per week.
