Garner
An all inclusive meal kit service
Platform | Web Application
Design Tools | Figma, Miro, Invision
​
Project Date | August 2021
My Role | Sole UX designer responsible for research, design, prototyping, and testing
Problem
Consumers benefit from meal kits since they need no planning, no trips to the store, and generally only a small amount of effort to prepare a home-cooked meal. Customers tend to cancel within a short period of time, despite the benefits, due to a lack of meal options, expenses, and accommodations for individual dietary concerns.
Solution
Garner is a low-cost service that gives users pre-portioned food ingredients and recipes that are tailored to their unique lifestyle and dietary needs.
Enjoy meal kits with Garner. Learn how it works
Know What's In Your Box
Are you unsure what to anticipate from your meal kit? Garner provides all of the details you'll need to prepare your meals, including where the ingredients came from.
Personalize Your Plan
Users can choose as many preferences as they desire, including those related to any dietary restrictions they may have. Garner uses these preferences to present the most relevant recipes first.
Filter Your Meal Options
Garner has a filter that lets users look through all of the recipes and personalize their cooking time, difficulty level, and even search for a specific ingredient.
Process
I adopted a modified version of IDEO’s human-centered design thinking process while creating Garner
Research
I made use of the many resources available to better understand the challenges users face when they want to find a meal kit that abides by their needs at a low cost. These insights would serve as the guiding principles of my user research efforts.
Competitive Analysis
While there are many meal kit providers, I discovered that there are currently few solutions that meet most or all of the customer's needs to be identified through secondary research. Garner has a window of opportunity to differentiate itself and disrupt the old paradigm, with meal kit services on the rise. In order to assess what would create a competitive premium offering in the meal kit service market, I looked at the closest competitors.
Understanding User Concerns
For a remote 1:1 interview, I sent out a screener survey to 5 individuals who've used a meal kit service. Secondary research helped me construct the research questions I wanted to answer through user interviews.
User Interviews
I conducted 5 remote 1:1 interviews with users who expressed through the screener survey their experience when they've used a meal kit service. By asking them open-ended questions I was able to identify opportunities to provide possible solutions for their needs and pain points. Here are a few choice highlights from those interviews.
Key Insights
Insights gathered from the user interviews were organized using an affinity map and then highlighted into different groups. These were the key high-level insights that informed my next steps.
The meals were too time consuming and didn't work well for their busy schedules
There's a large amount of waste in the packaging
Users found the information was difficult to find through the website
Users couldn't find meals that met their dietary needs
Personas
During user interviews, I found a link between a user's level of knowledge about the topic and the steps they took to find the best meal kit service for them. This discovery, combined with all of the previous research findings, lead me to distinguish two distinct user personas. The addition of a name and a face humanizes the characters, making them more relatable for empathy.
Ideate
User Stories
User stories were generated using the insights gained from research and ideation to address the needs and pain points of prospective Garner users. User stories were organized into 4 high-level stories called “activities” each of which would eventually manifest into key functions of the website. Each activity was broken down into mid-level “tasks” under which standard user stories would sit.
As a user...
User Flows
I began creating user flows for critical red routes that overlapped perfectly with the 4 previously identified user activities. These flows really helped us empathize with how people used the site, and aided in the storytelling aspect of our homepage, helping us to understand what information we needed to include and why.
Wireframes
Based on the gathered design inspirations, prepared user stories, and user flow, I started to create sketched wireframes on paper.
Wireframe Prototype
Mid-fidelity wireframes for each of the critical red routes were created and then mapped out. I then prototyped my mid-fidelity wireframes and conducted 5 informal moderated-usability tests to see if the experience met the user expectations.
Key Insights
Users were curious if they could choose multiple preferences or just choose one
Users liked the organization of the cards and found it very beneficial
Users were unsure if they could order ahead of time for another week rather then the current week​
Users liked seeing the detail of the meal and the ingredients that were provided
Design
Crafting The Brand
Crafting a brand for a product-centered around meal kit services posed its fair share of challenges. Informed by user research, I knew that I had to strike an approachability for users. The goal was to build user trust in the brand as an authority on the subject without overcomplicating it and putting off users.
What's In The Name?
GARNER
The word Garner means "gather or collect" and succinctly captures the ethos of the company. Everything about the brand redesign had to extend from this definition and express a more playful and youthful tone.
Logo
The logo is designed as a bowl with items falling to help it stand out amongst the sea of existing meal kit service brands. The logotype uses a clean and bold geometric shape with two colors that contrast from eachother so that the image of the food and bowl stands out equally.
Brand Platform
Color Palette
The primary layout of colors conveys trustworthiness through shades of orange and pink on off white background. Secondary colors were used for their vibrancy to grab the user's attention.
Typography
Garner's typography relies on modern clean-looking font families to convey simplicity and elegance. Poppins is a modern geometric font used in the logotype to give the brand an air of personality and approachability.
Font Families
Visual Design
To compete in a saturated market of meal kit services, Garner's visual design had to be distinct to stand out while still feeling familiar to users of other meal kit sites. This was especially true with the content layout in which the UI had to follow minimalist design trends that put content first while still maintaining a distinctive look and feel.
Sub-tab navigation is simple and consistent throughout the entire site
Cards are used to organize content into chunks to reduce cognitive load
Step by step instructions are shown on the home screen to show users how easy it is to join Garner
Hi-Fidelity Mockups
This is a collection of the finalized screens for critical flows. The process towards reaching these screens is shown in the subsequent section on user testing.
Prototype
A hi-fidelity prototype was created that took into account all the research, prior testing, and visual design work completed over the course of this process. Emphasis was on showing differences in flows with the filtering effect.
Usability Testing
I conducted 1 round of 1:1 remote moderated usability testing using the final prototype with 5 participants similar to the persona. These tests served to determine whether or not the proposed solutions created the intended user experience and to improve any shortcomings. The following changes were implemented from feedback from two rounds of usability testing.
Added a light gradient/ gray background on the home screen texts as well as the preferences page
Changed the color of selection on the filtered recipes page
Changed the pixel size of the text in shipping and payment pages
Reflection
One of the most important lessons learned, more so than in past projects, was how much design can influence a user's experience. Instead of paragraphs on Garner's site, I can do something as basic as condensing down instructions into short points and integrating images, which really improved the overall user experience and eliminated minor irritations that generate a terrible experience.
Next Steps
When I interviewed participants, I learnt a lot of surprising things and got insights that helped me understand the gaps and needs of consumers. I'd like to keep refining the user interactions and add more dietary selections if possible. Another component that might be added to this project is meal kits for people who follow a religious practice. Users who observe a faith, let's take Islam for example, can acquire daily meals that are quick and easy to prepare throughout the month of Ramadan. Another example would be for Yom Kippur-observant users to be able to order food for the holiday. Garner is on the right track, and he's looking for a method to improve even more.