Buy Again Mobile Next-Gen
Help customers make an easy and informed repurchase decision.
Buy Again
Amazon Buy Again is a set of products that offer customers easy and quick ways to reorder past purchases. The Buy Again landing page was launched in September 2018 in 18 marketplaces across the world. The product family contributed nearly 3.2% of Amazon WW revenue each year.
My role
In earlier 2019, I was the design lead, and a solo designer on the team responsible for defining a vision for Buy Again experiences on mobile, aligning the design direction with the product roadmap, working with engineers to create a feasible path to launch the vision under urgent timeline and limited testing windows. Mainly worked with 1 PM, 2 SDMs, and 16 developers for this project.
The project lasted roughly for 6 months, and the project helped inform the product roadmap for 2020 and 2021.
What I did
• Product vision & strategy
• UI/UX and motion design
• Sprint facilitation
• Design explorations
• Data analysis
• Competitive analysis
• Usability study
• Executive presentations
• Testing plan
• Documenting patterns and best practices
• Collaborate with cross-function teams
Impact
15.2% annualized profit increase
Ran serval A/B testings on proposed CX. So far, all experiments added up to a 15.2% annualized profit increase.
91% task completion rate
Prototype phase 0 with 12 customers on Usertesting.com and repurchase task completion rate reached 91%.
The challenge
• Translate leadership requirements into CX concept
• Work with a tight timeline and limited testing windows in 2020
• Came up with a roadmap to achieve the Mobile Next-Gen
Aligning on goals
In earlier 2020, the product team, dev team, and design team took a CLT goal - We will launch at least 3 CX improvements on mobile in 2020 (Mobile accounts for 79% of BAX attributed order product sale)
What I need to do is to craft a product vision that can help inform the roadmap in 2020, 2021
How do customers reorder their items in 2019?
Customers can go to their orders, start a new search, or come to the Buy Again page to reorder.
The previous Buy Again page is a grid view where customers can reorder items within one page. Click on the item image will insert a new card underneath with more product information and alternatives attached to it. Click on the alternatives; the opened card will update itself.
Heuristic evaluation
In order to define what we want to improve, I organized a brainstorm session with the product team and the dev team together. We took a close look at the quantitive and qualitative data we collected so far and defined the opportunities for Buy Again Mobile Next-Gen.
40%
customers have 20+ items in their Buy Again
30%
customers go through the search order experience in Buy Again to find the items they want to reorder
50%
customers who open the card go straight to the detail page
45%
consumable items have size or flavor variations
Customer anecdote from the usability study
”I forgot what size I purchased last time and how much I paid. I need to see the product detail. I remember the product detail may have this information.”
Customer anecdote from the usability study
“I typically go to the product page because they have the deals and coupon info. The Tide pod always has promotions but I didn’t see it on this page.”
Opportunity 1 :
• A customer has to do a lot of scrolling in the grid view to find the product they want to purchase.
CX suggestions:
• Offer sort or filter function to help customers narrow down selection quickly.
Opportunity 2 :
• A customer has to do an extra click to view more product details, check out with a single item, and discover similar items.
• Most of the critical information is missing or being truncated in the default view.
CX suggestions:
• Update the visual layout to fit the critical information and enable the Buy now button in the default view.
Opportunity 3 :
• A customer needs to navigate to other pages to get reorder-related information such as the pack size and last purchase time and price etc.
• A customer can only change the variations through the product detail page.
CX suggestions:
• Bring top product attributes to Buy Again
• Enable customers to choose product variations without going to the detail page.
Opportunity 4 :
• A customer needs to dig to find product promotions.
CX suggestions:
• Bring promotion-related information to the Buy Again page.
• Enable customers to sort based on promotions.
Opportunity 5 :
• A customer will be confused to have two separate search experiences on one page and customers get confused by the search result being the order search results.
CX suggestions:
• Combine the universal search and Buy Again search to reduce vertical space and clear confusion.
Opportunity 6 :
• It is difficult to find alternative items when the product is “no buy box winner” or “no longer available”.
CX suggestions:
• Provide a high promising replacement when items are "out of stock" or "no longer available".
Opportunity 7 :
• The opened card view doesn’t provide a great comparison shopping experience when customers want to discover alternatives.
CX suggestions:
• Provide comparison shopping experiences with enough product information to enable customers to find the right replacements.
Design goals
Provide an easy, one-handed repurchase experience
• With one hand, customers can speedily process a list of products and make an informed purchase decision from the default view.
• Customers can choose other product variations and find the relevant reorder content and better value alternatives without navigating to other pages.
Bring the best value to customers
• Surface stock-up opportunities to customers so they don’t have to search for it themselves; price drops, cheaper but slower offers, deals, promotions, coupons, and other better value alternatives.
Explore the best layouts for Buy Again by prototyping different possiblities.
CX framework
Mini view
• Customers can speedily go through the entire list.
• Customers can build the basket with multi-selection, especially for grocery products.
Default view
• Customers can make an informed purchase decision.
• The card height is responsive and might save some vertical space when items are out of stock.
• The card can hold a swipe interaction model to reveal secondary interaction.
Maximum view
• Customer can discover reorder-related content and find alternative products from this immersive experience.
• The whole page view allows the customer to have a major concentrated experience and won’t be distracted by the default view.
Comparison view
• Customers can easily compare alternative products
• Customers can narrow the selections from all of the alternative items and only comparing the ones they want to.
UI framework
• Large item cards allow customers to make an informative repurchase decision at a glance.
• Enable Buy Now button on the default view to let the customer check out with a single item from Buy Again page.
Proposed option 1 - recommended
PROS:
• tap only; no need to educate customers
• all actions are glance-able
• purchase decisions can be made from the default view
CONS:
• only 1.25 items visible at a time
• facing out all actions may be visually overwhelming
Speedily process a list of items and narrow down selections
Adjust the twister and make a purchase from default view
Discover promotions
Reorder detail page and comparison shopping
Proposed option 2 - visualize what’s on PM’s mind
PROS:
• uses familiar (outside of Amazon) left/right swipe gesture scalable framework to add more than one secondary action
• add pinch & zoom interaction to switch layout easily
• swippable maximum view helps customers to get to the next item quickly
CONS:
• swipe and pinch & zoom gesture are not discoverable and will require additional UI to train customers
Proposed option 3
PROS:
• uses trigger link to get to a different mode
• adds a multi-select function for grocery shoppers
• maximum the usage of the bottom sheet and it is easy and fast to be implemented
CONS:
• the multi-select mode won’t be helpful for all customers like people who don’t shop for grocery items
• bottom sheet won’t cover the whole page, will still have limited space to showcase content
Convince all stakeholders
I shared the three design options with the product team and made a clear recommendation but also visualized what product team's vision. The product team was aligned that option 1 was the right direction but will revisit the other options in the future when we finish building up the foundation.
There was some feedback from the leadership around the usability of the new CX. Mainly the usability of the twister design. So I initiated a usability study to validate the design.
Validate the design through usability study
From the study results, I observed that customers have no problem finishing their repurchase goal through buy again next-gen. The task completion rate reached 91%.
• Customers have issues taping on the twister options to change the product variations. We need to enlarge the tap area to increase its usability.
• From the study, customers value past purchase prices over past purchase times and dates. We should consider prioritizing the past purchase price history.
Usability study with Usertesting.com
91%(n=12) task completion rate
“It was easy. I don’t need to buy from another page. It took me 6 seconds to finish the task.”
Usability study data tracking
Final touches
• From the study results, we observed that customers have no problem accessing the twister options and make a direct purchase from the default view.
• The only usability issue I defined is that the twister option is a little bit hard to tap. So I enlarge the font size and the tap target to make it easy to tap.
Make it real
After presenting my design explorations and recommendations to all stakeholders and cross-functional teams, I helped the dev team launch the Buy Again Next-Gen on mobile. There are a lot of back and forth moments that we need to sit together to figure out all the edge cases and came up with a feasible plan under the tech constrains and tight timeline. Kudos to the dev team for making it real.
The new design has driven a 15.2% annualized profit increase.
Few take-aways：
• Design sprint is a great way to gather thoughts and align on directions especially when everyone wants to be involved in the decision-making process.
• When there is a better solution than other's suggestions, make sure to visualized other people's thoughts and give clear reasons as to why there is a better solution.
• With a tight timeline and limited testing windows, make sure to focus on the most critical and clear problems to solve. The decisions need to be made based on existing data.