Designing a better meal planning experience — a UX case study
Simplifying the process of meal planning.
This story originally appeared within the UX Collective.
Product Name: Plan It
My Role: UX Designer
Timeframe: 2 Days
_________
Project Overview
Have you ever come home from a long day at work, rummaged through your fridge, and only been able to find one egg for dinner? Same.
I was curious to see if others had the same issue, and wanted to explore the idea of meal planning and tools for success.
If You’re Busy and You Know it, Clap Your Hands…
Immediately, I knew that busy New Yorkers were my target audience. Having spent all of my adult life living in NYC, I am intimately aware of the go, go, go pace of life here. The parameters that I wanted to explore was the idea that: Busy New Yorkers need a way to plan their meals that will hold information in one place and will help with buying groceries.
I made a few assumptions in my thinking, which were that: New Yorkers want the ability to plan out their meals for one week at a time. In order to truly improve the meal planning process, they would want to take their planning information to the grocery store with them. And that a major motivator for New Yorkers would be to save money.
“Whatever microwaves easily” — Understanding the Problem
Although I had an idea of what I wanted to solve, I knew I needed a better handle on the nuances of the problem. To better understand my user and the specific frustrations that they faced, I interviewed 5 users within my target audience. I created a set of 25 questions geared at understanding the “why” behind their current behaviors. I wanted to understand their wishlisted areas of improvement, specific frustrations, and how this process can be made easier? I also felt that understanding their motivations was important in ensuring that the product and features that I developed got to the root of the problem.
Example Questions:
Do you plan your meals in advance? If yes, how far in advance?
Describe for me what it looks like when you plan your meals?
Can you tell me about a frustration with meal planning?
Tell me about how you grocery shop — describe it in as much detail as possible.
From these questions and from wading through the responses that I received, I gained valuable insight. I learned of their specific behavior, the roadblocks that prevented them from successfully meal planning, and which areas of the process they wished they could improve.
“I know what I like, so I won’t veer away from that”
I broke down each interview into singular thoughts and transferred them to Post-it notes. Using the timeboxing method, I set a timer for 15 minutes and set about grouping my Post-Its by theme, a process known in the UX world as affinity mapping. It became immediately apparent that there were common themes, regardless of the user’s gender, profession, and living status.
New Yorkers are motivated to plan their meals to save time and save money. They prefer to shop as few times a week as possible, and while there, they do so as quickly as possible. Every user had a set process for meal planning, though no two processes look the same. And finally, every user faced roadblocks that prevented them from meal planning.
Everything In Its Place
The research I gathered and the insights I synthesized led me to creating a prototype that would address this problem. Plan It is an app that provides an organized way to plan out your meals & combines those ingredients into an organized grocery list.
From the get-go, there were certain features that I knew I needed to include:
- Meal Plan schedule set in weekly blocks
- Easily view what the user plans on eating for breakfast, lunch and dinner
- View the user’s grocery list in the same order as the grocery store
- Add a friend or partner to view the user’s meal plan
Plan It 1.0
Version 1.0 contained all of the key features spelled out above — the ability to view 1 week blocks, a grocery list that compiles as you plan, and the option to add a friend or partner to your meal plan. While this version aligned closely to my product vision, there were a few hiccups that I uncovered, but we’ll get into that in a moment.
Test, Test, Baby.
This is user-centered design. So to ensure that my product did exactly that, I conducted 5 usability interviews with a set of 3 specific tasks. These tasks were geared at testing the functionality and ease of use of Plan It.
While testing, I observed my users to understand how easily they navigated through the app, what they thought would happen when certain buttons were pushed, and any moments that tripped them up. All of my testers completed the following tasks:
Scenarios & Tasks
You are sitting down for your weekly meal planning session.
Add in your meals for Monday. You plan on having yogurt for breakfast, soup for lunch, and spaghetti and meat sauce for dinner.You have just arrived at the grocery store.
Look at the items you need to purchase.You cook all of your meals with your roommate, Jenn.
Allow Jenn to view your meal plan.
Testing Hot Take
All of my users completed the first task relatively easily. A few of them wanted to click on the “previous items” section, which would have worked in a fully functioning version, but in the prototype, I was looking for them to click into the search bar.
Scenario two was completed without issue across the board.
The third scenario caused some issue when testing. I had initially named the button “Add Planner”, which made sense when I was thinking about the app because one who creates a meal plan is a “planner”, and they would be adding an additional planner. However, in practice, this was really confusing. Plan It 2.0 will reflect this change and will use more universal language.
Learning From Experience
Testing my prototype gave me a window into how my user thinks — what they enjoyed about the app and what added more frustration to the process. Conceptually, I was on the mark. Plan It had the features that my users wanted and contained the features that they expected. Stylistically, I heard feedback that it felt “heavy” and like “information overload”. While I initially thought that the lo-fi nature of wireframes would excuse some of the design elements, I quickly learned that I needed to pare it down a little less in the future. As mentioned above, the phrasing of my app was too niche. All of my users struggled with the phrasing “Add a Planner”. It was a humbling experience to have to keep testing, knowing that I had built something that was a poor user experience. Though as a benefit, I knew exactly what I had to fix for my iterated design.
If at first you don’t succeed, try again. Plan It 2.0.
The first change that I made was changing the “Add Planner” button to include an icon and the more universal language of “Invite a Friend”. Hopefully this will clear up issues for future users.
The new version included a cleaner navigation menu — initially, I had opted to not include icons in the navigation menu because they were lo-fi sketches. However, it became clear to me very quickly that I needed to include icons in the menu.
I also improved the flow of the “Add a Meal” screens. With the inclusion of the magnifying glass icon (an unfortunate oversight) and the inclusion of “Search” headers, the new experience is much cleaner and clearer.
The grocery list and weekly meal plan got updates as well. Now, users can edit the amount of groceries from that page. The weekly meal plan is now no longer “spreadsheet-y”.
Prototype
View the prototype.
To the Future
There is always more than can be done, and Plan It is no different. Going forward, I would like to improve the icons and design, continuing to iterate and test, all while keeping my user in mind.
Additionally, I would like to add a recipe database that would enable users to search for recipe inspiration within the app. To take this a step further, I would incorporate machine learning to add in suggested ingredients or tips for making recipes healthier. And finally, I heard a few users suggest that they would like a way to count and track calories, so I would look to build in that functionality as well.
So, How’d I Do?
On the whole, I was proud of the artifacts and deliverables that I created. Although I was initially unsure about how to complete my first project in such a short timeframe, I put my head down and did what I do best — I get sh*t done. I was proud to see my work ethic and time management skills, which I have cultivated between Wall Street and Silicon Alley, translate to UX.
When we get down to brass tacks, I thought I asked good questions, but there is definitely room for improvement. I could have asked slightly fewer questions and dug a little deeper into some of the answers that I received. My wireframes are a solid start, but there were a few errors within them, some design conventions that I could have adhered to more closely, and some more unique features that I could have added.
One thing I learned is that research is important, and keeping the user at the center of it all is crucial, but this was an opportunity to surprise and delight my user. I am not sure I pushed myself far enough creatively. If given more time, I would have applied that to ideating on further concepts.
