A built-in mini-app for online purchases of lifestyle products with Cathay Asia Miles
Project Type
Previous Work Project
My Role
UX/UI Designer
Timeline
July - Aug 2024
Team
Linda X. - Design
Tessa Y. - Business
Charlie L. - PM
Lanlnk - Dev
Tools
Sketch
OVERVIEW
I led the heuristic usability evaluation of Cathay Shop mini-program* before its initial launch. As one of the top airlines in the world headquartered in Hong Kong, Cathay Pacific sought to revitalize its passenger services post-pandemic by targeting the Mainland China market as part of the business plan. The Cathay Shop mini-program was planned to launch to support this plan.
*Note: Mini-program is a built-in mini-app in WeChat, a one-stop dominant social media platform in Mainland China.
PROBLEM & CHALLENGE
Recognizing this gap, we built the Cathay Shop mini-program, offering Mainland customers a premium online shopping experience with Cathay’s reward program – Asia Miles.
As Cathay Pacific gained more passengers and popularity in Mainland China, the need to extend the membership network and souvenir sales in the Mainland market increased. However, purchasing from its Hong Kong-based shops remained inconvenient for Mainland customers.
Final Check before Launch
When I joined the project, the team had finished the first round of development. Thus, my primary task was to evaluate the usability and visual design of the prototype before its launch. With a tight launch timeline, I kicked off the heuristic evaluation as a final check before official launch through usability evaluation and light design iterations, while the engineering team was working on QA testing.
Launch Timeline & Team Collaboration
HEURISTIC EVALUATION & ITERATION
I evaluated every single possible screen that appears in various use cases (~100 screens in total), with a special focus on the key user flows, including product selection, checkout, order status checking, and refund & exchange. Based on my understanding of a smooth, intuitive user experience and Jakob Nielsen's 10 Usability Heuristics, I summarized several heuristic rules I followed during the evaluation:
Then, I worked seamlessly with the Business Manager, Product Manager, and our development vendor team to update design iterations in the pre-launch testing prototype as a final check for usability and design. Below are some of the key highlights.
Advocate for Users while Serving Business Needs
Problem
The previous design lacked confirmation options or feedback after users selected a product category. Users had to manually exit the selection mode to check if their choice was correctly applied, violating the above usability heuristics #1 and #5 that call for immediate feedback and clear confirmation options to avoid errors. This could lead to user confusion or even drop-off.
Design for User Behavior while Improving Design Consistency
Consider Edge Cases and Tailor to Individual Needs
Problem
In the previous design, order counts were only shown on the status preview page, while the status detail page displayed counts only for action-required orders. This inconsistency disobeyed the above heuristic principles #4, #6, and #7 on design consistency, user learnability, and efficiency of use. Most users check for order status updates rather than action items, especially on a rewards platform where users usually only place a single order. Missing counts made the order status less accessible. Users had to click into detail pages to check the progress, increasing cognitive load and adding difficulties to use.
My Solution
To address this, I recommended consistently displaying order counts for all unfinished orders across both preview and detail pages. This design change reinforced consistency, reduced the need for users to recall timelines, and made order status more accessible at a glance, improving usability and design consistency.
Problem
For identical products in the order, the previous design only allowed users to request returns or exchanges as a group, with no option to select individual quantities. If a user wanted to return or exchange just one item from a multiple identical product order, they had to return the entire group and place a new order, adding unnecessary time and effort. This inefficiency conflicted with the #7 usability heuristic, which emphasizes efficiency of use.
My Solution
To address this, I proposed adding “Add to Cart” and “Check Out” buttons as both confirmation and clear calls-to-action. This change provided immediate feedback and guided users to the next-step action, improving overall usability while aligning with business goals.
My Solution
To improve this experience, I proposed enabling quantity selection during return or exchange requests. This allowed users to return or exchange only the specific items needed, better supporting real-world usage scenarios of returns and exchanges involving multiple identical products.
BUILDING STYLE GUIDE
A style guide was built for business operational use and future design reference.
Although Cathay Shop mini-app followed Cathay Pacific's existing design system, some new design conventions and components emerged to accommodate this newly developed product's hosting platform. Therefore, I built a style guide for the Cathay Shop mini-app, complementing design specifications customized for this product that were not included in the Cathay Pacific design system. This style guide serves not only as a future design reference but also as a guideline for the business team's daily CMS (Content Management System) entries. Below are examples of design specifications defined in this style guide.
OUTCOME
100+ UX/UI issues identified and solved, reducing users’ friction, enhancing usability, and improving user experience.
During the 6-week heuristic evaluation, I identified and addressed 100+ usability and UI design issues, such as dead ends in user flows and misalignments with brand guidelines. Despite a tight launch schedule, I effectively ensured design quality and usability before launch. These design changes enhanced overall usability, reduced user confusion, and aligned the interface more closely with user behaviors.
“There is no right or wrong answer for design, but you did a great job of finding better solutions by thinking from the users' perspectives and scenarios within the context of the product’s positioning. I also appreciate your initiative in educating the business team about design thinking.”
– Ernest Hui, Head of Design @ Cathay Pacific
Within 2 months of launching the Cathay Shop mini-app, we achieved: 6000+ daily traffic.
REFLECTIONS
Proposing design changes right before the launch was challenging but also rewarding. I carefully made every design decision based on heuristics and clearly stated the reason for the changes to the team. It was a fruitful journey both to better understand users of the product and to educate colleagues about user-centered design thinking.
My communication and collaboration skills were enhanced in managing different stakeholders under this cross-functional setting. While working with engineers and business units who might not be familiar with user experience, explaining the user’s circumstances by setting the scenarios, and aligning technical feasibility and business viability are key to an efficient mutual understanding.
As a final check before launch within the tight schedule, I was not able to make big edits to the design to further enhance usability. I wish I could have the chance to work on rounds of usability testing to gather users’ thoughts and improve the overall user experience through design iterations.
