Revamping the Delivery Mode on the Checkout Page for ShopeeFood
Leveraging the development of delivery mode features in ShopeeFood's largest markets, Indonesia and Vietnam, the design team integrated relevant resources to restructure the crucial checkout process, implementing A/B testing to validate the optimal balance between user experience and business objectives.
Mobile App design, May - Jul 2024
ShopeeFood buyer experience
Intro
Where we are
Indonesia (ID) launched the Priority Delivery and Pickup Service in 2024, while Vietnam (VN) does not offer either service but has supported the Schedule Order Service since 2020.
Priority Delivery is offered for buyers who would like to pay an extra fee for an exclusive delivery service. Schedule Delivery is provided for users to schedule their orders for upcoming dates
What we want
Features such as Priority Delivery and Schedule Delivery are expected to drive business profit growth. The ID and VN business teams aim to launch these features in Q4 2024.
Final Deliverables
We evaluated the circumstances and aligned with various teams. To meet the business objectives of different regions while being user-centered, we proposed A/B testing for the Checkout Page. This will address the low visibility of features, enhance the display of delivery information, and ensure design consistency. The A/B testing is set to begin in Jan 2025, and we will await the outcomes from our BI team.
How is the design planned, scheduled, and eventually implemented for A/B testing?
Starting with walking through the whole design process.
Design Pathway, Step by Step
01 Pre-design Exploration
Learning Status Quo
ID and VN have a significant inconsistency in features and design due to various historical reasons. The business teams across the two regions often adopt each other's features to drive business growth.
Features like Priority Delivery and Schedule Order are examples, and these two features are being planned in very close time frames in Q2 2024.
in which, we found
Aligning the goals of stakeholders
In order to better integrate resources, it is essential to engage in discussions with all relevant stakeholders. The design team takes on the role of facilitator in this process.
Since each team has different expectations and goals for project integration, the biggest challenge is to align all objectives and ensure that the revamp can proceed smoothly.
Understand how orders are processed
When buyers place an order, it is processed by different admin teams. Understanding the order processing flow helped me gain a general idea of the mechanisms behind Deliver Now Orders and Scheduled Orders.
02 Pre-design Analysis
Touchpoints Analysis
Outlining the Ordering Experience
The ordering flow is divided into three main stages: Before Ordering, Ordering, and After Ordering. The Ordering stage is the most significant, containing the most intensive touchpoints for buyers as they grasp concepts, process information, and make decisions regarding delivery features.
Mapping touchpoints with Delivery
Within the Ordering stage, mapping touchpoints related to delivery with the key pages buyers interact with in ShopeeFood, reveals that the Checkout Page is the most impactful for delivery features and should be the primary focus of the design.
Current Page Flow
There are 3 key pages in the current buyer’s ordering experience: the Store Page, the Checkout Page, and the Order Details Page. Each serves a different purpose. When users click ‘Checkout’ or ‘Place Order’ on the Store Page, they are directed to the Checkout Page.
Mapping Delivery Touchpoints
Mapping touchpoints and design considerations, along with the comparisons, helped me clarify the relationship between these two modes across different pages. I was able to identify key focus areas for this project. The Checkout Page has many touchpoints and is highly relevant to the delivery mode.
Data Insights
By analyzing data from the internal tracking platform Shopee TMS, we identified several important insights: The Checkout Page has a high conversion rate of over 80% in both countries; Priority Delivery has a higher click-through rate (CTR) than Standard Delivery; and Scheduled Delivery is not a commonly used feature in Vietnam.
03 Pre-design Defining
Checkout is the golden stage of all.
And it is the main focus of this revamp project.
User Pain Points on Checkout
By gathering user feedback from local visits by the product and design teams, pain points in the checkout process was identified.
Define Design Strategies for the Checkout Page
04 Design Proposal
Design Present in Checkout
Testing A: 3 flat options
Considering Priority, Standard, and Schedule Delivery as three flat options that differ only in arrival times, this is the most straightforward way for users to understand the concept while also meeting the goals of highlighting new features for ID buyers.
Final Key Flow - Testing A
Competitors applied the same approach
Leading food delivery providers have a similar design, typically presenting multiple delivery options with equal importance, despite having two types of flows before checkout. In type B flow, emphasizing all Delivery Modes at checkout is logical, as this is the most important decision to make on this page (buyers confirm their food in earlier steps). However, for type A flows like ours and Meituan, screen space hierarchy is crucial since food confirmation and Delivery Mode selection are on the same page.
But, is this the only design solution?
Scalable limits may be a concern
Inefficient screen space utilization
As mentioned by our buyers, the delivery option takes up too much space at the top, making it difficult for them to confirm their food before payment. The vertical arrangement of 3 options does not satisfy them. A horizontal scrolling option was rejected by the ID team since they want all modes visible on the first screen.
Saver Mode will make it even more complicated
As Saver Mode is coming very soon, having 4 options arranged vertically could easily lead to longer decision-making times due to the complicated information display and comparison.
Testing B is introduced
Given that scheduled orders average only 1.4k per day in Vietnam and contribute minimally to the business, making this feature prominent seems less significant.
Testing B: Dividing Delivery Mode into ‘Now’ & ‘Schedule’
Another interaction and information structure places Priority and Standard (and Saver) under the 'Deliver Now' mode, while 'Schedule Delivery' is positioned as the option for later delivery.
A button to switch between 'Deliver Now' and 'Schedule Delivery' is located on the right side. By default, buyers will see 'Deliver Now,' but they can switch to the other mode.
This design minimizes the emphasis on 'Schedule Delivery' based on VN's current performance and helps avoid exacerbating users' pain points regarding the visibility of food details on the first screen.
Final Key Flow - Testing B
Delivery Address Improvement
By gathering data on current user behaviors regarding delivery addresses, we were able to identify areas for improvement. We updated the delivery address UX for both tests.
05 Design Deliverables
Delivering the design for teams
The design was organized into a file ready for development, containing specifications for all the UI designs and edge case details. After the feature was deployed, I conducted multiple UI reviews with our front-end developer to ensure that the development was consistent with the final design.
Next Project
ShopeeFood Promo Event System