FreshKit

  • Client: FreshKit (A fictional company)
  • My role: UX Researcher/UX Design/UI Design
  • Industry: Meal-kit service, E-commerce
  • Tools used: Figma, InVision, Illustrator
  • Summary: Design a new website for a bespoke Meal-kit service

About the Project

FreshKit is a meal kit delivery service in the UK, they think that there is a gap in the market, since many consumers don’t want to commit to purchasing a certain number of meal kits every week for months at a time. They hope that by allowing users to visit their website and order specific kits in quantities that suit the customer and as and when they need them they’ll be able to create their own niche in the meal kit delivery space.

Empathise

User Interviews

I chose 4 people to interview for this project, I selected them based on people I know who enjoyed their food and I also found one person that I knew who had previously used a meal kit service. By interviewing these people I aimed to find out people’s food habits, how they deal with any food allergies, special diets and food preferences. 

From interviewing these people I found that: 

3/4 had issues figuring out what to eat and felt like they were stuck in a food rut

1/4 had a nut allergy in the household

3/4 had picky eaters in the household

UK Allergy and Diet Research

Most common food allergies: Milk, Egg, Nuts (Source: annabelkarmel.com)

2 in 100 children have a nut allergy

1 in 200 adults have a nut allergy (Source: patient.info)

10 people every year die from a food-induced allergy (Source: allergy-training.food.gov.uk)

No of vegans in UK

  • 2019: 600,00 (1.16%)
  • 2016: 276,000 (0.46%)
  • 2014: 150,000 (0.25%) (Source: vegansociety.com)

Define

Following my user interviews, I synthesised my findings and created two personas and a number of User stories.

Personas

User stories

As a user I need to be able to find meals that are quick and easy to prepare so that I can spend my evenings with my family

As a user with not much time on my hands, I need to be able to easily find new recipes that my family will like

As a user I want to know the shelf/fridge life of my meals so that I can plan my meals for the week

As a user I need to find meals within the allergies and dislikes of my household so that we can enjoy new meals together

As a user I want to know what goes into my food so that I can keep to my diet

From this I was able to come up with the following Customer needs:

Core Customer needs

  • Time to prep/cook meals
  • Shelf life of ingredients
  • Ingredients liked/disliked
  • Calories in meals
  • Allergens
  • Recommendations, based on meals already purchased

Ideate

Wireframes

Based on these customer needs and the available timescale I focused on creating wireframes and prototypes for the following pages in the site:

Now I had my wireframes and wanted to start thinking about testing, I created interactive prototypes using the exported screens in InVision.

Testing

I completed user testing on my initial prototypes with 5 people, 2 of whom I had interviewed earlier in the process, the others i selected again for their interest in food. I tasked my users with completing a number of tasks whilst talking me through their thoughts about the site and how they were progressing with the task.

4/5 people correctly figured out that the purpose of the site was to sell food

5/5 people could correctly add filters to find meals that would work for the scenario I gave them

User feedback

Good idea to have information that’s easy to read about the meals, like if it doesn’t contain nuts

Easy to see meals in certain price points and the filtering is logical

Like the use of the icons on the product page, makes it easy to understand at a glance

Cook time filter isn’t obvious that it’s prep time AND cook time

The ‘You might also like’ section feels like I’m being pushed to make more purchases

How many stars are the reviews out of, is 5 really good?

With the user testing and feedback in mind, I updated the prototype to address the issues that arose, the most important was that one user could figure out from the homepage that it was an e-commerce site. After I had completed this I re-tested the updated prototype to ensure that I had resolved the issues and hadn’t inadvertently introduced anything else.

Design updates

There were a number of comments and issues that came up during the testing process that necessitated updates to the design. Before I completed any updates I brainstormed mays to fix each issue then started the updates in the design. The main issues I fixed in this process were:

  • “Diet/Allergies filter: isn’t obvious what it contains till you open it”
  • “Not keen on the save button, understand the heart icon but not sure with the word save”

Final designs

Once I had addressed the issues and comments I worked on adding colour, fonts, and imagery to my designs. See designs below or interactive prototype.

Conclusion

This was the first project I have followed from start to finish and therefore I feel I have learned a lot particularly on timing and how much detail is needed at each stage of a design. I made my initial designs too perfect so when I had an amend to make wether it was a design idea or an update as a result of feedback or testing it took a long while to implement.

As this project was completed for a fictional client I can’t go back to anyone to see if they were happy with what I have completed for them, if they are getting sales etc. However, the users that I tested with were happy with what I had created, especially the user who had a nut allergy who find it difficult to eat out and find new recipes to try at home.