top of page

REDESIGN ‘MY ORDERS’ FOR A LARGE, CROSS-BORDER 
E-COMMERCE PLATFORM

When
Role
Feature
Results

方形logo 1.png

You may have never heard of this APP before, but,
the Beyond APP is the Top 1 Cross-Border E-Commerce platform directly shipping fashion goods from North America and Europe to Chinese consumers.

image 7.png
Product:
Company:

Business:
Customers:
2B Partners:

My Role:
Beyond APP
BorderX Lab, founded in Silicon Valley

Cross-border e-commerce platform
Chinese middle-class
NA and EU merchants / brands

UX Director
A part of the merchant partners
方形logo 1.png

Beyond APP

image 57.png
Phone2.png
Phone3.png

2021.03 - 2021.05         
UX Director working with designers
My Orders
post_sale_customer_service  12.63% ↓
              order_conversion_rate  13.12% ↑
              payment_rate   3.05%↑
              NPS improved

Phone1.png

CONTEXT

TURNING CUSTOMERS INTO REPEAT CUSTOMERS

In 2020, the revenue from loyal customers grew to more than half of the total revenue on the Beyond APP.
%revenue of loyal customers/total reveue
daily customer lifecycle composition.png
Before that, we had been mainly focusing on improving the 1st-order conversion rate and overall conversion rate through the before-sale journey.

The more orders a customer purchased, the bigger chances they would experience negative issues.

MY ROLE

My role in the company was UX director, managing product designers, UX designers, and marketing designers. I led the design of all products in the company, including apps, websites, and marketing materials across iOS, Android, and the web.

In this project, I led efforts to define and prioritize this project and get aligned with stakeholders. I helped designers define the design strategy, use appropriate research methods, define design principles, and choose design methodologies.

Strategy & Objectives

I led designers to conduct quantitative and qualitative research to define business impact.

Design Principles & Execution

I led the Design team to define the design principles.
I reviewed the outcomes of every step and provided feedback. I also helped designers make tough decisions.

Scope & Prioritization

I led designers to define the scope and advocated for teams to align and prioritize.

Leadership

I presented the outcomes to the co-founders, executives, and senior stakeholders, gaining buy-in.
I led the Design team to share insights of the out-of-scope projects to certain teams.

PROBLEM

REPURCHASE CUSTOMERS SUFFERED FROM THE POST-SALE EXPERIENCE

47.7% of detractors’ attributed their dissatisfaction to post-sale issues in the NPS survey of Feb 2020.
Detractors’ Reasons Grouped By Category

For the post-sale issues, the more orders a customer had placed, the lower the satisfaction rate.

Customers' Lifecycle Across Touch Points Analysis
Post-Sale Service
Promotions/Benefits
Shipping Fee
Shipping Time
0-order customers
1-order customers
2-3 orders customers
4-5 orders customers
≥6 orders customers
As over 60% of orders were placed by repeated customers at this time, repeated customers were considered the core audience of Beyond APP. The post-sale experience was a problem that needed our attention.

MAIN AUDIENCE

ALL CUSTOMERS

We included all customers in this project for two reasons.

First, the negative post-sale experiences were due to edge cases, such as a batch of packages being delayed. Furthermore, the probability of encountering edge cases was the same for every single order, no matter the customer’s lifecycle.

Second, the resolution was based on which batch the package was in and what issue the order had, meaning it was not related to the customer’s lifecycle. Thus, the resolution could benefit all customers.

SCOPE & CONSTRAINTS

IMPROVE THE POST-SALE EXPERIENCE WITHOUT FUNDAMENTAL CAPABILITY ENHANCED

Shipping time, post-sale services, and orders canceled by merchants were the three major negative experiences customers had in the post-sale journey.

Shipping Times Couldn’t Be Shortened in the Short-term

The shipping time on Beyond APP was competitive and could not be shortened in the short-term.

Hiring More Customer Service Representatives Was Not an Option

The human resource required by Customer Service had accounted for a large portion of the company’s operating costs.

Crossed Out the ‘Order Cancelled by Merchants’ Issue

We crossed out the ‘order canceled by merchant’ issue from this project. According to our research and data, this issue only occurred in some edge cases due to the merchant system’s failure or an inventory management issue, which required collaboration with merchants and our engineers. The details are included in the research section of this case study.

UX ANALYTICS & DEFINE

MY ORDERS REDESIGN

Shipping Time, Usability Issues, and Return/Refund Were the Three Main Causes for Post-Sale Service

70.05%

11.46%

10.78%

was about returns/refunds

was about shipping time

was about usability issues

of_total_post-sale_customer_service

of_total_post-sale_customer_service

of_total_post-sale_customer_service

image 54.png
Post-Sale Human Services Ranked by Causes

‘My Orders’ Was the Key Module

My Orders is highly engaged. This is the page that customers enter to manage orders, look up their order status, check shipping progress, and repurchase items.
My Orders Pages.png
3 Levels of My Orders

The Complex Info Hierarchy Resulted In More Customer Services

On most e-commerce platforms in China, the customer service (human representatives) response time is less than 1 minute. Thus, customers on Beyond APP tend to chat instantly with customer service when they can’t find the desired information at first glance.

The UX Design team observed that users were having difficulty finding their desired actions and information on My Orders. Take the Order Detail page as an example.
image 58.png
Vector 6.png

The info hierarchy is not sufficiently clear to help users find the desired information quickly.

Users have to expend much effort to choose one CTA among others.

Too much additional information affects information efficiency, i.e. shipping channel info, adding more for a free gift, etc.

The Order Detail Page
Further analytics were done for the three main pages of the My Orders module. The design team recognized that the redesign of My Orders would help users navigate more effectively and reduce their dependence on customer service.
image 177.png
image 179.png
image 178.png
UX Analytics of the 3 Main Pages of My Orders
Key Module: 
Problem:       
Opportunity: 

Summary

My Orders
Irrational info structure & info hierarchy
Reducing human cost & increasing user experience

CHALLENGE

REDESIGNING MY ORDERS TO IMPROVE THE POST-SALE USER EXPERIENCE

After the research and analytics, two challenges were uncovered for this project.

Redesigning My Orders, which contains the Order Listing page, Order Detail Page, and Shipping Progress page, to improve customers’ post-sale experience is the design challenge of this project.

Defining the business growth impact and prioritizing the project was another challenge of this project.

USER RESEARCH & DATA ANALYTICS

UNCERTAINTY, HIGH-COMMITMENT, AND LONG PROCESSES MAKE USERS ANXIOUS

Business Model’s Constraints Caused Users’ Pain Points

In general, Chinese customers have great online shopping experiences on popular e-commerce platforms. However, Beyond APP has some major constraints.
The uncertainty of the order status, the shipping progress, and the high commitment comes from the high price of the product, the high shipping-fee, the no-return policy, and the long waiting period before the package is delivered, which make users anxious.
image 82.png

An anxious user who has to keep checking on the order status and shipping progress.

Illustrated by @Frederique Matti

Phone Interviewed Customers to Gain More Specific Feedback

In addition to our general understanding, we phone interviewed 3 groups of customers to gain more specific feedback.

1. 5 customers who complained about the shipping time.
2. 3 customers who chatted to customer service about a payment issue.
3. 3 customers whose order(s) had been canceled by merchants.

*The phone interviews were supported by the call center of the Operation team.

Customer’s Concerns & Pain Points From Phone Interviews & Data

Users Wanted to Make Sure Their Packages Were On-Track

In regard to the shipping time, users were confused why their packages hadn’t moved for more than 2 days. Their typical thoughts were:

“My package wasn’t moving.”

“I just wanted someone to check my package, to make sure it wasn’t stuck.”

Users Had Confusions About Price, Customs Policy, Etc.

In addition to usability problems, users had other confusions about payment, as shown below.

image 237.png
Causes of Payment Inquiries

Users Felt Anxious Before Their Orders Were Shipped

Order Cancellation, Return/Refund

The ‘order canceled by merchant’ issues mainly occurred during particularly appealing promotions. Thus, users cared about whether they could buy the product(s) with these great deals.

A few merchants were responsible for over 80% of the merchant order cancellation issues. Most returns/refunds were due to product quality issues.

“I needed to make sure this order was successfully placed, otherwise, I would buy some other item with this great discount, or I’d try buy it on another platform.”

INSIGHTS

TIMELY & PROACTIVE UPDATING OF ORDER STATUS; SHIPPING PROGRESS

Based on all the knowledge gathered from user research, data, and design analytics, 4 in-scope insights were formed.

INSIGHT / 01

Users understand that intl. shipping times will be lengthy. However, they expect to see the package moving every single day because this is their common experience.
Furthermore, users would feel more comfortable if they knew someone was taking care of their packages.

INSIGHT / 02

Users need to check on the items right after placing their orders because 1) they only have 20 minutes to cancel the order for free after payment and 2) they can’t return the order for free.

INSIGHT / 03

Users want to be informed about the order status in a timely manner, because in some situations they immediately want to ensure that the order has been placed successfully.

Users have to deal with unnecessary information in many cases due to the poor info hierarchy.

INSIGHT / 04

GROWTH & PRIORITIZATION

REDEFINED AND PRIORITIZED THE PROJECT FROM A BUSINESS PERSPECTIVE

Keeping the users’ feedback and insights in mind, we looked at the data to see what business impact could expect while improving the users' experiences. 
Another growth opportunity was to increase the order conversion rate of My Orders.
We worked with two data analysts and the product manager, who took charge of the post-sale product modules in the data analytics and growth hypotheses processes.

With the business impacts revealed, the Design team aligned with the product managers and the Operation team, then prioritized the project on the product roadmap.

image 39.png
image 52.png
image 41.png
Post-Sale Funnel
GMV Percentage of Modules
Customer Service Times Grouped by Causes

Design Principles

Proactive Manner

Recognize users’ needs at each stage of the order process.


Give them timely updates to mitigate their uncertainty of an order being confirmed and ease their anxiety over 15-to-30-day-long logistics periods.


But keep in mind, do it properly and do NOT to be intrusive.

Progressive Disclosure

Recognize users’ needs at each stage of the order process.


Give them timely updates to mitigate their uncertainty of an order being confirmed and ease their anxiety over 15-to-30-day-long logistics periods.


But keep in mind, do it properly and do NOT to be intrusive.

Right Hierarchy

Recognize users’ needs at each stage of the order process.


Give them timely updates to mitigate their uncertainty of an order being confirmed and ease their anxiety over 15-to-30-day-long logistics periods.


But keep in mind, do it properly and do NOT to be intrusive.

SOLUTIONS

SOLUTION / 01

SOLUTION / 02

The Balance of Sufficient Information & Simplicity

7 x 3 Days < 19 Days, Accompanying Users Along The Way

Users want to be informed about the order status in a timely manner because in some situations they immediately want to ensure that the order has been placed successfully.

Users want to be informed about the order status in a timely manner because in some situations they immediately want to ensure that the order has been placed successfully.

SOLUTION / 03

Create Repurchase Paths

Users want to be informed about the order status in a timely manner because in some situations they immediately want to ensure that the order has been placed successfully.

SOLUTION 01

THE BALANCE OF
SUFFICIENT INFORMATION & SIMPLICITY

We redesigned the IA of the Order Listing and Order Detail pages with the progressive disclosure methodology and proactive manner based on the understanding of user needs.
image 220.png
Order Listing Page Info Architecture Drawn by Xiuming Jiang, I Updated it for This Case Study.

The Order Card on the Order Listing Page

Taking the unpaid and shipped stages as examples, see how the restructured information helps users navigate more effortlessly.

The Order Detail Page

The Order Detail page is meant to list the key details of orders. However, this doesn’t mean all the information should be listed on the initial screen.
Before
After
Order Detail Page UI
Rectangle 304 (1).png

Key Results

  • Payment_rate   increased by  3.02%

  • Order_cancellation_rate decreased by 20.4%

image 206.png
image 205.png

Wireframes & Design Instructions of Order Listing Page 

image 207.png

Wireframes & Design Instructions of Order Detail Page 

SOLUTION 02

7 x 3 DAYS < 19 DAYS, ACCOMPANYING USERS ALONG THE WAY

48 hours is the average end-to-end shipping time in the Chinese e-commerce industry. Therefore, Chinese consumers are extremely impatient when a delivery takes more than 3 days.
However, 80% of the packages are delivered within 15-30 days on Beyond APP.
To lessen users’ anxiety regarding the long period needed for international shipping, 3 approaches were taken.

Broke Down the Shipping Process Into 7 Subsections

By dividing the lengthy shipping period into 7 subsections, users are guided to focus on the progress of the current subsection of the whole shipping process. Progress throughout every step eases part of the users’ anxiety.
7 Subsections of the Shipping Process
image 202.png

Changed the Shipping Progress Inquiry's Info Flow Proactively Serving Users in Groups

Before the Redesign
image 203.png

An individual user had to contact a customer service representative to check the package’s shipping progress, even if the package was beyond the normal shipping time.

 

The representative replied to this customer individually.

This way, different representatives work for different customers regarding the same information of packages that were in the same cargo pallet.

After the Redesign
image 204.png
The Shipping Progress Inquiry’s Info Flow & Workflow After the Redesign

A more efficient info flow was built, which mainly included:


1) The system creates a job to notice the customer representative follow up with the packages that haven't moved for 3 days. 

2) The customer representative will notify all users who have packages in the same cargo pallet with a message explaining what's going on and what we will do.

3) Build a more smooth user flow on the App

Key Results

  • Post_sale_customer_service decreased by 12.63%

image 208.png

Wireframes & Instructions of Shipping Progress Page

image 209.png

A/B Testing Requirement

116172638-b5ceba80-a73d-11eb-9d1b-c952d7da46a2 1.png
115988470-79d81000-a5ec-11eb-9168-b3ed9dfd5198 1.png
Group 99.png

High-fidelity UIs

SOLUTION 03

CREATE REPURCHASE PATHS

Emphasizing Buy It Again CTA in Certain Stages of Orders

As mentioned above, we restructured the IA according to the progressive disclosure design philosophy. The data revealed that most of the repurchase items were purchased subsequently or after the receiving of the packages.

Therefore, the Buy It Again CTAs were reserved or added to the Unpaid, Confirming, To Review, and Cancelled stages of orders.
Take an Unpaid order as an example. By moving the unnecessary action buttons to the secondary screen, the Buy Again button was easier to find.
Before
before.png
After
order_1.png

Shortening The User Path

Before
image 218.png
before-2.png

Before the redesign, the repurchase button was Buy Again in all situations.

Users have to enter into the order detail page to add an item.

After
image 219.png
order_1-2.png

After the redesign, the text on the button was changed to Add to Cart when there was only one item in the order.

 

With one click, the item was added to the shopping cart without needing to enter into the Order Detail page.

Add Recommended Products at Certain Order Stages

Many users often visit the My Orders pages after placing orders.

Rather than letting users be anxious about the shipping progress, we intentionally guided users to explore more products by adding recommended products on the Order Listing page and Order Detail page.

Key Results

  • Order_conversion_rate of My Orders increased by 13.12%

  • Add_cart_rate of My Orders increased by 18.05%

  • The CTR of the Add To Cart button increased by 35.06%

KEY RESULTS

IMPROVED POST-SALE EXPERIENCE & INCREASED REVENUE

Key Metrics

  • post_sale_customer_service 12.63% ↓

  • order_CVR 13.12% ↑

  • payment_rate 3.05%↑

NPS.png

User Feedback

“Information on My Orders pages looks clearer than before.”

“I love the visuals of the new My Orders pages!”

“Bingfan invited me to use their app, but it was difficult to use. Later on, I found Beyond APP myself and I love to use it.”

*Bingfan is a direct competitor of Beyond APP.
This feedback comes from a big influencer.

OUT-OF-SCOPE PROJECTS

SHARING THE PROBLEMS & INSIGHTS WITH TEAMS

Order Cancellation

While looking into the detailed reasons for the ‘order cancelled by merchant’ issue, it became clear that the main reasons were the unavailability of items/sizes/color_choice and price differences. These problems could be solved through engineering work and partnership improvement with the merchants.

The product manager and the product designer organized meetings with engineers and the BD team to share the problems, insights, and suggestions.
image 227.png
image 173.png
image 175.png
image 176.png
User Feedback About Order Cancellation
Order Cancellation Causes
Slides Shared with Engineers and BD Team

Return/Refund

The return/refund policy is the Operation team’s responsibility. The Design team organized a meeting to share the knowledge and data of return/refund issues with the Operation team.
image 174.png
Order Cancellation Causes
image 226.png
Slides Shared with Engineers and BD Team
image 225.png
Return/Refund Causes Ranked
image 232.png
Phone Interviews Record

Payment Inquiry

Price difference, BC shipping channel restrictions, changing payment method, and exchange rate were the main causes of payment inquiries.
image 233.png
The Design team organized a meeting with PMs, the Logistics team’s managers, the Operation team’s managers, and some executives to share their insights and suggestions.

We suggested the product managers optimize the promotion events’ price calculation logic, which would ensure the price remained the same throughout the shopping journey.

We also suggested they optimize the functionalities in terms of BC channel restrictions in the shopping cart to avoid post-sale issues.

REFLECTIONS

WHAT I LEARNED

Less is More

Much information and numerous action buttons are needed on pages where the status and user cases are enormous.

However, stacking all information on the initial page challenges the user’s cognitive load. In this situation, progressively disclosing the information and actions might be a better solution.

Less crowded information helps users to navigate more easily and encourages user engagement.

Data Analytics Is Not an Only-Once Process Throughout a Design Project

Data analytics may be needed throughout the whole process of a design project.

At the early stage of a design challenge, data analytics can help define the project’s direction. In the midst of a design challenge, data analytics can help reveal the impact and define objectives. In the ideation process, data analytics can help get actionable solutions.

Leveraging different depths of data in different steps of a design project played a key role in this project.

Understanding the Business Is as Important as Empathizing With Users

UX designers all know that empathizing with users is a crucial part of UX design.

However, senior UX designers should have an in-depth understanding of the business, which will help designers define business impact, get support from others, and build a rapport in the company. This is especially important in a start-up, where growth is an everyday challenge.

Understanding the business gives UX designers the opportunity to bridge the users’ needs and the business’ objectives. In most cases, these two perspectives can be balanced perfectly.

Thank you for reading!

23.png
bottom of page