CASE STUDY
FreshPlus Market
Fresh Plus is boutique grocery chain in Austin, Texas. They currently have three locations in the Austin area. They are known for carrying products made exclusively in Texas.
Project Overview
Fresh Plus created a simple website a few years ago. They listed a few products and some of the brands that were available to buy in store. However they realized they wanted to create a full ecommerce solution where clients could order their groceries online. I was responsible for building the ecommerce desktop version of the website.
Project Type: General Assembly UI/UX Design Immersive
Role: UX Researcher, UX/UI Designer
Tools Used: Figma, Maze
Timeline: 3 weeks
DISCOVERY/RESEARCH: COMPArATIVE/COmpetitve RESEARCH
Understanding the Grocery and Online Retail Space
To get a better understanding of the current state of online retail I did some comparative and competitive analysis. To get a better understanding of ecommerce solutions in the grocery space, my research included HEB.com a large chain of grocery stores in Texas and OmahaSteaks.com, a direct-to-consumer specialty meat distributor.
To get a better understanding of a major ecommerce store I did research on Fanatics.com, and $2.3 billion dollar player in the sports apparel and merchandise industry.
I did a feature inventory on all three sites looking at their information architecture, their product discovery process, and their checkout experience.
Key Takeways from the Grocery and Retailer Analysis
on one page
Minimal high level categories make product discovery easier
Sorting is fast, using categories or search, products can be found quickly
Search is a focal point, this is the top of all page designs
DISCOVERY/RESEARCH: INFORMATION ARCHITECTURE
Creating the Website Architecture
Complete Product List
- Beer
- Hard Cider
- Beer – IPA
- BBQ Sauce
- Salsa – Jar
- Granola Bar
- Energy Bar
- Beef Jerky
- Coffee Beans
- Coffee Grounds
- Gelato
- Ice Cream
- Kombucha
- Tortilla Chips
- Tea
- Honey
- Green Juice – Fresh
- Hummus
- Yogurt
- Hamburger
- Steak
- Pasta Sauce
- Tomato Paste
- Milk
- Chicken Tenders
- Almond Milk
- Vitamins
- Soap
- Coffee Creamer
- Collagen Supplement
- Hand Lotion
Refined Product Categories
Personal Care
DISCOVERY/RESEARCH: USER INTERVIEWS
Understanding The User
In order to learn about the state of grocery shopping online, I recruited 5 avid grocery shoppers for interviews.
I focused on asking users open-ended questions about their shopping experiences.
I asked about their experience with finding products, checking out, and navigating the site or app.
Interviewee’s used a variety of apps including Instacart, Whole Foods, and Kroger to order food. After user interviews I organized these findings in an affinity map, below are some of the insights.
Key Takeways from the User Interviews
Shopping for groceries online is a huge convenience
Our User Persona
Lindsey, 36
- Lindsey is 36, married and has 3 kids.
- Her life is extremely busy with kids and work. She likes to shop online in order to avoid shopping trips with screaming kids.
- She knows what she wants and does her shopping on a weekly basis.
- She buys all of her groceries this way and is shops online for the convenience.
Lindsey’s Goals and Frustrations
- I want to purchase groceries online to save time.
- I want to feel like the grocery shopping is easy to accomplish.
- I’m frustrated that I can’t save my list online.
- I’d like to pickup groceries without going inside with kids.
- Shopping is a necessity but not necessarily enjoyable.
- I’d like a way to save money when I can.
DISCOVERY/RESEARCH: USER PROBLEM
Defining Lindsey’s Problem
After getting a better understanding of our user Lindsey, I started thinking about defining her biggest problems. Based on the interview statements, I came up with this problem statement:
Lindsey needs an organized store website to find products easily, build a shopping list, and save money while shopping. In order to avoid the hassle of shopping with kids it would be nice to request a pickup option.
IDEATION: USER FLOW
Mapping Lindsey’s Shopping Journey
To envision how Lindsey might go from logging in to making a purchase I setup a user flow. Both directions of the flow end with a completed purchse. The main difference between the two flows are how products are discovered. In the first flow Lindsey can search for products and add them directly to her cart or list. In the secondary flow she can view her list and then add items from her list to her cart.
IDEATION
Sketches and Low Fidelity Wireframes
After getting a better understanding of our user Lindsey, I started thinking about defining her biggest problems. Based on the interview statements, I came up with this problem statement:
Lindsey needs an organized store website to find products easily, build a shopping list, and save money while shopping. It would be ideal to avoid multiple trips to the store in order to free up time to spend with loved ones.
Prototype and User Testing
Initial Prototype Testing
I recruited 5 participants not part of the user research to test the ease of use for search, category sorting, checkout, and using the shopping list feature.
The test was unmoderated and I used Maze.co. I wanted to discover how clear the categories were labeled. I wanted to see if users were could complete checkout with ease. I also wanted to see if users found the shopping list feature easy to use.
Key Takeways from the Prototype Test
PROTOTYPE AND USER TESTING
Iterations On the Prototype
After my initial testing, I realized that the user needs some clarity within the shopping list feature. In the shopping list feature you can add groceries to your list. You can also add previously purchased items to your list. I had setup access to the previously purchased items as a button, however I decided to move it to a tab for more clarity, and also move it to the top of the pop up screen.
IDEATION
Final Website Designs
The client had little to no existing brand. I chose a color palette based on images I saw from the clients social media. I wanted the the to appear clean and fresh. I used a minimal design and that showcases the products.
CONCLUSION and Reflections
What I Learned and Next Steps
What went well for me during this process was starting from scratch. I did not let the past website inform the new solution. I used all of my research to inform my decisions, while keeping the user interviews in mind throughout the process. I never jumped to conclusions, but let the design process play out.
The biggest struggle for me during this process was blending the user needs with the business needs. I spend a lot of time considering the user but had to keep coming back to the business goals.
I think the shopping list feature will really help the user, and I think this portion of the site could be refined. Due to time constraints I did not have time for a second round of user testing. I would do further testing if time allowed.