“How do we redesign the world of online meal prep and planning to truly enhance the lives of foodies?”

Recipes are indirect and untimely to sift through. Meal kit services have high barriers to entry, limited options and often must be ordered in advance. The world of online meal prep, planning, and pickup needs to be democratized and reframed so as to excite and enhance the lives of every potential customer.

Role: UX/UI Designer

Scope: 16 weeks

Process: Competitive analysis, ideation, prototyping, testing, evaluation

Tools: Figma, Figjam, Photoshop, Usability Hub, Pen & Paper

The Problem

Today, online and in app, you can find many options for recipe discovery, meal ordering services, and even ingredient delivery - but there is no mobile app that holistically combines all of these features into one polished, user-centric, and highly modern solution…

Many people like the idea of meal kits but want better and more flexible recipe selection, the ability to purchase and receive their ingredients promptly, without having to plan and order ahead of time. The foodie community needs an app that provides for them a space to truly immerse themselves in the world of cooking and have fun with food.

This desire lead to the ideation and eventual creation of an app that allows for exploration of new recipes, ways to try food from multiple sources (aka chefs) and ways to automate their shopping and of course a quick easy to use recipe guide for each recipe.

Research

Competitive & SWOT Analyses

My client had a good idea of who their ideal user for this product was and had clearly defined desires. The challenge was taking these desires and combining them into one, holistic “foodie” app. To begin my ideation for Chefli, I ran multiple competitive analyses across recipe and food delivery based apps, gathering from each category weaknesses and strengths. When I conduct competitive analyses, I usually will screen shot these apps and upload them into Figjam where I utilize the notes feature and a color system to leave comments for myself (and my team when working with other designers) on likes, dislikes, pain points, etc. Narrowing down on observations from my competitive analyses, I then will condense my findings into easier to digest SWOT (Strengths, Weaknesses, Opportunities, Threats) Analyses.

As my goal with Chefli was to merge together the best loved features of various food apps, I divided these apps into 3 main categories: Grocery Delivery apps, Cook at Home apps (apps that provided users the ability to order deconstructed meals to be mailed to their homes), and Recipe Sourcing apps. Below are examples of the SWOT analyses I conducted for an app within each of these categories.

Findings:

One of the biggest takeaways I extracted from this research was that there is a gap in the market for a recipe sourcing/meal delivery product with a low barrier to entry. Time and time again I found myself frustrated by the requirement to input my personal and payment information before ever viewing the meals kits I was purchasing. The second biggest frustration I encountered was the lack of structure or organization around recipe sourcing. I.e. recipes are all over the web, but I rarely came across a recipe that I could truly customize for my needs (# of servings) or that I recognized the creator of. I saw in this the opportunity to embrace a more social media based approach to recipe sourcing- what if our favorite health influencers could post their recipes online in one place? Lastly, I didn’t want to wait around for my ingredients to arrive. I wanted to be able to virtually fill my cart with select ingredients and pick them up from my local store.

Exploration

Information Architecture & Site Maps

With these findings, the product began to take form in my mind. There were many features to be sorted out for this app and I needed to base it in solid information architecture. I began creating site maps for different features the app would host. I highly value creating a strong foundation for a product that is rooted in thoughtful and user-centric mapping. This provides a thorough “blueprint” to reference when wire framing, which helps a designer to avoid gaps in their UX flows, hence, advocating for the end user from the conception of building. Below are examples of this process.

Ideation

Wireframes

I began wireframes for Chefli with my sitemaps in mind. As a part of the onboarding experience, I wanted to both welcome the new user with beautiful visuals and gather insights into each individual foodie’s preferences. I did this through an optional quiz style flow that presented the foodie with questions aimed to dig deeper into their desires surrounding the features of the app.

I included the ability to “Skip” this onboarding process, as well as progress bars to give the foodie a clear idea of how far along in the onboarding flow they were. As a user-centric designer, I believe providing people with these options and insights builds a quite and steady rapport that enhances their first impressions and overall experiences.

As you can see from the wireframe images above, I also dove into the features of the app, including the more modern “millennial” integration of a scrollable social media style Explore and For You section. I really enjoyed this process, in particular playing with card sizes and UX copy. As I worked through this feature, I felt more and more sure that this would be revolutionary for foodie apps. The concept of following amateur and professional chefs who a foodie may recognize from other platforms such as Instagram, TikTok, or Youtube, will, I believe, bring Chefli into my clients’ ideal younger (millenial/gen z) demographic and help the app to stand apart from other more generic food apps.

Chefli’s target market is millennials and “gen z-ers” who, let’s face it, are addicted to their social media. Influencers are the new celebrities and play a daily role in many of these users lives. From fitness and fashion advice, to entertainment and political views - Chefli’s user checks into their favorite influencers profiles on a consistent basis. Such is the aim with Chefli. Chefli needs to accomplish all of the features and functions initially laid out by the client, but also have a social media aspect to it that is familiar and appeals to our target user. With this in mind, I designed Chefli with familiar interactions and visuals, inspired by apps like Instagram, Pinterest, and TikTok. Above are the high fidelity designs.

Usability Testing

Usability Test Results & Affinity Mapping

I then mocked up an interactive prototype using Figma. I conducted the first usability test moderated and in-person, using five helpful volunteers. As I ran the tests, I reframed from commenting beyond giving the task directives- though I was very pleased with their excitement towards the app's features.

Scenario: You've just opened the app and want to get a good  idea of what features the app offers then create your first chart and book a reading with an expert.

Task 1: Navigate through the onboarding process. Talk aloud about the experience, in particular the onboarding “quiz” and your emotions as you move through this.

Task 2: Navigate to the For You page and engage with the resources there. Comment on your likes and dislikes.

Task 3: Add groceries to your cart.

Following the usability test, I created affinity maps to organize the notes I had taken and feedback I’d received during the testing process. I rated the severity of the errors observed using Nielson’s Severity Rating Scale and logged these into a Google Sheet in order to prioritize needed iterations.

I then conducted a couple of preference tests using UsabilityHub.com. These tests were designed to test the card sizes and touch points for the app. The results from these tests were then integrated into the final high fidelity designs for Chefli.

Chefli moving forward…

Once Chefli goes live, I believe we will understand the true scope of what gaps Chefli fills in the market. Will the app be best used for automated grocery buying or simply as a great way to follow chefs and receive the best inspo for their next dish? From there, further iteration and refining of our product will be required. I look forward to this second round of design work with Chefli.