Let’s work together

Feel free to drop me a message

© 2024 Keris Cheng. All rights reserved.

Let’s work together

Feel free to drop me a message

© 2024 Keris Cheng. All rights reserved.

Let’s work
together

Feel free to drop me a message

© 2024 Keris Cheng. All rights reserved.

© 2024 Keris Cheng. All rights reserved.

© 2024 Keris Cheng. All rights reserved.

© 2024 Keris Cheng. All rights reserved.

Agoda App Redesign

Agoda App Redesign

UX/UI Design

Mobile App

Hotel Booking

Project

UI Design

Timeline

2 weeks | 2023

Role

UX/UI Designer

Team

Individual

About the Project

Background

Understand user pain points in the Agoda app and improve the hotel booking process's UI and visual design

Understand user pain points in the Agoda app and improve the hotel booking process's UI and visual design

Agoda is one of the world's fastest-growing online travel booking platforms, headquartered in Asia. It provides travellers with easy access to a wide variety of luxury and budget hotels, apartments, homes, and villas to suit all budgets and travel needs.


For this project, my objective was to understand the users and their existing pain points when using the Agoda app.


My focus was on improving the user interface (UI) and visual design of the hotel booking process.

Problem Statement

Users face issues with navigation

Users face issues with navigation

Users frequently use the app to book hotels for vacations and compare prices with other online travel agencies (OTAs).


However, they face several issues such as unclear navigation, challenging access to customer service, information overload, a cluttered interface, excessive color usage, lack of information hierarchy, and inconsistent design components.

Solution

Focus on enhancing navigation
and simplifying

Focus on enhancing navigation
and simplifying

  1. Improving the navigation

  2. Simplifying the UI, clean up the unnecessary elements, categorise informations

  3. Make the UI minimal and friendly by changing the colors, shapes and typography

  4. Ensuring that content is easy to understand and consume

Prototype Demo

Prototype
Demo

Research

Identify existing challenges

Identify existing challenges

The research methods are to gain an in-depth understanding of user experiences and identify existing challenges they encounter while using the app. These involved conducting a usability test and making detailed observations.

WHAT I DID

Identifying Existing App Pain Points

User Feedback

User Observation

UI References

Existing App

Cluttered interface and information overload

Cluttered interface and information overload

During the research phase of my process, I primarily aim to identify the existing pain points within the application. This involves a thorough analysis of its current state, focusing on areas where users may be facing difficulties or inconveniences. By identifying these issues, I gain a clear understanding of where improvements are needed to enhance the overall user experience.

User Feedback

"This app needs some serious redesign."

"This app needs some serious redesign."

I analyzed user comments and feedback to gain insights into the challenges, pain points, and overall user satisfaction levels of the Agoda app.

User Observation

Focused on booking tasks to identify potential user pain points or frustrations

Focused on booking tasks to identify potential user pain points or frustrations

Through user observations, I can identify potential pain points or frustrations that users may experience. After identifying these issues, I can begin to find innovative and effective solutions to enhance the user experience.

Define

Define

Currently, users are facing an overwhelming amount of information and elements

Currently, users are facing an overwhelming amount of information and elements

In the definition phase of this project, I have identified the following issues our users are currently facing, based on a thorough and comprehensive research analysis.

In the definition phase of this project, I have identified the following issues our users are currently facing, based on a thorough and comprehensive research analysis.

Ideate

Ideate

Base on the insights, I plan to redesign the first three stages of the booking process with design solutions

Base on the insights, I plan to redesign the first three stages of the booking process with design solutions

The aim is to resolve most issues by simplifying the UI and making it cleaner.

This involves adopting a minimalist and user-friendly approach with changes in color, shape, and typography. Additionally, navigation will be enhanced and the content will be made more digestible.

The aim is to resolve most issues by simplifying the UI and making it cleaner. This involves adopting a minimalist and user-friendly approach with changes in color, shape, and typography. Additionally, navigation will be enhanced and the content will be made more digestible.

User Flow
User Flow

User Flow

(Highlight only the necessary steps taken in this case)

(Highlight only the necessary steps taken in this case)

(Highlight only the necessary steps taken in this case)

Design

Aims to improve product usability with a minimal, modern, and clean design for a better hotel booking experience

Guidelines and a design system have been set for consistent and efficient use of typography, colors, icons, components, grid, and spacing.

Design

Aims to improve product usability with a minimal, modern, and clean design for a better hotel booking experience

Aims to improve product usability with a minimal, modern, and clean design for a better hotel booking experience

Guidelines and a design system have been set for consistent and efficient use of typography, colors, icons, components, grid, and spacing.

Wireframe

Wireframe

To organise my ideas,
I begin by sketching a wireframe

To organise my ideas, I begin by sketching a wireframe

I also use low-fidelity wireframes to explore and refine design solutions before committing to detailed work.

I also use low-fidelity wireframes to explore and refine design solutions before committing to detailed work.

Final Product

Final Product

Final Product

Creating an easy navigation with a streamlined user interface
Creating an easy navigation with a streamlined user interface

Creating an easy navigation with a streamlined user interface

Easy Navigation

Easy Navigation

To ensure easy navigation and quick information retrieval, it is recommended to keep the home page and hotel search page simple and minimalist.


This will help users locate the information they need with ease.

Simplifying the UI

Simplifying the UI

The amount of information presented on the hotels list and hotel details pages can sometimes feel overwhelming.


To address this issue, I have streamlined the user interface (UI) to only display the essential information that users need.

Easy to Understand

Easy to Understand

The current app design includes unnecessary duplicate information and lacks clarity in distinguishing between buttons.


To resolve these issues, my proposal is to simplify the interface by having a single call-to-action (CTA) button for each booking option. Additionally, I suggest displaying only the final price to avoid confusion for the user.

Final Thought

What have I Learned

What have I Learned

This is my first User Interface (UI) Project. One of the challenges I encountered during this project was maintaining focus and clarity when creating the wireframe to determine the subsequent steps. It required me to carefully analyse and consider various aspects before making decisions.


However, through this experience, I have gained valuable knowledge and skills that will benefit me in future projects.

Next Project

Carousell: Improving
Security and Reliability