Athena UX Revamp
To revamp the product and make the case handling efficient and user friendly
Date
Jan 2023 - Oct 2023
Role
Product designer
Responsibility
- Discovery of all problems
- Synthesis of problems/pain points holistically based on user journey
- Organizing workshop and facilitating ideation with stakeholders, engineers, users & designers
- User validation and qualitative data collection with UX researcher
- Design of product including all the iteration
Background
Agoda
Agoda is online travel platform, helps travellers book hotels and properties worldwide, plus flights, activities, and more. Agoda.com and the Agoda mobile app are available in 39 languages and supported by 24/7 customer support.
CEG
Customer Experience Group (CEG) is essentially our support center team. Our team assists our customers and partners with their post-booking questions and requests. CEG is very special as it is the only team in Agoda that deals directly with our customers.
Athena
Athena is a case management system used by customer service department of Agoda. It is used to handle tickets from our hotel and customers. Athena is a new in-house tool that replaced legacy tools like TOBO(Travel Operations Back office) in efforts to consolidate the various tools CEG agents use (1 CEG 1 Tool).
Why to revamp?
Currently, we are wrapping up the consolidation of main functions from legacy tools into Athena. We will decommission TOBO Booking List (legacy tool) by migrating the functionality all to Athena. Though migration's being finished, yet the new tool UX and its information architecture are still remaining to be reorganized and revamped.
Revamp for streamlined UX
Working scope
Since Athena is a young product with all the features migrated from the legacy tool, there are 3 main pages of this product. According to the dev effort estimate and roadmap planning, we are going to start from the Case Handling Page of Athena for the revamp.
KPI
Global Handle Time (GHT) of agent: overall time used in the
Finding problems
In order to find the problem area, we sent a UX audit survey to all the agents by the end of Q4 2022. Among the result we got, there are 1299 suggestion/feedback on improvement, within which 162 are under the category of UX. We categorized them into 10 groups [1] . Based on the group, we (3 designers & 1 research & 1 product manager) marked the area in the UI. [2]
[1]10 categories of UX audit feedback
[2]UI of all marked suggestion/issues
Problems
In Athena handling page, the UX problems can be synthesized from all the feedback into:
1. Poor accessibility
2. Low readability
Based on the problems [3], there are 4 solutions coming after:
Design Solution - North Star
How might we improve accessibility?
- Better utilization of real estate: BID list and Nav bar optimization
- Efficiency of loading & searching info: Enhance bottom panel to one scroll
- Better usability: Panel resizing behavior optimization
How might we improve readability?
- Better readability: Information restructure & visual enhancement
Design Validation & Product Implementation
In terms of feasibility for implementation, we broke them down into 3 phases:
- Phase 1: Improve the UX accessibility - overall UI improvement
- Phase 2: Improve readability - Information architecture improvement
- Phase 3: Over-all layout change to full flexibility (a new design with full flexibility, not being selected in this article).
Once we finished a round of design iteration, we'll go on to the research session for validation.Only being bought in by users and business stakeholders, can we invest developer's effort later.
[5]Working process
[6]Timeline and roadmap among Design & Research & Product development
Phase 1 - overall UI improvement
Action item:
- BID list and Nav bar optimization --> Better utilization of real estate:
- Enhance bottom panel to one scroll --> Efficiency of loading & searching info:
- Panel resizing behavior optimization --> Better usability
[4]Design changes
phase 2 - information architecture restructure
Goal:
Information architecture restructure & visual enhancement - Better readability
[5] Current information panel
Content:
There are 8 categories in the bottom sheet with 86 items (each table as an item) in total under them. The categories are: summary, hotel&supplier, member&loyalty, charges, payment, note log, activity log, property message.
[6] Dissection of all the categories
Action item:
1. Regroup the info, including big categories and 86 items' placement
2. Rename the new categories to be easier understood
3. Design language alignment & UI refinement
Research Team
I'm working as the main designer and collaborating with 1 researcher, 1 project manager to control the timeline and 1 coordinator from customer support agent team on logistics.
Methodology
The method we are using here are :
2. Tree Testing
3. Focus group discussion
Participants
Group: All agents from different teams
Sample size: 80-100 people
[7] Research method & participant structure
Result
Here we used 3D clustering visualization of the card sorting result, combining with feedback from FGD validation, we concluded the new categories and renamed some of them.
The new categories now are :Booking, hotel&supplier, member&loyalty, charges, payment, note log, activity log
[8] How we concluded the new categories
Solution
After the IA re-org, we improved the UI slightly, in order to make the visual hierarchy to standout and be clearer. Also we aligned the UI with the updated Agoda design languages.
[9] Improving visual hierarchy
[10]Design change of phase 2