REDESIGN ‘MY ORDERS’ FOR A LARGE, CROSS-BORDER
E-COMMERCE PLATFORM
When
Role
Feature
Results
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.
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
Beyond APP
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
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
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
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.
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.
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.
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.
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.
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.
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.
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
.png)
Key Results
-
Payment_rate increased by 3.02%
-
Order_cancellation_rate decreased by 20.4%
Wireframes & Design Instructions of Order Listing Page
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
Changed the Shipping Progress Inquiry's Info Flow Proactively Serving Users in Groups
Before the Redesign
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
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%
Wireframes & Instructions of Shipping Progress Page
A/B Testing Requirement
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
After
Shortening The User Path
Before
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
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%↑
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.
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.
Order Cancellation Causes
Slides Shared with Engineers and BD Team
Return/Refund Causes Ranked
Phone Interviews Record
Payment Inquiry
Price difference, BC shipping channel restrictions, changing payment method, and exchange rate were the main causes of payment inquiries.
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.
MORE PROJECTS
