A built-in mini-app for online purchases of lifestyle products with Cathay Asia Miles

UX/UI Design

E-Commerce

Project Type

Previous Work Project

My Role

UX/UI Designer

Timeline

July - Aug 2024

Team

Linda Xiao

Tessa Yang

Charlie Liu

Lanlnk

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.

Gatekeeping before Launch

When I joined the project, the team had finished the first round of development. Thus, my primary task was to evaluate usability and design based on the prototype before launch. Due to a tight launch timeline, formal usability testing was not feasible. Therefore, I kicked off the heuristic evaluation to inspect usability, combined with light design iterations before launch, while the engineering team was working on QA testing.

Launch Timeline

MAKE THE CHANGE

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. 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.

In the previous design, users had neither a confirmation option nor feedback after selecting a product category. I raised the concern that this could cause confusion or even user drop-off. I proposed adding “Add to Cart” and “Check Out” buttons as both confirmation and clear CTAs, streamlining next-step actions. This design iteration improved usability while serving business goals.

Advocate for Users while Serving Business Needs

Previously, order counts appeared only on the status preview page and for action-required statuses on the status detail page. I recommend always showing the order counts for unfinished orders in all statuses consistently, as users mainly check for updates rather than actions needed. Since users rarely place multiple orders on a rewards platform in a short period, visible counts act as quick reminders of the order status. Users do not have to click through the order detail page to check for status, improving usability, accessibility, and design consistency.

Design for User Behavior while Improving Design Consistency

The previous design only supported refund and exchange requests for all identical items as a group. I proposed allowing users to select quantities when requesting a refund or exchange, accommodating situations where they purchased multiple of the same item but only want to return or exchange some of them.

Consider Edge Cases and Tailor to Individual Needs

IMPACT

100+ issues identified and solved, reducing confusion, enhancing usability, and improving user experience.

During the 6-week heuristic evaluation, I identified and addressed over a hundred usability and UI design issues. 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, ultimately supporting both user needs and business goals.

[placeholder for numerical data]

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.

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.

Communication App for Single Parents and Children