Amazon mobile widget concepts, documentation, user testing results
Team Lead / Co-lead
Aug. 2021 - Dec. 2021
~ 16-17 weeks
Online shopping has proven to be an increasingly effective and easy way to shop for everyday products, especially during the pandemic. My team was tasked to increase P&G beauty product purchases, increase product discovery, reduce pain points, and increase customer loyalty on the Amazon mobile app.
Amazon Prime mobile shoppers who use the mobile application to purchase P&G beauty products (skin and hair care).
Amelia uses Amazon Prime to buy beauty products online. She accesses Amazon through their mobile app on her phone where she can take advantage of the fast shipping and wide variety of beauty products.
Age: 19
Location: Pittsburgh, Pennsylvania
Avid social media user
When accessing the Amazon mobile app, she already knows what she is looking for, as in, she does not use Amazon to discover new products.
When finding new beauty products, she values gentle products (like sulfate-free for shampoos) because she wants products that will keep her hair and skin free from harsh chemicals.
Our team developed multiple widgets during our project's timeline. Our sponsor wanted many potential solutions in hopes of being able to pick pieces that she would want to see implemented in the future. Widgets were designed for the specific behaviors we found in research. These screens are our solutions for the behaviors that are listed below.
Designed to encourage and reward shoppers who discover and purchase new and more sustainable options
Shoppers can discover new products and get rewarded for being both Earth-friendly and open to new products.
Designed to allow shoppers to quickly filter down results compatible with them if enabled in the results
Shoppers take a hair and/or skin type quiz. They can filter down their results that are suitable for their hair and/or skin type to reduce scrolling fatigue and tailor the experience.
Designed to more effectively explain what ingredients exist in a product and what it does
Shoppers can quickly see what major ingredients are contained in a product and understand its purpose. Also enables shoppers to quickly deduce if a product is the right fit for their hair or skin type.
Three variations were designed for this behavior as our sponsor wanted to see different ways we could tackle this issue. I completed Version 1 on my own.
Designed to keep one key item visible and show more relevant comparison categories in a minimal way
Shoppers can add items of interest to a comparison list, like a wish list. When activating the comparison widget via the icon at the bottom, they can vertically scroll through their items while keeping one key item visible on the left.
Shoppers can drag an item from the right to replace it with the left. They can also change the categories for comparison.
Designed to keep multiple chosen items visible and show more relevant comparison categories in a larger screen + see recommended items
Shoppers can add items to their comparison list like in the first version. When activating the comparison screen, they are also given suggested products based on what products they have in their comparison list.
They can change the comparison categories like before.
Designed to allow shoppers to natively compare two items on one screen
Shoppers can add an item to their comparison list. They are prompted to select what comparison category they're interested in and will receive a recommended item based on those selected categories.
When starting the comparison, they can scroll through both product description/detail pages to help make their decision.
To understand the Amazon mobile shopping experience, behaviors, and pain points of our shoppers, our team set forth in conducting research using various UX methods. Our goal was to collect these insights to then scope down to three behaviors to design widgets.
We had a procedural approach where each method was informed by the previous one.
As a team, we completed:
Understand the online mobile shopping experience, current pain points, online consumer behaviors, and the customer journey at the surface level
Read scholarly articles + everyday online articles
Explored the Amazon mobile app and reviews on our own and noted key insights
Decision Factors
Brand recognition, reviews, social media marketing, Q&A, and user-generated content are important factors when comparing products online to make purchase decisions.
Fatigue and Insufficient Product Information
Users reported frustrations around scrolling fatigue and insufficient relevant product descriptions.
Cognitive Overload
On the contrary, there is a lot of cognitive overload on the PDP page due to the multitude of options, irrelevant filters, and irrelevant categories.
Information Search
Customers like Amelia spend the most time searching for information to see what product fits them best.
Comparison is difficult
Comparing products on mobile is difficult due to the small screen. There is a comparison widget on the Amazon mobile app, but the values they compare are irrelevant to the shopper’s needs.
Customer Loyalty
A positive shopping experience warrants customers to make repeat purchases. Positive could mean quick, easy, and informative.
High Interactivity
High interactivity is credited with a desire to return to that online store and increase their use time. Amelia would want to return to the app if there was a lot to do but was well-balanced.
Visualize the current experience using our readings and experience
Narrow to a specific part of the experience
Generate research avenues in the areas we lack research
Using an experience map, map out the experience using our insights from the readings and any assumptions we may have.
Note down areas of assumptions and confusion.
Discussed where widgets can be most impactful for decision making
The biggest insight from doing this activity was our finding that we should focus on the "looking" and "deciding" stages of the experience as we moved forward with research. I encouraged doing this experience map workshop for the younger students on my team to take a step back from the research to see it from a high level and reflect on what we had thus far. After reflecting, we believed we would have the most impact designing widgets during these stages of the experience.
From doing the experience map, I learned our team needed to dig deeper into the pain points during these two sections.
Gather more insights on behaviors and pain points when mobile shopping and selecting beauty products
Conducted 7 user interviews (mix of remote and in-person males and females, aged 19 - 25) with Amazon Prime users.
Shoppers don't use Amazon to browse for products
Shoppers use outside sources to learn about a product and decide if they want it or not. They will use social media, Youtube, and articles to discover products, to name a few sources.
"Amazon is just a tool to get a product quickly.' - Interviewee
Reviews can heavily influence purchase decisions
Female interviewees reported relying on social factors to make a purchase decision. The ability to hear from real people around the world assists with decision-making.
Filters aren't used much, if at all
Filters are not used because they tend to show irrelevant values or are too cumbersome to use. Additionally, it can feel like it could hide potential products.
Subscribe and Save isn't used or interacted with because it requires commitment and uncertainty
Subscribe and Save requires shoppers to guess when they think they will need a product. Shoppers find it easier to just reorder things when needed, not rely on a scheduled delivery and credit charge, which can be forgotten.
Advertisements are not trusted nor interacted with
When seeing advertisements on the mobile app, shoppers reported distrust; they would rather get advertised to by content creators than the actual brand.
With the additional collection of behaviors gathered from interviews, the team wanted to learn more about the perceptions of the Product Display Page on the mobile app. We wanted to hear if there was a specific section we could "widgetize" to help them with their shopping.
Understand how shoppers viewed and felt about the Product Display Page's section hierarchy
Started as card sorting, but morphed into preference sorting.
Tested with our previous interviewees and they talked about the features that they found value in and features they thought they never use.
This was a very, very, very ugly process. The intention was to do card sorting and understand if the hierarchy on the Product Display Page was as usable, but our testers morphed it into something more useful. We provided them with the sections we found on each page and they talked us through how they felt and used those sections.
We found some expected behaviors like our testers explaining price is the most important thing for them to consider. However, most of them all reported the same thing when talking about what they specifically look for when buying products:
They reiterated the comparison widget within the app isn't useful because the first item (typically the desired item) is hidden as they horizontally scrolled. It is a part of the Product Display page they scroll past every single time.
After collecting a number of behaviors, it was time to narrow to 3 specific behaviors our shoppers faced when shopping for hair and skincare on the Amazon mobile app. After referencing a template our sponsor gave us and considering we needed to design widgets that would increase P&G beauty product purchases, increase product discovery, reduce pain points, and increase customer loyalty on the Amazon mobile app, the following three behaviors seemed to align best:
Using the narrowed behaviors, begin narrowed sketches and gather feedback on early ideas
Sketches concepts with parallel concept testing
Dedicated usability test as done at the end, but usability issues were address after each iteration leading up to final test
Since the team had three behaviors to design and only ~5 weeks left to sketch, test, and deliver these widgets, I split the team in half to tackle these behaviors concurrently. I was on the comparison widget team, tackling the issue of how shoppers ignore that widget entirely.
Although I was on the comparison team, I managed all facets to ensure we were moving at an appropriate pace.
In the comparison team, we individually sketched out what the new comparison widget could look like along with the new interactions. However, we ran into a problem...
It was really difficult to show the moving pieces and interactions we were sketching; we were also getting even more lost when each person would explain their vision. So, we huddled together and collaboratively sketched on a whiteboard. This helped our understanding tremendously as we were discussing each step together.
After we finished sketching together, I determined we should move into wireframes or, at most, low fidelity mockups, as we already agreed sketching moving pieces was not helpful. I encouraged both teams to use Whimsical as our tool of choice to limit ourselves to lower fidelity work.
I am only elaborating on my own approach to address the comparison widget as this version was completely my own.
Ensure all concepts have a fluid and usable experience (testing interactions)
Prototype was at high fidelity; we aimed to conduct a final, focused usability test to ensure our prototypes were functioning in the way we desired. These prototype mockups were tested with the same testers and interviewees in previous sections.
I told each team they needed to test their high fidelity prototypes for usability issues now that we had functional interactions (as seen in the Final Widgets section). I chose to showcase only my testing results as I had the most impact in this area. Since the semester was ending, I came up with a list of suggested design changes for our sponsor if she chose to move forward with my concept.
I was extremely proud of this project. This was the strongest project I've completed and I even led it. Our sponsor at P&G enjoyed our process and work so much that she requested the next semester's team to follow our documentation and design process. I was able to finally try a tidbit of visual design and interaction design in Figma and I was thrilled to finally have the opportunity.
This project allowed me to try new methods I hadn't tried before. Not everything worked out perfectly, but I learned so much from them. I aspired to have another project like this one as my leadership, management, and design skills skyrocketed this semester. my design competency and confidence also grew and I am excited to try my hand at new things.
Icons made by juicy_fish and Freepik from www.flaticon.com