Looking for a Sweet Niche on the Market
My Role: UX Designer| Duration: 4 Weeks |
Year: 2020 |
Tools: Figma and Grammarly
As part of my Bootcamp with the Interaction Design Foundation, I’ve started a class project for a new meal kit delivery service to launch on the market.
Project brief
Meal kit services are a business that has gained a lot of attention in the food industry, especially in the USA, Canada, Australia and some European countries. They target consumers that don’t have time to plan and shop for groceries, but they still value the pleasure to cook a simple meal without sacrificing health or convenience.
Consumers choose meals of flavor that they prefer trough websites or apps where high-quality images picture foods. After the service delivers meal boxes, consumers have easy-to-follow recipes and all ingredients they need to cook it at their home.
So, it is a service in the middle between home-cooked meals and takeout.
To start this project, first, I take some notes. Information comes from:
- brief. As suggested in summary provided by Interaction Design Foundation to differentiate from other competitors instead of a business based on a subscription model the company would like to allow customers to order a specific box whenever they need them;
- trends in the industry to gain some insights. So I was able to know how competitors use filters and information in search and product pages.
- competitors, to understand how they position in the market;
- reviews. to extract key talking points from the last 200 reviews for the market leader;
- market research from trusted sources as Packaged Facts and Hexa Research.
Project constraints
FreshKit has a few considerations they’d like to take into account in the design, mostly related to searching and customizing before checkout:
- they would like users to be able to search and filter by Most Popular meals, as well as by Allergies and Vegan/Vegetarian;
- users should be able to choose how many of each item they want to order as well as how soon they want it delivered;
- finally, on the Product Detail page, they’d like for there to be a block on the page that recommends similar meals based on whatever meal they’ve selected.
Research findings
Analyzing trends in the industry gave me a lot of ideas about which filters use to search meal boxes and information to have in listings and detail pages. So, for example, in detail page, I’ve decided to add step-by-step instructions and nutrition facts. In Blue Apron, fancy pictures show ingredients from the above. That gave me the idea to add a bit of fun and take inspiration from the Tetris challenge.
Instead, market research and competitive analysis confirmed the project brief: subscription is the business model followed by other competitors, so to leave customers to decide when to receive meal boxes may find a niche in the market.
To collect information from users, I’ve discovered a honey pot in Trust Pilot as HelloFresh has tons of reviews. I’ve analyzed the last 200 reviews and scanned text trough Microsoft’s artificial intelligence tools: it recognizes language, sentiment, key phrases and entities. So I’ve applied the card sorting technique to organize information.
What comes out is that quality and service are the most important factors that people value in a meal kit service.
Personas and Customer journey map
During the research phase, I’ve gained a lot of understandings over customers’ pain points, expectations, goals and thoughts. These elements were useful in developing design artifacts.
First of all, I’ve designed in Figma two proto personas: let’s meet Laura and Dario.
Laura is my primary personas as she buys meal box 6–8 times in a month. To know better her and have in one snapshot all the information gathered, I designed a customer journey map.
Wireframe
The next stage of my process was a low fidelity prototype. It was super useful to give a rough direction to design.
In the end, this is what I accomplished as a mid-fidelity wireframe.
After many iterations, I’ve made a lot of improvements from the first sketch, what follows is just an example.
In the beginning, my idea was to have a filter menu in the middle of the home, as you may see on the first screen. From there, you may choose the kind of meals that you like and navigate to the results page.
But this a solution that doesn’t work. Here filters are a navigation menu, so it’s better to have always in the same position. That’s why it was moved in the header, easily accessible by tapping the brand name. To be sure that customers become confident with the user interface, the menu is open when the customer has access to the app.
End of the story?
Not at all! As I’ve discovered a fantastic plugin on Figma: Visual Eyes useful for usability analysis like heat maps and clarity predictions on user interfaces.
I’ve played a little bit with clarity predictions on the Cart page. As you may guess, red is something clutter. As rating is from 0 to 100, my first score was just 47! After a bit of work, I improved to 63, still something to work on.
Anyway comparing Cart page’s first and last version, I see improvements as:
- inclusions of more spaces;
- some UI elements have found his right place;
- other objects have become more significant;
- deletion of useless information.
Do you want to discuss more details on this case study?
