Fresh Kit
UX & UI Design
(3 Month Case Study)
Overview
Fresh Kit is an upcoming on-demand meal kit subscription service that offers weekly shipments of recipes and groceries that allow users to make easy, tasty and affordable meals at home. The final deliverables for this project are a Hi-Fidelity Wireframe prototype the purchasing process for both the website and mobile app to be handed off to the engineer. An additional feature the required was to allow users to purchase meals in bulk which their competitors did not offer.
DISCOVERY
First Step
In order to process and better understand the meal kit industry, I needed to research the user base, competitors, and visual inspirations before I start building my wireframes. I applied the Double Diamond design model to help organize my thought process when learning more about the different variables that affect the problem and its possible solutions.
To start, I made a list of possible leads to start my research on.
Who are their market competitors?
Who is their target audience?
What would the purchasing process look like?
How valuable is bulk purchasing?
DEFINE
Market Analysis
I started broad by checking their current market competitors to find their strengths and weaknesses. What I discovered was:
Their market competitors did not have the option to order meal kits bulk.
The cost of meal kits is more cost effective than eating out other than fast food. While shopping for groceries is still the most economical, users still need to factor in the cost for transportation, time, and meal prep.
User Persona
With a clearer understanding of the current market and service, I set about finding and interviewing users have and don’t have a meal kit service.
Positive Experiences
The large diversify of meals is a huge appeal but can be overwhelming.
Fresh prepared ingredients delivered to home.
Pain Points
Users were confused by the pricing of the meals because it does not show the final cost until the payment page. For example, a meal will cost $9.99 but since it feeds two it is now doubled to $18.98.
Users were turned off when requested to input their payment and address before being able to view their meal library.
Purchase Processes
This was my initial design for the process of purchasing a meal. This flow was based off the competitors which all followed the same process.
DEVELOP
Visual Guidelines
I decided to go for a lighter visual feel when designing that represents fresh, healthy, and clean.
Lo-Fi Wireframes
I user tested the lo-fidelity wireframe using a combination of:
Internal critiques with my mentor for initial feedback
Real users for testing a full walkthrough of the website.
I find that making mockups too simple will not draw the best feedback from users, but on the other end, mockups overly polished doesn’t offer room for sharing ideas and encourages the user to solely look for flaws. I also ensured that copy was consistent and strong to maintain clear communication for the testers.
Results
After weeks of development and feedback there were some glaring problems users found when testing the purchasing process.
First time users for meal kits were uncomfortable having to input their shipping & payment information before seeing the meals list first. I understand that the company wanted this original process for their CRM program to automatically send promotional content even if they do not purchase. However, it lead to users just leaving the site and going elsewhere.
Users did not like that the minimum of each meal will feed two persons because it would actually double the price that was originally advertised leaving users confused and frustrated.
Navigation to previous pages and ability to have full control of modifying their cart were missing.
Hi-Fidelity Wireframes
What Changed?
With the user feedback I revised the wireframe to address the pain points from the lo-fi wireframes and purposed the following changes to a better user experience.
Reorganize the pages so users are able to view the site’s menu list first instead of requiring users to input personal information to proceed. This was a major gripe users had with other similar services. When presenting this solution I emphasized the importance of having more users complete an order than losing them before they even had a chance to see the products.
Added an Order Summary on each page so users are now fully aware of what the the final cost will be while shopping with instant updates. No longer will prices look different on the order confirm page.
Based on user best practices I add an intuitive feature for users to return and modify their orders anytime in the shopping and confirmation process.
DELIVERY
Summary
This case study helped me realize how important it is in having multiple pairs of eyes to comb through my work. Implementing UX best practices and empathizing with the users helped me figure out new ways to add the requested feature and present my solution for a better path.