Design Systems

Defining scalability and consistency towards a better product.


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


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.




Design Tools that Scale Product


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