Product Design | Longo's : Grocery Gateway - Enhancing Customer Experience
Tools
Sketch, Adobe Xd, Photoshop
/ Tobii Eye Tracker
my Role
UX Research
Assisted user interview, analyzed key insights, generated solutions, created user persona & journey map
UI Design
Highly contributed to wireframing and all the visual and graphic design parts in the process
Project Length
12 weeks
Collaboration
Grocery Gateway UX Team at Longo’s
OVERVIEW
Grocery Gateway is the largest online grocery market of Canada, owned by Longo’s. It opened in 1997 and acquired to Grocery Gateway in 2004. Our team collaborated with the UX team at Longo’s and the main purpose of this project is to understand how users are using the function of My Favourites and find ways to improve their shopping experience while exposing them to My Favourites and also the application as well.
PROBLEM SPACE
“ How might we reimagine ‘My Favourites’ in a way that allows user to shop in an efficient manor while exposing them to new products and moments of inspiration leading to increase incremental sales and increase brand loyalty? ”
- Grocery Gateway -
PROCESS & METHODS
User Research
Unerstanding users
1:1 User Interview
Our team focused on qualitative research by conducting the user interview to deeply comprehend our users. The participant was asked about her shopping experience with ‘My Favourites’ and also asked to complete several tasks so we can observe the participant.
PARTICIPANT QUOTES
“I don’t shop My Favourites on mobile since such a big list to get to and I can’t organize it myself.”
“I don’t feel inspired at all.”
“I don’t know if it is possible but I would like to be able to delete things from my favorites.”
“When it comes lobster season again I would like to buy [lobster sliders] again. But I only bought it twice and the sliders are two pages down in My Favorites, so I'm afraid it’s gonna fall off.”
TASK EVALUATION FORM 1.
These are our task evaluation forms to see how users are using the product. We used this form to analyze how the user did while she was doing the tasks given to her. The green dot means the steps that our participant did well and was independent without any frustrations, and the yellow means that there is a small issue but not serious, so it can be improved. There are a few yellow but almost all of the dots are green. Our participant went through the smooth progress while she was doing the tasks.
KEY INSIGHTS
Likes the mobile experience because of its’ convenience.
Only uses desktop to browse My Favourites.
Mobile experience is convenient, but desktop is a lot easier to use.
Mostly uses the desktop experience when user has time, or plans to host a get-together with friends and family.Has regular grocery shopping patterns
Add items into cart whenever items run out in the kitchen.
Usually completes order at the end of the week and has order delivered for Saturday morning.
Hopes My Favourites can be organized, structured and edited by the user
Afraid that some items on My Favourites will fall off/disappear.
Considers and cares about the fresh quality of ingredients.
Wants to save time for going grocery shopping.
Interested in ‘On sale’ items and uses ‘On sale’ filter.
Uses My Favourites to pick the items that the user tends to buy most frequently.
Looks around the most recent and previous order when starting their shopping cart.
Our Users are Shopping like Clockwork!
Following the initial market research and interviews, our team was tasked to conduct additional research to generate insights to improve the overall experience of the My Favourites feature and find ways to spark inspiration to our users when shopping for groceries.
Through our research, we uncovered that many of our participants were creatures of habit where they would follow a certain shopping routine that they were comfortable with and which met their needs.
The users have founded a way to shop in a manner that suits their needs, so they are able to shop smoothly without any problem and have formed shopping habits from experience. This is good, it shows that users have found a shopping system that works for them but one of the problems is that our user shopping habits might narrow their shopping options or refrain them from finding new items to purchase.
So, our major challenge is how can we inspire them to purchase items they didn’t expect to buy in the first place.
LABELING
After the user interview, we extracted the significant contents from the recording. Then, we used the labels and organized the contents to create the affinity diagram. Top 8 labels are Interactions with others, Goals and needs, Frustrations, Behaviours and motivations, Frequency, Priority, and Skills.
AFFINITY DIAGRAM
user PERSONA
In order to better understand Grocery Gateway app users, our team created a user persona for My Favourites users based on our findings and given user information. The user persona was created to reach and fulfill the user needs and goals and helped us maintain focus on users.
USER JOURNEY MAP
The user journey map was created to gain a deep understanding of user's experience when interacting with the ‘My Favourites’ feature. By mapping out this user journey, we could empathize with the users, uncover insights into their behaviours, needs, and motivations, and ultimately designed better experiences that meet and exceed user expectations. This process helped in aligning business goals with user needs, improving customer satisfaction, and driving overall project success.
Key Solution & Visualizing
Ideas for improvement
Improve the interface based on the existing configuration
(e.g. Show 4 items in a mobile screen)Add the brief explanation about what is My Favourites.
Inform users how many items are stored on the My Favourites out of 100
(e.g. There are 60/100 items on your My Favourites)Show all items for basic and get users to switch it to ‘In-stock’
Show the most purchased items on top in order and inform users how many times the item has been ordered
Recommend other items to alternate which are out of stock
Help users to get inspired. Provide recommendation like
‘Someone who bought this item also bought this too.’Remove ‘New items’ on My Favourites and place advertisements on top instead of credit-earn
WIREFRAMEs
We created wireframes based on the existing configuration of My Favourites and followed the ideas that we identified from the user research. As we should keep and preserve the existing mobile interface of Grocery Gateway app as much as we can, we designed the wireframes to illustrate the key points that we built.
PROTOTYPEs
Based on our findings and ideas for improving the 'My Favorites' feature, we created new prototypes using the existing pattern libraries. We updated some important interface designs to facilitate easier browsing and reduce unnecessary time-spent on the mobile app, ultimately aiming to enhance user satisfaction.
Added the brief description about ‘My Favourites’ and put advertisings on top
Displayed 4 items in one screen
Made a searching bar and keypad for My Favourites
Added ‘Price Low to High’ and ‘Price High to Low’ on Sort By
Showed an alternative one for out of stock items
Redesigned and edited the order of categories : Show All, In-stock, and On-sale
Informed users how many items are stored in My Favourites
Showed other on-sale items below
Iteration
Earning Feedbak
User Test
To test and validate our redesigned prototype, we conducted the usability testing at the usability lab at Humber College. The participant was asked to complete several tasks.
You just ran out of avocados, and you need to have your daily dose of avocado toast. In your My Favourites, please use the search function to look for avocados and add it to your cart.
Pretend you are a student on a tight budget and you want to view your items in your My Favourites from low to high pricing. How would you go about doing that?
Mobile
As your scrolling in your My Favourites, I want to imagine that you’ve just noticed that your favourite body wash, “Dove Body Wash Shea Butter” is out of stock, and now you need to find a replacement. How would you go about doing that?Desktop
Please go the Fruits section on the website, and browse the page. Please tell me: “What do you like about this page?” and “What do you dislike about this page?”. Please answer in detail as much as possible.
TASK EVALUATION FORM 2.
Overall, the process is smooth and the user loved the updated interface of ‘My Favourites’. The worth to know here is that the participant was not satisfied with the recommendation of alternative items of out of stock. She hesitated to follow the structure of our popup design and also thought it gave too much suggestion. Also, we asked the user to go to the fruit page and browse it, and then tell us about what you like and dislike for the third task of the website test. We made the third one differently from the mobile test since the user said she shops with ‘My Favourites’ only on the desktop. Our team changed a bit about the design of the interface, and wanted to see how the user is using the new one.
TOP User INSIGHTS
Liked how the items are displayed on the mobile. Able to scan through more items at a time.
Some food suggestions at the bottom did not make sense to her like for fruits. The cheese or milk did not fit with the fruits.
Did not find it obvious that the out of stock item would have alternative suggestions available for her.
Wanted to see better categorization in her My Favourites. Sections basically like Fruits, Vegetables, Dairy, Meats, etc.
The search function of the mobile version was quite confusing for the user. There were two search bars and it did not seem obvious to the user which one was the My Favourites search bar.
The sentence "You currently have 21 out of 100 items in your My Favourites" was a bit confusing with "Showing 8 out of 21 items".
The sentence also made the interface looks crowded and messy between the search bar and the filter.
Did not find any use for the "In Stock" option, would rather see "What's New" option.
Final Design
FINAL PROTOTYPE
Our team created the final prototype based on all the research and the ideas and results of user tests. Explore our final prototype!
Reflection
It was a great chance to conduct the actual user interview and user testing. Through the user interview with the user, we figured out lots of good findings to progress the project. When we conducted the usability testing, we developed the first prototype based on the user research and interview. The participant did not like some of the changed function, and she said she preferred the old one more. Our team conducted only one user for the interview and also one for the usability test. I hope we will have various users of different ages and occupations to have more diverse results for the next time.