Case studyDesign system · SiCepat Ekspres

Gezit Design Language System

One design language for every SiCepat product.

Role: Product Designer
Company: SiCepat Ekspres Indonesia
Scope: UI components · Design system · Testing · Maintenance
Team: Head of Design + 11 credited collaborators

Validated with 5 product designers Gezit Design Language System: cover with components and illustrations

84.5SUS score, above the 68 benchmark
30%less design time, at most
16m 50ssaved per designer on average (max 38 min)
+4.8consistency score on page 1 (34.2 → 39)

01 · Context

One of Indonesia's largest logistics networks, with no shared design language.

Founded in 2014, SiCepat grew into one of Indonesia's largest logistics companies by 2021. As its digital products multiplied (customer apps, partner dashboards, internal tools), each team drifted into its own look, feel and behaviour. There was no unified system to guide design or engineering.

35M+transactions
1M+Android downloads
17,000partners
740+service points

02 · Problem

Five problems, one root cause: no single source of truth.

Inconsistent designEvery designer brought their own style, so the same action looked and behaved differently across apps.
Collaboration gapWithout a shared reference, designs were interpreted differently in build, causing delays and rework.
No documentationTeams hunted for assets and asked the same questions; knowledge lived with individuals.
No reusable componentsEvery button, form and layout was rebuilt from scratch, product after product.
Difficult onboardingNew joiners had no standard to learn from, so they duplicated work and diverged.

03 · Process

Built as a product, not a side project.

We adopted Nathan Curtis' Cyclical team model: a central design-system team plus a federated group of contributors, each informing the other. Everything lived in Figma: a UI pattern library for designers, hand-off specs for engineers, and documentation anyone could read.

Diagram of the cyclical team model: a central design-system team and federated contributors — Fig. 01 · Cyclical team model

One Figma workspace serving designers, engineers and documentation readers — Fig. 02 · One Figma home for every role

Foundations came first (colour, typography, spacing and iconography), so every component would inherit the same decisions.

Colour palette with contrast checks — Fig. 03 · Colour system with contrast checks

Type scale specimen — Fig. 04 · Type scale

Spacing token scale — Fig. 05 · Spacing tokens

A UI audit clustered screens across the ecosystem, merged duplicates (four button styles became three) and ranked components by usage and impact. A naming convention (component / class / type / state) and Atomic Design kept the library searchable.

Button audit: four similar styles before, merged into three after — Fig. 07 · Audit: before and after

Components ranked by usage and impact — Fig. 08 · Component prioritisation

Naming convention: component/class/type/state, for example button/primary/active — Fig. 09 · Naming convention

04 · Solution

A component library for mobile and web, plus an illustration system.

Gezit shipped as reusable, on-brand components for both platforms, tested and refined before landing in SiCepat products. An illustration system covers storytelling: pick from the Figma library, or request a new illustration, wording or Lottie through a form.

Gezit UI components used in SiCepat product screens — Fig. 10 · UI components in product

Gezit illustration style examples — Fig. 11 · Illustration style

Illustrations placed inside product flows — Fig. 12 · Illustrations in flows

Swapping illustrations from the Figma library — Fig. 13 · Swapping illustrations in Figma

05 · Outcome

Faster, more consistent, and designers said so.

Before launch we validated the system with five product designers: each designed the same pages twice, once without the DLS and once with it, followed by interviews and a System Usability Scale questionnaire.

Chart of design time per participant, without and with the DLS — Fig. 14 · Time per participant, without vs with DLS

Consistency scores for page 1, without and with the DLS — Fig. 15 · Consistency scoring, page 1

SUS questionnaire results with a score of 84.5 — Fig. 16 · SUS questionnaire: 84.5

“Easy. Just drag & drop, find the component and pick the variant. The biggest help is time.”

Participant, on ease of use (translated from Indonesian)

“With the DLS the design looks better and neater.”

Participant, on satisfaction (translated from Indonesian)

“Spacing, layout and margins are already provided, so I don't have to think about them.”

Participant, on helpfulness (translated from Indonesian)

Next steps from the study: align component names with how designers think, add variants for product identity, and track DLS satisfaction quarterly. Components were then deployed into the shared engineering library with the engineering team.

Tracker of components deployed to the engineering library — Fig. 17 · Component deployment tracker

Recognition

Made by a team.

Head of DesignTundra Prihantiko
Product DesignersDanang Dwi, Theresia Karina, Nanda Febrian Adhi, Muhamad Fadli, Raka Caesar, Arief Bagus
UX ResearchersGabriella Dian, Ivan Yoshua
UX WriterFadhila Auliya
IllustratorMujahid Alawi
Motion DesignerAndri Wiranuari

Next project

Gezit Website

Showcase · Documentation