First UX project: 4 Days to solve a classmate’s problem
Mia found planning mealtimes to be unnecessarily time-consuming. In this concept project, I created a meal planning app that made cooking fun again.
Overview
As the initial UX project on the General Assembly UX Immersive course, we were tasked with designing a mobile app during a 4-day sprint.
Mix it Up was created to solve the problem of my user, Mia. In this case study, I will take you on a journey through the four stages of my design process and how I came to finding a solution.
Phase 1: Discover
Exploring Mia’s habits and pain points
I started by having a chat with Mia to establish what direction I should take for the app. She moved to Doha at the beginning of lockdown with her husband and is enjoying having a new city to explore in her spare time. Like many us, Mia finds deciding what to cook and which recipes to use time-consuming and finds it difficult to fit around her busy schedule.
From the two interviews I did with Mia, I found out that she loves being organised and productive with her time. She is also acutely aware of her environmental impact and therefore tries to keep food waste and plastic use to a minimum. Mia likes to have a varied diet, and for health reasons, limits the amount of meat she eats per week. But the key pain points I discovered during these interviews were:
- Finding time to plan the meals for the following week
- Writing the shopping list while having to refer back to recipes from different sources
- Wanting to have the exact ingredients, without any waste
Phase 2: Define
Understanding Mia’s problem
To help me better understand Mia’s pain points, I asked her to talk me through an average day in which she also does the meal plan. To visualise this, I created an experience map to show how Mia would feel before, during and after this scenario.
The experience map enabled me to then identify the problem statement for this project:
Mia needs a more efficient way to create a meal plan because she would prefer to spend that time with her husband instead.
Phase 3: Develop
Visualising the solution
With the problem identified, I could start thinking of possible solutions:
Sketching and naming six of my ideas enabled me to analyse each one and then pick the one that best solved Mia’s problem. I chose ‘Shuffle’, which I later renamed ‘Mix it Up’ to better describe the app’s key feature. The idea was that once Mia had uploaded recipes onto the app, she would then be able to generate a meal plan in a couple of clicks. This would reduce the time spent creating the weekly meal plan. Mia could also personalise what meal types she would like, e.g. two vegetarian meals per week.
I drew a storyboard and wrote an accompanying outcome statement to visualise how Mia would use Mix It up.
Before sketching the wireframes, I created a user flow to understand how Mia could navigate the app to reach her goal. I thought about the most intuitive steps with the least amount of clicks to solve her problem further.
Phase 4: Deliver
Low-fidelity (lo-fi) prototype and iterations
I designed the lo-fi wireframes and put them into Marvel (a prototyping app) to start testing.
Usability Tests
I tested the app with four users (including Mia) and gave them three tasks…
- Could you add some recipes to your library?
- Could you change your meal type preference?
- Could you generate a meal plan for a new week?
Some of the key findings were that:
- It wasn’t clear what ‘New week’ meant on the homepage
- Saved menus and recipes were similar but in different places
- It wasn’t clear if the meal plan is for the current or previous week
Here are the iterations I made:
In this first iteration, I made two changes based on user insights from the user tests. First, I changed the meal plan generator button from ‘New Week’ to ‘New Meal Plan’. This was because the wording was not intuitive. Users also wanted to know how they could see the previous meal plan to refer back to when cooking each day. So, I changed the button wording from ‘Upload recipes’ to ‘Previous Meal Plan’.
In this iteration, I removed the ‘settings’ from the menu, as users felt the wording was too similar to ‘preferences’. This meant that users got confused when trying to find specific information. Also, users thought ‘saved recipes’ would be in the same location as ‘saved menus’ as they have similar meanings, so I put them together on the same page.
In this iteration, users felt like ‘weekly meals’ was unintuitive, so I changed the wording to ‘meal types’. I also moved ‘Recipes’ to the main menu, for the insights stated in iteration 2.
To recap:
Problem: Mia needs a more efficient way to create a meal plan because she would prefer to spend that time with her husband instead
Solution: Mix it Up app enables Mia to generate a new meal plan in a few clicks, reducing the time spent doing this activity.
Final lo-fi prototype on Marvel:
Click here for prototype on Marvel app
Next Steps
Due to time constraints, I was not able to iterate these wireframes into mid and high-fidelity. My next steps would be:
- Carry out more user tests
- Increase fidelity
- Implement visual design
Reflection
After presenting this project to my class, Mia reached out to say:
“I love the app, I wish this was a real app so I could use it. I’d be able to enjoy cooking and planning meals!”
My key learnings were:
- Asking the right questions to find the right problem - When I was interviewing Mia, there were specific things I wanted to know. This dictated the questions I asked and limited the insights I could gather. I would have been able to dig deeper into Mia’s problem if I had asked more open questions.
- Using the double-diamond process (discover, define, develop, deliver) This enabled me to complete this project in such a short sprint, whilst getting the most value out of each stage.
Thanks for reading. If you have any questions or want to reach out, you can find me on LinkedIn.