UX Design Challenge
Empowering the underserved audience for e-commerce
Fangxiao "Ricky" Yu
Overview
This is a 72-hour design challenge I got from Walmart. I researched Walmart's e-commerce website and mobile app. Then I found two opportunities that I can redesign to empower the underserved communities. I proceeded with the second idea and prototyped it.
1. Empower the visually impaired users by redesigning the voice search;
2. Empower the foreign-born users by adding an apparel size recommender (Jump to view it now).
Feb 6
Feb 7
Feb 8
Preliminary Research
Literature review
Identifying opportunities
Secondary Research & Synthesis
Interviews
Persona
Competitive audit
Prototyping
Ideation
Wireframes
Prototypes
Opportunity 1
Empower the visually impaired users by redesigning the voice search
Introduction
-
User group: people with visual impairment
-
According to the report for the 2016 National Health Interview Survey (NHIS), 18.3 million American adults between the ages of 18 and 64 and 7.3 million American adults 65 years and older report experiencing significant vision loss.
-
Unfortunately, people with visual impairment are usually excluded from shopping on most of the e-commerce websites due to the accessibility issues.
-
Walmart App's voice search feature presents the potential of incorporating the visually impaired users into the online shopping experience. There's an opportunity to expand the voice search feature and create an all new voice interaction interface to empower the visually impaired users with better user experience.
Research
1. Literature Review
The resources I read:
-
W3C Web Accessibility Fundamentals
-
WebAim's Section 508 Checklist
-
Several articles about why and how to improve web accessibility for e-commerce
-
ADA standards for accessible design
-
Research articles from Nielsen Norman Group
-
National Federation of the Blind v. Target Corp.
Major Takeaway
I learned most of the current e-commerce websites didn't do a good job in implementing accessible design (source). A lot of users with visual impairment are excluded from shopping on their websites. So, this is a good opportunity for Walmart to incorporate more customers and empower the vulnerable.
I also learned how people with visual impairment use the mobile device.
What I know about screen reader:
-
People with visual impairment use screen reader to view the contents on mobile phone;
-
Listening to a screen reader requires a significant amount of focus and significantly increases the user’s cognitive load;
-
Unlike visual web pages, screen readers also present information in strict sequential order. They can't skip contents.
2. Screen Reader Test
In order to identify how to improve Walmart's app, I ran a screen reader test on my phone. I used iPhone's Voiceover and tried to buy dog food on Walmart's mobile app. The video below shows how I ran the test. Generally, most of the UI elements are well implemented and properly labeled. So, they can be recognized by screen reader. But there are still some UI components that make users' searching experience tougher.
Users with voiceover can't skip the sponsored products
Users have to go through all of the categories in order to browse the list
Users have to go through all the way down to read the reviews
Quickly scrolling and scanning is harder
Then users need to go all the way to click "Add to Cart"
This carousel takes a very long time to go through
3. Analysis
To better identify users' pain points and gain points, I mapped out this experience with customer journey map.
Open Walmart
app
Look for search bar
Use voice search
Go through a list of search results
Find the dog food
Look for reviews
Read reviews
Add to cart
Relaxed when talking to search
Surprised to find a voice search feature
No feedback when the result is ready
Have to go through the list with screen reader again
Can't skip and easily filter the result list
Have to go through a long list of contents in order to get to the reviews
Sometimes get lost
Have to go from the bottom to the top in order to click "Add to Cart"
Already forgot where to add to cart
Based on the journey map, we can see users might feel frustrated when they have to use screen reader to go through a list of vertical contents (like search results and product details page) because the screen reader has to read in a strict sequential order. The users are not able to quickly scan and skip the information they don't like. It requires cognitive load for users to remember where each item is in case they need to go back.
But we figured out the most satisfying experience is the use of voice search.
But the problem here is the voice interaction is only available for the users to search but there are no follow-up feedback or interaction to present the search result in voice. When I was using the voice search, there aren't any audio cues to tell me my search results are ready. I thought I could continue to select items from the search results by voice. But later on, it turned out I had to use screen reader again to go through the search results. So, we can see a big decrease in the journey map between these two actions.
My design idea
What if we expand the voice search feature to design a shopping experience with voice interaction only?
-
The current page layout is designed for users who can see the screen. But it's not catered towards the users who use the screen reader. Screen reader is a just way for accommodation, but not a way for best user experience. I don't think redesign the layout can solve this problem.
-
Design follow-up voice interaction for the voice search. When users speak to search, the app should get the search results back to them in voice as well.
-
When the users want to view details of the product, the app can ask them which part they want to read. Then they can speak to jump to the information they want.
-
The whole experience will be like a conversation. There's no way to go through a long list of what they don't want any more.
4. Validation Plans
The things I concluded here are mostly based on the my literature review and screen reader test. I think at least, we should ask some real users with visual impairment to do the testing.
Meanwhile, in order to design the voice interface, we need to talk to the users to identify what information is the most important to them.
The information I need:
1. How real users with visual impairment perform the shopping task in Walmart's app;
2. How much information they want to hear for the search results;
3. What types of categories and filters would be helpful for the users with visual impairment to;
4. Their perception and conception of a product: what information of a product is important for them to make a decision;
5. What information they usually want to skip while shopping;
6. Their preferences on the language tone of the voice interface.
How would I recommend validating my hypothesis:
1. Rapid contextual inquiry: go to users' house and observe how they use Walmart's app. Ask them questions at the same time;
2. Survey: identify users' preferences on the information they need for shopping;
3. Interview with accessibility experts;
4. Usability testing and design iterations: after gathering enough information, we could prototype our idea and present to the users to gather feedback.
Opportunity 2
Empower the foreign-born users by adding an apparel size recommender
Introduction
-
User group: foreign-born nationals or new immigrants who live in the United States.
-
In 2017, there are 44.5 million foreign-born residents in the US. But not everyone can find what they want on a mainstream e-commerce website.
-
Due to the differences in cultural background and lifestyle, research has found foreign nationals or new immigrants in the US might have problems when shopping in the new environment. They need to put extra efforts in order to adapt themselves into the new lifestyle.
-
Based on my interviews, foreign-born users are usually not familiar with the size scale and measurement used in the US. This makes it harder for them to decide which to buy when they're shopping online. In this way, they tend to shop clothes in a brick-and-mortar store or buy products from their home countries instead of shopping on the mainstream e-commerce websites.
-
So, there's an opportunity for Walmart to add an apparel size recommender feature to help foreign-born users skip the tedious process of reading the size table and get the best size directly.
Research
1. Literature Review
This idea starts when I read several research papers about the food insecurity among immigrants and refugees. One essay, Cultural Dimensions of Food Insecurity among Immigrants and Refugees, mentioned how cultural differences play a part in increasing the difficulty of grocery shopping for foreign-born residents in the US. The articles pointed out that their previous traditions and patterns of food acquisition, preparation, and eating may be completely changed in the American context, so that some may not be able to provide safe and nutritious foods for themselves and their families.
I thought this might be a good point to identify the design opportunity. However, I figured out buying food online is not the most common scenario for e-commerce customers (and I'm not allowed to design for Walmart Grocery Pickup App). So, I decided to have interviews with foreign-born users to probe into their problems in shopping other stuff online.
2. Interviews
I conducted semi-structured interviews with 5 international students at Georgia Tech. They are from China or India. All of them have been in the states for no more than 2 years.
Interview protocol
-
I first asked them, "Except for food, what are the things you don't usually buy from a mainstream e-commerce website, like Amazon or Walmart.com?"
-
Then I further probed into the reasons why they don't buy those stuff from a mainstream e-commerce platform.
-
At last, I found the items from Walmart.com and asked them to read the product page. I let them talk about if the design of the product page is helpful for them to make a decision.
Here are the interview results:
Apparel
Major concerns:
-
Unfamiliar with clothing sizes in the US
-
Unfamiliar with the unit of measurement used in the US
-
Unfamiliar with the brands available in the American market
-
Not much information online to help them select the size
Their current solutions:
-
Go to the brick-and-mortar store and try clothes on in the fitting room
Opportunity for Walmart:
-
Trying the clothes on is tedious
-
Interviewees have habits buying clothes online in their native country
Beauty products
Major concerns:
-
Unfamiliar with the brands available in the American market
-
Not much information online to show if this product is suitable for their skin types
-
Have established loyalty to the brands available in their native countries
Their current solutions:
-
Buy products overseas from their native countries
Opportunity for Walmart:
-
Buying products overseas is very expensive and cost time
-
People are willing to try new brands if they see good outcomes from them
Cultural or religious item
Major concerns:
-
Usually not available online
Their current solutions:
-
Buy at the ethnic store
Opportunity for Walmart:
-
This is not a problem that can be solved by UX
Some notable quotes:
About buying apparels
"...But here (in the US), I can't even think about buying them (clothes) online. There is a sizing chart but I think that most of the times, I don't look at actual sizes and am more comfortable with 'S', 'M' or 'L' in India. Mapping those to sizes in America is that's why tough."
- an interviewee from India
About buying beauty products
"I usually use Japanese brands. So before I came here, I put lots of makeup, skincare products in the suitcase. I don't know what products they have here in the US. I'm so afraid that they might not be suitable for me. "
- an interviewee from China
About buying apparels
"In China, I always bought 'M' size. It was never wrong for me. But for here, everything has been changed. Even if I buy from the same brand, their size scale could be different. The 'M' size is too large for me sometimes. I don't know if I should still buy 'M' or directly choose the smallest one."
- an interviewee from China
3. Analysis on the Current Design
I asked my interviewees to view the contents on the product page of Walmart.com. We found several potential improvements we can make in the product page of the apparel products. Due to the time limitation, I'll only focus on improving foreign-born users' experience of apparel shopping in this design challenge. Here are some problems we identified:
Size guide is available on website
Users don't know which size to choose
Size chart is not available in mobile view
For some products, size chart is in the item detail page
But it's hard to read
All of the interviewees think this chart is difficult to read
If users have not used "inch" as their measurement before, they need to do some math in order to find the best size
Too long to read
No pictures to have a direct demonstration
The interviewees found this measuring guide very helpful
2 interviewees don't know what "Petite" means
Here're the insights I got from my overall research:
1. Foreign-born users might not be familiar with the units of measurement used in the US;
2. The size scale in the US might be different from the one in users' native country. It might become more complex. Users need to put extra efforts to in order to figure out the best size;
3. The size chart on Walmart.com might require unit conversion for foreign-born users, which might make them give up shopping there;
4. Users tend to look for pictures of the clothes in the review section;
5. People usually know their height and weight but have no idea of the size of their chest, waist and hip.
How might we help foreign-born users quickly find the most suitable apparel size online?
4. Idea and Validation Plans
I sketched out some ideas. And I think the best idea could be an apparel size recommender which can suggest the best size for the users.
My design idea
What if we add an apparel size recommender feature to help users quickly find the best size?
-
The new feature should allow the users to choose the units they use. It should do the conversion automatically.
-
The new feature should give users a smooth user experience instead of looking for the best one through a complex chart.
-
The new feature should document users' preferences and give users suggestion based on their shopping history.
The constraint of my research is the small sample size due to the time limitation. And my interviewees can only represent Asia-born students in the US. In order to further validate my hypothesis, there are some future research to conduct.
The information I need:
1. How users of other nationalities buy clothes in the US (for example, British people might be able to read the size chart);
2. What differences users might have in terms of buying different types of apparel (for example, jeans vs shoes);
3. What preferences users might have in terms of gender;
4. What other factors can contribute to their decision-making process.
How would I recommend validating my hypothesis:
1. Semi-structured interviews with a larger sample size of users;
2. Survey: identify users' shopping needs and common frustration when buying clothes online;
3. Usability testing and design iterations: after gathering enough information, we could prototype our idea and present to the users to gather feedback.
5. Design
Our users of this feature should cover both US-born users and foreign-born users. But due to time limitation, I only created a persona to better represent the special needs from the foreign-born users.
Meilin Huang
Nationality: Chinese
Gender: female
Age: 24
Occupation: international student in the US
Location: Atlanta, GA
Characteristic: strong shopping desire of apparels, low patience
Online shopping history: often shop clothes online in China but barely shop online in the states
Frustrations
-
She used to buy "M" size in China. It always fits her but now it is not the same case in the US any more
-
She can't go to brick-and-mortar stores too often due to the school pressure
-
She gets upset when she's selecting sizes of clothes online because she doesn't want to read the size chart
-
She uses centimeter so she needs to do math in order to read the size chart
-
She can't measure the size of her chest, waist and hip because she doesn't have a measurement around
-
She used to buy Asian brands so she is not very familiar with some apparel brands in the US
Needs
-
She wants to buy clothes online
-
She wants to find out the best size for her without trying them on
-
She wants to find the best size for her without measuring chest, waist and hip
-
She wants a better way for her to select the size instead of reading the size chart
Competitive audit
I referred to two existing apparel size recommenders to see how they approached this issue. One is Fit Assistant. The other one is Fit Predictor.
Fit Assistant
Fit Assistant will ask users about their height and weight. Then it will continue to ask users to select their body shape. After that, users can choose to input a brand they have purchased before. At last, it will give users a final recommendation showing the likelihood of fitness.
Pros:
-
It can give the most accurate recommendation;
-
It has great visual references when selecting body shape;
-
It has the unit conversion when users are inputting height and weight.
Cons:
-
The process is too long;
-
When asking to select a purchased brand, it doesn't consider size conversion between different countries.
Fit Predictor
Fit Predictor will just one question. It will ask the size of a similar designer that fits the users. Then it will recommend based on that.
Pros:
-
It's short and easy;
Cons:
-
Users might not have purchased those brands before;
-
It might not be accurate;
-
This design is not available in mobile view.
After reviewing these two design, I basically learned some strategies I can use to approach this issue. From a UX perspective, the process for Fit Assistant is too long though it gives users a more accurate result. And obviously, Fit predictor's approach is not suitable for every user. Especially for the user group that I'm designing for, they might not have used purchased any of the brands presented before.
But my design needs to serve a wide range of users, including both US-born and foreign-born users. It should demonstrate flexibility and give users choices. So, I start to think about two different scenarios (I used my persona to think about the scenes) and how I could integrate them together:
(1) Users know the size they wore in their home country. The app can use this data to match the new clothes size in the US.
Meilin finds a new sportswear brand she really likes online
Meilin knows her size of Adidas in Chinese measurement
Meilin uploads the size she wore in China
Meilin gets size recommendation
The system converts her size to the US measurement then it uses this size data to match the brand she's viewing
I figured out in some global brands, they have charts for measurement conversion across countries. So we can ask the user to upload the size they used to buy when they shopped those global brands in their native country. Then the system would convert their size into American measurement and use this size data to match the new brand the users are viewing. This is a very quick way to give them recommendation.
This feature can also help US-born users quickly find their size.
(2) Users can input their body data to get more accurate recommendation.
Meilin finds a new sportswear brand she really likes online
Meilin opens the recommender and changes the units of measurement to "CM/KG"
Meilin inputs her height and weight while she also describes the size of her waist and chest
The system estimates her body size based on the data and the description she gives
Meilin gets size recommendation
I also want to provide them with a more accurate way to get a recommendation. I'll provide some illustrations to help users describe their waist, chest, and hip if the measurement is not available. The system will estimate the size of their waist, chest, and hip based on their description and other data, like height, weight, and age.
Wireframes & Prototype
Now, I'll present my final design (Tools: Sketch, Invision). Feel free to play with my prototype below. Please click here if it doesn't work properly.
The new button to "Find Your Size" will appear under the size selection
It provides two ways to give users recommendation
Set up body profile
Match your purchase
Age is used to estimate users' body shape
Button is disabled until data is input
It provides units conversion
The question mark here can explain how the system make recommendations to the users
If users haven't purchased on Walmart.com before, it'll ask them to upload a purchase
It needs to provide some global brands that are available in other countries
Choose which country the measurement is used
It'll provide the size scale of the country users select
There are two ways to input users' chest size
They can either choose to describe their chest shape if they don't know the measurement or input the bust directly if they know
Radio button is used to show they only need to pick one
The first one is in default
A dynamic illustration is used to help users better describe themselves
The illustration would change when they change the slider
This is a guide to teach users how to measure their bust
This button will lead to the process of inputting body size data
The data will be saved for future recommendation
Users can directly buy it if they think it's a fit
Next time when users browse any similar apparels, the system will automatically give them a recommendation based their body size profile
Users can click it to edit their profile
This will become "Edit my body profile"
Users can click it to edit the data they have input
This is the page they'll see if they have purchase history on Walmart.com
Users can pick the best fit in their purchase records to use the size data of that one to match the clothes they're viewing
Limitations
-
This design focuses more on foreign-born users. But this should be a universal design. I try to make my design as universal as possible. But due to the time constraints. I couldn't do much research on US-born users. I need to further validation to make sure this can be also used by US-born users.
-
Even if for foreign-born users, my research can only represent Asia-born users. Further research is needed.
-
I can't think about Walmart's technical constraints and business constraints while designing because the information is not available.
-
I don't know Walmart's design system so my design might not be able to reflect Walmart's UX design styles.
Future plans
-
Make sure this feature can also be used by the US-born audience.
-
Run user testing with both US-born users and foreign-born users to identify usability problems.
-
Consult developers to learn about the technical constraints and improvement of my design. For example, I hope to know what kind of data model they're able to build.
-
Test if my design can give an accurate recommendation.
-
Consult product managers to learn about business constraints.
-
Consult the legal department about the data privacy issue.
-
Design iterations based on the feedback.
-
Learn the design system of Walmart and refine the design based on Walmart's UX patterns.
-
Run accessibility test of my design.
Thanks so much for reading my design challenge. I hope you enjoyed it! Please feel free to contact me and discuss it with me.