Content

UX UI CASE STUDY

Create Agoda Icon Guideline and Icons

UX UI Design

Visual Design

Design System

OVERVIEW

This project focuses on creating a unified icon guideline system for Agoda to ensure consistency across all digital touch points. The goal was to redesign and standardize the existing icon set so that all icons follow a cohesive visual language, improving clarity, usability, and scalable across the platform.

YEAR

2024-2025

ROLE

UI DESIGNER
VISUAL DESIGNER

About the project

The work involved auditing the current Agoda icon library, identifying inconsistencies in style, stroke, and proportions, and then redesigning the entire set into a single, scalable system. The new guideline defines clear rules for grid, stroke weight, corner radius, and visual style, ensuring that every icon feels part of the same family. This system helps improve design efficiency, reduces visual noise, and supports a more seamless user experience across Agoda’s digital products.

Problem

The existing Agoda icon library lacked a clear and scalable design system, resulting in inconsistencies across the product experience. Many icons reused secondary elements inconsistently, with varying stroke styles, proportions, and visual treatments that made the overall interface feel fragmented and less cohesive. The absence of standardized guidelines also made it difficult for designers to create new icons efficiently while maintaining consistency. This led to challenges in scalability, slower design workflows, and a visual language that did not feel fully unified across Agoda’s digital platforms.

Solution

Step 1 — Icon Library Audit
The process began with a full audit of Agoda’s existing icon library to identify inconsistencies and repeated visual patterns. During the audit, commonly reused secondary elements such as cancel, change, payment, and status indicators were categorized and analyzed to understand how they were being applied across different icons.


Step 2 — Secondary Element Systemization
Based on the findings, the repeated secondary elements were redesigned into standardized modifier components. This created a reusable system where each modifier follows the same visual rules, helping improve consistency while reducing the need to redesign similar elements repeatedly.


Step 3 — Grid-Based Icon Redesign
The icons were then rebuilt using a structured grid system that defines clear placement rules for modifier components. By assigning fixed positions for these elements, the system allows designers to easily swap modifiers using component properties, making icon creation faster, more scalable, and easier to maintain across the design system.

Outcome

The icons were then rebuilt using a structured grid system that defines clear placement rules for modifier components. By assigning fixed positions for these elements, the system allows designers to easily swap modifiers using component properties, making icon creation faster, more scalable, and easier to maintain across the design system.

UX UI CASE STUDY

Create Agoda Icon Guideline and Icons

UX UI Design

Visual Design

Design System

OVERVIEW

This project focuses on creating a unified icon guideline system for Agoda to ensure consistency across all digital touch points. The goal was to redesign and standardize the existing icon set so that all icons follow a cohesive visual language, improving clarity, usability, and scalable across the platform.

YEAR

2024-2025

ROLE

UI DESIGNER
VISUAL DESIGNER

About the project

The work involved auditing the current Agoda icon library, identifying inconsistencies in style, stroke, and proportions, and then redesigning the entire set into a single, scalable system. The new guideline defines clear rules for grid, stroke weight, corner radius, and visual style, ensuring that every icon feels part of the same family. This system helps improve design efficiency, reduces visual noise, and supports a more seamless user experience across Agoda’s digital products.

Problem

The existing Agoda icon library lacked a clear and scalable design system, resulting in inconsistencies across the product experience. Many icons reused secondary elements inconsistently, with varying stroke styles, proportions, and visual treatments that made the overall interface feel fragmented and less cohesive. The absence of standardized guidelines also made it difficult for designers to create new icons efficiently while maintaining consistency. This led to challenges in scalability, slower design workflows, and a visual language that did not feel fully unified across Agoda’s digital platforms.

Solution

Step 1 — Icon Library Audit
The process began with a full audit of Agoda’s existing icon library to identify inconsistencies and repeated visual patterns. During the audit, commonly reused secondary elements such as cancel, change, payment, and status indicators were categorized and analyzed to understand how they were being applied across different icons.


Step 2 — Secondary Element Systemization
Based on the findings, the repeated secondary elements were redesigned into standardized modifier components. This created a reusable system where each modifier follows the same visual rules, helping improve consistency while reducing the need to redesign similar elements repeatedly.


Step 3 — Grid-Based Icon Redesign
The icons were then rebuilt using a structured grid system that defines clear placement rules for modifier components. By assigning fixed positions for these elements, the system allows designers to easily swap modifiers using component properties, making icon creation faster, more scalable, and easier to maintain across the design system.

Outcome

The icons were then rebuilt using a structured grid system that defines clear placement rules for modifier components. By assigning fixed positions for these elements, the system allows designers to easily swap modifiers using component properties, making icon creation faster, more scalable, and easier to maintain across the design system.

UX UI CASE STUDY

Create Agoda Icon Guideline and Icons

UX UI Design

Visual Design

Design System

OVERVIEW

This project focuses on creating a unified icon guideline system for Agoda to ensure consistency across all digital touch points. The goal was to redesign and standardize the existing icon set so that all icons follow a cohesive visual language, improving clarity, usability, and scalable across the platform.

YEAR

2024-2025

ROLE

UI DESIGNER
VISUAL DESIGNER

About the project

The work involved auditing the current Agoda icon library, identifying inconsistencies in style, stroke, and proportions, and then redesigning the entire set into a single, scalable system. The new guideline defines clear rules for grid, stroke weight, corner radius, and visual style, ensuring that every icon feels part of the same family. This system helps improve design efficiency, reduces visual noise, and supports a more seamless user experience across Agoda’s digital products.

Problem

The existing Agoda icon library lacked a clear and scalable design system, resulting in inconsistencies across the product experience. Many icons reused secondary elements inconsistently, with varying stroke styles, proportions, and visual treatments that made the overall interface feel fragmented and less cohesive. The absence of standardized guidelines also made it difficult for designers to create new icons efficiently while maintaining consistency. This led to challenges in scalability, slower design workflows, and a visual language that did not feel fully unified across Agoda’s digital platforms.

Solution

Step 1 — Icon Library Audit
The process began with a full audit of Agoda’s existing icon library to identify inconsistencies and repeated visual patterns. During the audit, commonly reused secondary elements such as cancel, change, payment, and status indicators were categorized and analyzed to understand how they were being applied across different icons.


Step 2 — Secondary Element Systemization
Based on the findings, the repeated secondary elements were redesigned into standardized modifier components. This created a reusable system where each modifier follows the same visual rules, helping improve consistency while reducing the need to redesign similar elements repeatedly.


Step 3 — Grid-Based Icon Redesign
The icons were then rebuilt using a structured grid system that defines clear placement rules for modifier components. By assigning fixed positions for these elements, the system allows designers to easily swap modifiers using component properties, making icon creation faster, more scalable, and easier to maintain across the design system.

Outcome

The icons were then rebuilt using a structured grid system that defines clear placement rules for modifier components. By assigning fixed positions for these elements, the system allows designers to easily swap modifiers using component properties, making icon creation faster, more scalable, and easier to maintain across the design system.