DS_Opener_B_1000x1600@2x.png

Design Systems

Defining scalability and consistency towards a better product.

DESIGN LEAD, PRODUCT, SITE ARCHITECTURE

Collateral for Lulu, an internal enterprise tool for Agoda's supply partners.

ABOUT

Agoda’s product encompassed hundreds of pages, programs, messaging, and user-flows. As a company scales, product teams are often split into dozens of concentrated pods focusing on running different tests or targeting different KPIs. With scalability, a clearly designed product goes from the hands of a designer, to the hands of a product manager / owner, to a tech lead, and then to en engineer or group of engineers who break down each component into dozens of quantifiable tasks. In this process, and without a helpful structure in place, the feature or product being built will slowly accumulate small inconsistencies which will amount to a large mess in the codebase. This is where Design Systems come in place, and specifically how the team at Agoda tackled an ever-persistent problem in any product org.

 

Process

DS_scalability-info_2000x500@2x.png

Design Tools that Scale Product

 
DS_components-info_2000x410@2x.png

Our team started out by identifying key categories / components that make up the majority of the platform. The idea was to establish these, audit, standardize, and then scale them back into the codebase with the help of a dedicated team of eight engineers on the tech side.

 
 

Defining a Design Language

 

Once basic categories were defined, we developed a simple internal-facing styleguide that anyone on the design, product, and engineering teams could easily reference.

 
 

Languages (Et Al.)

 

Needless to say, when your product is used by millions of people around the world, language is a key component for scalability. To begin, we identified the top user languages by users and BPD (bookings per day). With APAC being one of the primary user demographic, we extended the basic principles of typography to English, Simplified Chinese, Thai, Japanese, Traditional Chinese, and Korean.

 
 

Credits: Latte, Creative Technologist / Jamie Charlesworth, Creative Technologist / Fendy Ibrahim, Designer / Ali Lee, UX / Kittikun Atsawintarangkul, Tools / Peerapat Chuejeen, Iconography / Daniel Naven, Copywriter

 

 

RELATED

Solar

Refinery29

Lulu