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

Checkout is completed
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

To build out the architecture of the site, I took the existing product list and asked seven different people to organize the products listed on cards into high level categories. There was large agreement between participants so I settled on several high-level categories.

Complete Product List

  1. Beer
  2. Hard Cider
  3. Beer – IPA
  4. BBQ Sauce
  5. Salsa – Jar
  6. Granola Bar
  7. Energy Bar
  8. Beef Jerky
  9. Coffee Beans
  10. Coffee Grounds
  11. Gelato
  12. Ice Cream
  13. Kombucha
  14. Tortilla Chips
  15. Tea
  16. Honey
  17. Green Juice – Fresh
  18. Hummus
  19. Yogurt
  20. Hamburger
  21. Steak
  22. Pasta Sauce
  23. Tomato Paste
  24. Milk
  25. Chicken Tenders
  26. Almond Milk
  27. Vitamins
  28. Soap
  29. Coffee Creamer
  30. Collagen Supplement
  31. Hand Lotion

Refined Product Categories

Beverages
Snacks
Frozen Foods
Dairy
Health and
Personal Care
Sauces/Condiments
Meat

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

They like to use the store shopping cart much like a grocery list, adding things throughout the week
Completing grocery shopping makes them feel accomplished
Minimal trips to the store is a big time-saver

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

mockup
mockup2
mockup3

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.