ABC Market
UX/UI case study
User-Centered Approach
Goal: Take the approach of Empathizing with the user, Defining their needs, Ideating for possible solutions, Prototyping to validate ideas, and Testing in order to find out what works and what doesn’t.
Problem:
ABC Company wants to add value for their customers by finding a way to leverage their successful premium store model online.
For the purpose of this case study, it is to be assumed that the e-commerce grocery shopping feature is included in the digital platform, and that some user research has been performed by the client ABC Market.
Inherited Research:
From the inherited research performed by ABC Market, we learned that grocery shoppers primarily shop online in order to save time, and that they often like to shop for products they need that day. It is important to note that research was done primarily in Europe, where it is customary to shop on a more frequent basis for products since the commute to grocery stores if often done on foot.
Hypothesis:
We believe that retention of ABC Market customers will increase if online customers are able to obtain free deliveries and the opportunity to earn credit towards groceries with the peer-to-peer feature.
We also believe that revenue from online sales will increase if online customers and physical pickers have exposure to standards in produce selections with the ripeness feature.
Market Research:
We performed research on the local competitors in the market in order to understand the mind frame of the online users and define the baseline expectations they have when it comes to online grocery shopping.
We did a SWOT (Strength, Weaknesses, Opportunities, Threats) analysis and a feature analysis for the following competitors: Whole Foods, Trader Joe’s, Publix, Sedano’s, Winn-Dixie, Walmart, Fresh Market, Blue Apron, and Hello Fresh.
From the analyses, we were able to understand the expectation that same-day delivery and meals on-site are basic expectations of grocery stores with brick and mortar locations. In regards to pricing, customers were willing to pay premium pricing for higher quality imported products.
Independent User Research:
In order to better understand the pain points and habits of local customers, we performed guerrilla interviews in an affluent neighborhood in Miami, FL. We interviewed six Whole Foods shoppers while they were shopping for groceries. From the interviews we were able to understand that the users are often in a rush and do not enjoy making lines to shop at the grocery stores. They often schedule their grocery trips during times that traffic is not too heavy (this was a distinct response from the previously inherited research because in Miami the primary method of commute to grocery stores is by car). However, they do make multiple trips to the store in order to obtain fresh products, which was consistent with the previously inherited research.
Empathy Map/ User Persona:
As part of the guerrilla interviews, we performed inquiries on their habits around their shopping experience. We asked questions like:
When do you think about grocery shopping?
How often do you go grocery shopping?
What is the most inconvenient thing about grocery shopping?
What do you enjoy about grocery shopping?
When do you prefer to shop and why?
How much do you estimate you spend on groceries per month?
From the responses we were able to further understand that they enjoyed picking their own groceries because they knew best what kind of fresh produce they wanted to purchase, in the past when they have attempted to order fresh produce online, the orders have been incorrect and for that reason they preferred to pick up produce themselves. We were also able to understand that most people that were shopping at Whole Foods had some sort of special dietary need and were searching for special products that would fit their diets.
Which led us to creating the user profile of the primary target customer for ABC Market. White collar worker Cristina — The health-conscious go-getter.
Cristina represented the attributes most often seen in the customers that we found during the interviews performed: fit, with a busy schedule, and with a desire to remain health-conscious by using fresh products.
To further understand her needs as a consumer and the opportunities that exist to add value in her daily life, we performed a user journey.
User journey:
Her user journey was reflective of a day in the life of a banking executive with unpredictable fires to manage at work and less time to dedicate to grocery shopping. However, for her case, she enjoyed going to the store to pick groceries because she enjoyed cooking and was always looking forward to trying a new recipe. As such, whenever she had time to shop, she would take the time to pick the right ingredients to prepare her vegetarian meals.
We approached the ideation by coming up with how might we address the root of the problem questions. Next, we attempted to answer those questions. We also intentionally brainstormed bad ideas to then counter then with good ones (always with the consideration of what our competitors are currently doing in the industry).
I particularly enjoyed this exercise with my team mates because it allowed us the opportunity to run free with ideas. Due to how different our personalities were, we decided to take a democratic approach of selection to move forward by silently selecting “good ideas” and those with the most votes won.
MOSCOW method to MVP:
Once we had narrowed down our choices, we took the MOSCOW prioritization approach to determine which features we were going to focus on for our minimum viable product. We concluded that the most valuable feature would be to provide a community-based delivery method which matches ABC shoppers by dietary profiles to enable consumers the ease of obtaining fresh produce, accurate deliveries, store credit to save on groceries, and free deliveries. We also decided that establishing standards and guidelines was going to be critical for the success of the peer-to-peer feature. Since we knew we were going to need geolocation capabilities for this particular feature, we decided to design for mobile.
Low-Fi wireframes:
We began by sketching our designs on paper. Again, in order to take a democratic approach to design, my teammates and I performed crazy 8 designs for both features and silently voted for which ones we wanted to try out first.
From our democratic selections, we tested the usability of the navigation on five millennials. In order to test the navigation we asked all testers to perform two tasks: Purchase an avocado that is going to be ripe in two days, and deliver groceries to their neighbor.
From our original low fidelity screens, we noticed that all users got lost in identifying where the “neighbor’s” order was and to where it needed to be delivered. In our original draft we had presented this information through a map, similar to what you would find on Uber; however, the visual map was too confusing, which is why we redesigned the screen as listed content instead.
We also noticed that testers felt a little overwhelmed when they arrived at the ripeness feature screens because the screens presented too much written content. Based on the testers’ feedback, we also redesigned the screens to simplify them and focus entirely on the image and the horizontal slider that allowed the selection of ripeness.
Mid-Fi prototypes:
Based on the feedback received, we proceeded with our mid fidelity designs in Marvel. We were conscious that we needed to simplify the app and hence narrowed down the number of tasks the tester could perform per screen. We also noticed the importance of having on-boarding screens to acquaint the user to the new concept of neighbor delivery.With those concepts in mind, we went from having 20 low fi screens to 36 mid fi screens to test.
Hi-Fi prototypes:
Inspired by our moodboard, we proceeded with the design of the hi fidelity screens. Based on the desirability testing we performed on 16 individuals, our moodboard did represent the attributes we were going to use to describe the brand: friendly, organic, and community-centered.
As we continued our navigation testing on new users for the high fidelity screens we continued to struggle with the testers comprehending the “neighbor” feature when navigating the screens alone. But we did manage to successfully clarify to testers the ripeness feature and we received positive feedback that the image slider was clear.
We learned during our hi fidelity testing the importance of the information architecture for the navigation of the application. When we originally designed the on-boarding screens for the “neighbor” feature, we included the information as part of the community path instead of the shopping path (two distinct paths that were not intended to overlap). From our post-observation inquiries we learned that ALL testers would have been more likely to select the neighbor delivery method in the shopping path from the beginning had they understood the benefit of the feature prior to performing the “deliver to your neighbor” task.
Takeaways:
Although there was a very positive response by the millennials that participated in the testing of the peer-to-peer feature, we did not successfully manage to communicate the full benefits of the feature clearly to the testers that were using the screens alone. Therefore, in order to successfully deploy this novel concept we would have to go through multiple A/B testing revisions that capture the essence of all benefits, both for the user using the service and for the user contributing to the service, in a very succinct manner.
Knowing now the criticality of the on-boarding screens to introduce a new concept to users, we would also have to test the layout of the presentation further and perhaps incorporate additional navigation guidelines for the first time the user is in the process of performing a task.