Insights + UX/UI to grow products on Amazon
Overview
This project is from the Purdue UX Experience Studio team and is industry-sponsored by Procter and Gamble (P&G). In this project, I collaborated with 6 fellow UX design students in order to deliver design insights and recommendations along with UI widgets within the Amazon mobile app.
Role
UX Designer
UI Designer
UX Researcher
Date
Aug’ 22 - Dec’ 21 (A Semester)
P&G, our sponsor, utilizes Amazon.com as one avenue to sell various products ranging from skincare to detergents online. Thus, they need a way to drive shopping frequency, increase discovery, eliminate pain points, and optimize automation tools like Subscribe & Save. The sponsor was hoping to extract ideas from the team.
The Problem
Amazon Prime shoppers who use Amazon’s mobile app to purchase P&G beauty products, particularly skincare and hair care.
Primary User Group
This portfolio will feature only 3 of the UI widget designs I carried out, out of the total of 7 designed as a team.
Final Solution
Float Menu Widget
Product Benefit Widget
Comparison Widget
Our sponsor also wants the team to prioritize quantity over quality, as she is hoping to extract ideas from our team. She is looking for many ideas in hopes of finding applicable widgets, rather than receiving one high-fidelity mockup. The more insights and widgets the team can deliver, the better. The team focused on three sub-behaviors which are investigated from research in order to show insights for all kinds of shoppers on Amazon.
How do I get there?
Process
This persona is supported by research. Read about the next section to view how this persona was built.
Who Is My Shopper? & Why Should I Care?
I had following four questions in order to gain an understanding of the eCommerce space, customer experience on the Amazon mobile app and general user behaviors while mobile shopping online for beauty products.
Milestone 01: Uncovering User Behaviors
01.
What Behaviors and Pain Points Exist in the Mobile Shopping Space?
02.
What Part of the Mobile Shopping Experience Should We Focus On?
04.
What Features of the Amazon Mobile App Do Shoppers Value?
03.
What Specific Behaviors and Pain Points Exist For Our Users?
01-01. What behaviors and pain points exist in the mobile shopping space?
In order to understand the online mobile shopping experience, current pain points, online consumer behaviors, and the customer journey at the surface level, I read scholarly articles & every day Online Sources (e.g. Buzzfeed and Bustle) and Amazon mobile app reviews at the App Store. I also conducted a cognitive walkthrough Amazon mobile app.
01-02. What part of the mobile shopping experience should we focus on?
In order to visualize the current experience using the data and knowledge I gained, I created an experience map of Amazon's mobile shopping experience. It helped me narrow to a specific part of the experience and generate research avenues in the areas the team lacked research.
After mapping out the holistic experience, I thought the team should focus our research on:
Looking for a suitable product to click on
Determining which product was the best fit stages of the experience as we moved forward with research.
The reason why I thought so is I believe it has the most opportunity for ideation in the future considering our product revolved around product discovery.
01-03. What specific behaviors and pain points exist for our users?
In order to gather more insights on behaviors and pain points when mobile shopping and selecting beauty products, user interviews are conducted.
As a team, it was conducted 7 user interviews (a mix of remote and in-person males and females, aged 19 - 25) with Amazon Prime users.
During the interview, three big topics are inquired:
Shopping habits/patterns when purchasing beauty products.
Decision thought process when purchasing beauty products.
Amazon mobile shopping experience (product page, result page, filter, subscription, etc).
01-04. What features of the Amazon mobile app do shoppers value?
The screenshot of preference testing activity
Mouse-hover it to view the result!
Preference testing is conducted in order to understand how shoppers viewed and felt about the Product Display Page's section hierarchy.
It was tested with the previous interviewees and talked about the features that they found value in and features they thought they never use. The given features are found on each product's page.
At the culmination of all the research, I and the team were able to discover multiple behaviors and pain points our shoppers faced when searching for hair and skincare on the Amazon mobile app. After referencing a template our sponsor gave the team and considering the overall project goals -- increase P&G beauty product purchases, increase product discovery, and reduce pain points on the Amazon mobile app -- the following three behaviors seemed to align best:
Takeaways
01.
Shoppers don't use Amazon to BROWSE for products. Shoppers have a product in mind when entering the app since they find products from other sources.
02.
Shoppers place a high value on product ingredients, benefits, and compatibility with their bodies.
03.
Shoppers do not use the comparison widget because of its perceived ineffectiveness and irrelevant values.
Milestone 02: Drawing Up and Testing Potential Solutions
Using the three narrowed behaviors, I began sketches and gathered feedback on early ideas. I ideated one widget per behavior with questions in mind:
01.
How might I eliminate pain points in shopping using the Amazon mobile app?
02.
How might I display hair and skincare product benefits, ingredients, and compatibility?
03.
How might I compare hair and skincare products in a relevant and accessible way?
02-01. How might I eliminate pain points in shopping using the Amazon mobile app?
In order to eliminate the pain points, making PDP (Product Details Page) helpful without scrolling fatigue was an essential action point. Thus, I sketched concept designs and created low- and mid-fidelity prototypes. Also, I received some feedback through concept testing.
Widget Design: Float Menu to Jump to Key
Through our various rounds of research, I found that scrolling fatigue was a huge pain point for shoppers. With the float menu, shoppers like Amelia will be able to select info, cart, product questions, and comparisons. The float menu helps the organization of that PDP page and helps shoppers like Amelia because she typically knows what she is shopping for and wants to purchase it quickly.
The Sketch of The First Widget Design
The Mid-Fi Prototype of The First Widget Design
“I like the float menu on the product display page because I hate scrolling through the app.”
— Testing Participant 1
Testing Feedback
“However, I want to know what the icons meant in relation to the product detail page section”
— Testing Participant 2
02-02. How might I display hair and skincare product benefits, ingredients, and compatibility?
In order to drive shopping frequency and to increase discovery, I thought it is important to provide informative ingredient information by prioritizing product benefits, ingredients, and compatibility to fit better into the behavior of discovery.
Current Amazon Ingredient Information Section
First of all, I observed what the current ingredient information section looks like via cognitive walkthrough.
Current ingredients information is not readable and is too complex for the average shopper.
Current ingredients information is not helpful; hard to know how it benefits shoppers.
Widget Design: Product Benefit Widget
First of all, I observed what the current ingredient information section looks like via cognitive walkthrough.
Current ingredients information is not readable and is too complex for the average shopper.
Current ingredients information is not helpful; hard to know how it benefits shoppers.
The Mid-Fi Prototype of The Second Widget Design
“Very useful. Like to know what goes into my skincare ingredients and what some ingredients do could benefit users.”
— Testing Participant 1
Testing Feedback
“Wouldn’t be able to know what ingredients to avoid.”
— Testing Participant 2
02-03. How might I compare hair and skin care products in a relevant and accessible way?
In order to effectively display products to be compared, I observed the current Amazon app and sketched concept designs. I also created low- and mid-fidelity prototypes and received some feedback through concept testing.
Current Amazon Comparison Section
First of all, I observed what the current comparison section looks like via cognitive walkthrough.
The current product (first product) is hidden when a shopper scrolls.
Categories for comparison are not chosen by a shopper.
The amount of information can be overwhelming, especially considering information on the rest of the PDP (Product Display Page).
Widget Design: Comparison Widget
When shoppers press the compare button, the product is added to a compare list, similar to a wishlist. Shoppers would be able to choose the categories they want to showcase during the comparison. In the final screen, the product of interest would be stable on the left side and the other products would be vertically scrollable on the right. Shoppers can drag an item of interest to replace the product on the left side as they continue to compare. This aimed to showcase relevant values and ensure the product of interest was at the focal point during the comparison.
The Mid-Fi Prototype of The Third Widget Design
“Love the idea of a static product on the left side.”
— Testing Participant 1
Testing Feedback
“Don’t want to be forced to choose specific comparison categories. I want to see basic information first such as price, size, and reviews.“
— Testing Participant 2
Milestone 03: Completion of Design Concepts
01.
Float Menu Widget
Along with the insights, I developed hi-fi prototypes and conducted one round of usability testing. Now I am providing three recommended design changes to address three behaviors I've investigated.
02.
Product Benefits Widgets
03.
Comparison Widgets
Design Rationales
Eliminate scrolling fatigue
Organize the PDP (products details page) to show relevant information
More useful for others that have a product in mind when using Amazon's mobile app.
Widget Design 01: Float Menu
Next Steps
Relocate/re-size float menus to enable users to use them with one hand.
Design Rationales
Clearly see the ingredients that will benefit shoppers’ hair or skin.
Can make a faster purchase decision when one of shoppers' valued features is displayed properly.
Widget Design 02: Product Benefits
** The List of Product Benefits are from Pantene Official Website
Next Steps
Find a way to draw attention to safe or beneficial ingredients in the ingredient list in order to benefit both P&G and users.
Design Rationales
Clearly keep the most desired product static on the screen.
Showcase the most desired information in a condensed, widget format.
Straight to the point: compare only selected items
Widget Design 03: Comparison
Next Steps
Need an affordance that enables shoppers to interact with the scrollable section and learn how it works.
Result
"Very useful. Like to know what goes into my skincare ingredients and what some ingredients do could benefit me."
—Testing Participant 1
Positive Usability Testing Result
"Knowing what ingredients for what purpose is very useful."
—Testing Participant 2
"It made me no need to scroll the endless page to get the information that I want."
—Testing Participant 3
Happy Sponsor & Team
Want To Check Out Other Projects?
Career Guidance Platform Design
A Virtual Fitting Experience for Inclusive Size
Future Transportation Service on Campus for Disabled Individuals
