Wendy Xiuwen Chen
 UX designer at BBC, based in London, UK
 CV Email

Redesigning APM Monaco's WeChat Mini Program: Enhancing User Experience, Checkout Flow, and CMS Functionality






Intro
At 31Ten Digital Agency (now part of EY), I worked on a project for APM Monaco with three key objectives:
Redesign the homepage and product page for their WeChat mini program.
Help the client understand customer purchasing behaviour and login experience across platforms in China.
Collaborate with their engineering team to enhance the CMS for easier layout customisation.

For the project outcomes:
I developed a flexible, block-based homepage design, added features like sharing options and colour selection on the product page, redefined the checkout process on their website, and mapped the user flow across WeChat, Baidu, and TikTok. Additionally, I introduced a flexible layout feature, allowing easy customisation of the WeChat mini program.
Project type and timeline
 UI/UX design,  2020

ProductAPM Monaco WeChat mini program
APM Monaco web experience

My role
UI/UX designer
SkillsMarket research, User flow, UI design, Enterprise /B2B design, Prototyping, Problem solving




Home page design challenage

We analysed the current problem that existed on the part that we need to focus on. In the previous homepage design, the homepage was taken by different collections, which caused a long time of boring reading and scrolling.
How did we improve it?

More space for image


We used the transparent top bar to make the whole screen look more significant and comfortable to read.

Flexible blocks design



Added content varity into homepage with flexible blocks design, like the Match, bestsellers etc. so user won’t only seeing different products.

*What’s flexible blocks design: 
all information are customizable except for the key visual block on the top, others are all block design with a different layout so that our clients can easily change the content to adapt their new season products line.

Message banner



To help the brand communicate with their customers and announce updates, we designed a message banner as a news broadcaster. In this example, the banner notifies customers: "Due to the stormy weather, your order may be delayed by 1 to 2 days. Please be patient or consider ordering in advance."

Product page design challenage

In the previous design, the sharing feature was not easily visible to users, leading most people to rely on their browser’s native sharing options. Additionally, although APM offers a single product in multiple colors, users are unable to select their preferred color when adding the product to the shopping cart—only the size option is available.
How did we improve it?One of our UX recommendations was to enhance the visibility and engagement of the sharing feature by implementing the following improvements:
Provide users with multiple sharing options, allowing them to generate a product poster or share a direct link at any time. Also, position the sharing icon in the right corner, ensuring it remains accessible and follows users’ actions as they navigate the page.