_PNG.png)
Demystifying the Asian supermarket shopping experience
Role
UI/UX Designer
Timeline
11 Months
Tools
Adobe XD
Miro
InVision
Problem
Shopping at Asian supermarkets presents challenges for most users. Users find it difficult to navigate in stores, face language barriers, and are unable to find the products they need without proper assistance.
I came up with a “How might we…” question to find a solution to the problem space. “How might we simplify and translate the shopping experience at an Asian supermarket for the user into an easier process?”
Solution
Pantry Panda is a digital solution designed to educate, assist, and make it convenient for users while shopping for Asian groceries. It’s a mobile app that solves the problem space by providing supportive tools, fostering a community driven environment, and informative topics about all products in Asian supermarkets all in one app.
Research
Secondary Research
Primary Research
I conducted secondary research to understand the problem space and the key highlights were:
-
Articles from news companies often discuss about different products and ingredients .
-
Users often would have to spend time researching through different sources of information to find the relevant source.
-
There are some great "how to" guides in case you may be stuck with no assistance.
Afterwards, to get real user data, I interviewed 6 users of the 29 survey respondents and key insights were:
-
“Once I get to an aisle the spices may be located in two different aisles and I spend a lot of time walking back and forth to find the right product in that section.”
-
“I don’t think I was aided in anyway…”
-
“H-mart would have to ask for certain products and they would be placed in a weird section.”
Competitive Research
I analyzed 3 of my competitors 99 Ranch, Weee!, and Fresh Go Go. All of them operated on mobile apps and they were graded on 3 criteria and graded out of a scale of 5. The metrics were visibility of system status (VSS), user control & freedom (UCF), and aesthetic & minimal design (AMD). Weee! was rated the best out of the 3 as their VSS score was 3/5, UCF 4/5, and AMD 4/5.
Based on the analysis, my solution is to combine both physical store and online shopping experience as a hybrid solution all in a mobile app. The solution includes supportive tools, information, and assistance users would use for both situations.
Analysis
Competitive Research
I mapped user's quotes, insights, and experiences to figure out user needs and frustrations based on the interviews.
Six user's worth of data was organized and key points were categorized into the each topic.
Personas
From the affinity & empathy map of User A and User B, I created my personas of Ray Richards and
Cindy Chu based off of the user data I have gathered to have a mental picture for my user-centered designs.
Two personas were created as there were two main groups of core users, the newbie and the pro.
Define and Ideate
Finding the solution to any problem requires questions first then ideate solutions to them. I came up with three questions along with three solutions to each user needs.
How might we....
-
Simplify and translate the shopping experience at an Asian supermarket for the user into an easier process?”
-
Utilize technology to create clearer signage and labels to make it easier for shoppers to find the right product they are searching for despite the language barrier?
-
Create an environment where customers can find the right tools and assistance to better aid them during their shopping experience?
By creating....
-
An app that allows supermarket / grocery store owners to list out where products can be found on which aisle or section of a store and the product contains the translated name of the product on a list with the ethnic name together.
-
A photo-scanning tool within the app to scan & translate labels and product signage. This feature is able to scan the barcode to provide product information in the user’s primary language.
-
An app feature that can call to attention to store staff to assist customers within a certain area of the supermarket.
User Flows
From the soultions, I laid out the informational architecture of the three most common tasks users face when shopping. The first task was a “how to guide” for new users. Second task was a scanner tool & map layout for finding products, and last task was a live assistance tool.
The blueprint to the madness, the entire information architecture of the user flows.
Design
Sketches
I sketched screens for each user flow and they were designed into a prototype on InVision to test it.
Rough sketches were mapped out with high detail to determine if the solution was viable.
Guerilla Testing and Revisions
I tested the sketches with four users via moderated sessions for 30 minutes each and my findings were:
Test results:
-
Ambiguous text and it confused some users.
-
Users weren’t familiar with non-standard icons
-
Some navigations lacked an additional screen to segue into a transition.
Edge Cases:
-
Incorrect item shown after scanner results.
-
Created a word limit on the post as well.
-
Added an “unavailable” screen when store staff are unavailable to assist.
I digitized the sketches to a medium fidelity level and made key revisions:
Two generations of mockups, the sketches were translated digitally to the next stage.
Validate
Style Guide & Branding
Without an identity to identify with the mobile app platform, users would be reluctant to use an app. “Pantry Panda” was chosen because of the repeating name, cultural link to the mission, and ties in to the mission.
The style guide was based on the brand attributes and welcoming sight of its UI Elements for ease of usage.
The principles behind the high fidelity mockups.
High Fidelity Mock Ups
I designed 3-4 screens from the low fidelity model first and audited the screens for any accessibility issues that users may encounter. It took 2-3 iterations before creating animations and visual notifications updates.
Initial mockups laid out the foundations for what is to come.
Prototype and Usability Testing
I conducted 2 usability test rounds where I moderated each session with 5 users each for 20 to 30 minutes. Key test insights were:
1st Round Highlights
Key test insights included unclear tip texts, checkout and add to cart CTA buttons both were the same color, and bottom navigation icon text was unclear in function.
Revisions included redesigning the on-boarding process and differentiating the CTA buttons for both checkout and add to cart.
2nd Round Highlights
Second round testing key findings included two tone on-boarding cards, enlarging key tool icons, and keeping dialog as text.
The Solution
After two rounds of usability tests with revisions we arrive to the final product that is Pantry Panda.
Try the interactive prototype below!
Reflection
Challenges and Takeaways
Over the course of Pantry Panda, I have learned to focus on users’ needs and rely on user research to build the best solution to the problem space. I really enjoyed the interview and testing sessions because your prototype will not always be what you imagined it to be. Being user focused helped familiarize myself to use many digital tools and methods to gather user research, understand user’s frustrations, ideate solutions, and finally trust the data to create the best solution to the user’s needs.
Being that I had a personal interest in the problem space it impassioned me to walk step by step with the user’s feedback to build Pantry Panda. Although digital tools were used to bring about Pantry Panda, simple methods such as sketching and paper prototypes really brought the core solution ideas to life. These experiences helped me focus more by empathizing and provided me with a human-centric design approach to ideating solutions.