Fooody App Design
Overview
The fooody app is a project part of the Ironhack UX/UI course where we first work in pairs for the MVP and then individually for the final UI design and additional flow.
We were asked to provide an engaging cooking workshop app for students that cannot attend the in-person workshop camp. Fooody is part of an educational company that offers in-person language, music, yoga and cooking courses for adults.
The goal here was to provide an engaging online experience to users that are interested in taking online cooking workshops but cannot attend the in-person workshop camp.
Design & Empathise
My teammate Anna and I started with an initial overall research and a competitor's analysis to get a better idea of the current situation of the market and position of our client.
Meanwhile, we were able to structure our questionnaires and distribute them to collect initial data regarding online learning experience in general but also more precisely about cooking.
We received 49 questionnaire responses out of which 36 respondents had attended online courses, and the majority had also attended an online cooking lesson or were keen in doing so.
In addition to surveys, we conducted 4 in-person interviews to understand what our users expectations were from an online cooking course.
We discovered that the users prefer a combination of live and recorded classes to secure flexibility in their personal schedule. As for the instructors, they would like both well-known chefs, and local experts.
With all the data collected we were able to conclude on our main user persona which would help us design a complete journey according to users needs.
Meet Maria!
María is from Madrid and she loves cooking.
However, she doesn't have a lot of time, that is why she prefers to do the workshops online so she can be flexible with her schedule and enjoy her free time with her friends and boyfriend.
Minimum Viable Product (MVP)
Having in mind the pain points of our users, we decided that our MVP must provide the user an end to end complete journey with recorded and live classes, from local experts and well-known chefs, all within a flexible completion date.
The MVP should be enhanced in the future by adding more features to improve our users' overall experience.
Our MVP followed a Moscow Matrix where all ideas regarding features were classified into four categories in order to decide which ones were to be implemented into our current MVP.
Design Concepts and Iteration
Through our discovery phase, we focused on a simple first design concept which was tested to proceed to our low-fidelity wireframes. Once tested again with some users we decided on some amendments such as rephrasing some instructions to avoid confusion, remove the chat box from the live classes to have a less busier screen and finally integrated a rewarding section so that our user could feel engaged and have the feeling of a goal and achievement at the end.
We tested it again and concluded on our final mid-fi wireframes.
Enhancing the MVP
Following on from the MVP and the decision of de-prioritizing some features to deliver on time, I wanted to conduct some more research and focus on adding another user flow regarding communication between students.
The main outcomes of the interviews (5 in total) and the questionnaires (35 respondents) was that 40% prefer to learn alone but 65% would like to interact with their classmates and 25% would like to meet new people.
With that in mind, I created the Fooodies section where classmates can share their food and interact with each other if they wanted by leaving a comment.
Design Style
I decided to name the app Fooody to reference to food and have chosen a font that would resemble the shape of a bowl.
Two fonts were selected to achieve both, they blend nicely throughout the design and create visual hierarchy for the CTA button.
Different palette colours were also tested before deciding on the final colours as displayed on the left. The main issue was accessibility with regards to contrast but also creating a brand colour palette suitable for a cooking app. For this reason, the colours had to be warm and cozy to create similar feelings to those of enjoying a meal.
Final Solution
Learnings & Next Steps
Time was definitely not on our side! We wanted to conduct more interviews and do some more testing but we needed to decide fast on some issues in order to proceed and finish on time (4 days).
Our initial approach as a team, was to solve every pain point of the user at once which led us to a dead end at some point. We were then able to unblock ourselves and continue once we focused on our MVP.
Due to limited time and insufficient data we decided to de-prioritize any features related to user interaction and communication, move them to the should have section of the MOSCOW matrix. This enabled us to further test and re-prioritize once again for the final design.
Finally, I also wanted to explore other user flows which would improve the overall experience of the user for the online cooking workshops. That is why for the second part of the project for which I worked alone, I also designed another flow for the user with the possibility of adding their food pictures (fooodies).