Easy Eats is a new company committed to answering the age old question, “What’s for dinner?” They want help in designing their mobile app. They want it to be an all encompassing app for anything a user would need to eat at home. With the recent lockdowns due to COVID-19, people are staying at home more. Staying at home means eating at home, and users want to be more thoughtful about planning and eating easy, healthy meals.
Easy Eats wants to allow users to search, store and organize and even upload their own recipes as well as schedule selected recipes into a meal plan. From the meal plan, shoppings lists are automatically created. Prior to shopping, users can edit the list, delete items they already have and add items they need.
I designed an app with three main sections: recipes, meal plan, and groceries to satisfy Easy Eats' business goals. Users can pick and choose features that meet their specific needs.
I completed this project for DesignLab's UX Academy. Easy Eats is a fictional meal planning app.
The idea to create a meal planning and grocery shopping app came from my own frustrations with the process. For me, deciding what to make for dinner a week ahead of time and shopping for needed ingredients has become a chore I detest. A benefit design students are afforded is the ability to create solutions from our own problem space. In an effort to follow the design process, I needed to know how others accomplish these tasks and if this app would benefit users other than myself. If my assumptions are correct, people value their time and money and would find an app who helps them save both worthwhile.
It was important to get a variety of feedback, both quantitative and qualitative. To do that, I used the following methodologies:
Find other meal planning and recipe storing apps. What do they offer? How user friendly are they? What are their strengths and weaknesses?
I conducted interviews to gain a better understanding of what a potential user currently does to plan, shop, and eat meals. My goal was to gain insight to any frustrations they have with their current process and design solutions to address these frustrations.
I developed survey questions using Maze, then posted it on Slack and Reddit. The more data I could gather about potential users, the better I could understand the problem space.
From speaking with participants in the interview, I created a persona, Isabella Owens, who would represent the interviewees as well as create empathy.
A sitemap was created as a guide. I identified the three main features of the app; recipes, meal planning, and the grocery list. Some or all of the features would meet each users’ various needs.
The design for Easy Eats began with hand-drawn wireframes before transitioning to Sketch. In the sketches, I explored different layouts for the main screens. Once I decided on the bottom navigation and the three main features of the app, I designed screens in Sketch that would take users through the flow of accomplishing tasks related to that main feature.
The logo and the branding was created with the words fresh, clean, and simple in mind. The utensils communicate eating, the leaf-like logo communicates fresh, and the overall design is simple which is synonymous with easy. The color palette speaks to the sections of a grocery store; produce is green, protein is red, and other items are teal. The green color also symbolizes fresh and healthy. A UI kit further defined the brand complete with design patterns. Finally, I created hi-fidelity designs.
I conducted both moderated and unmoderated usability tests. Eight participants completed the unmoderated test using Maze. Four participants completed usability testing using InVision while I observed on Zoom or in person. I asked them to complete five tasks using the prototype.
You just added the Easy Eats app to your phone after making a New Years resolution to eat healthier and cook at home more. After getting signed up, you see two of the recipes in the database that look good. Select those meals to create a meal plan.
After selecting two recipes from the app, you’d like to add one of your own. There's one you really like on the HomeChef website. How would you go about adding your own recipe from a website?
Select your personal recipe to be part of a meal plan.
Create a meal plan by scheduling the nights you will cook the recipes you like, including the one you added. The nights you plan to cook dinner are 1/25, 1/26 & 1/27.
After making your meal plan for the week, it’s time to make the grocery list. Ingredients from meals you’ve added to the meal plan have already been added to your grocery list. Go look at the items in the list and add an item you need, milk.
Following the tasks, I asked open ended questions about their experience. I wanted to know if they thought the placement of the buttons made sense, if they experienced any frustration or confusion, and the overall ease of use and initial impression.
The biggest pain point was in the first task. There was confusion with my choice of icon. The calendar icon I used to select meals was not intuitive or visible. There was also some confusion between those and the floating action button intended to allow users to add recipes of their own to the database. This presented such a problem early on in my testing, that I changed the icons before conducting the last two usability tests.
My biggest take away from this project is the importance of the user. In a mobile app, where I was responsible for every aspect of the design from information architecture to visual design, user feedback needed to be the driver. It’s natural for a human being to have assumptions, but necessary for a designer to test out those assumptions. This discovery was paramount during the testing phase. Icons that made sense to me didn’t make sense to other people.
The scheduling of the meals presented confusion as well. A tab slides out from the right side showing the user how many meals they have added. This is where the scheduling feature occurs. However, users wanted to click the meal plan icon in the nav bar to schedule meals. In future iterations, I plan to provide multiple ways for users to accomplish the task.
