GA UXDI Project- My First Mobile App Solution For Cooking
Foodpal is an mobile application that encourages user to eat healthy by cooking his/her own food. To better understand the reason for creating such an app, I would like to start from the beginning and take you on my rapid prototyping journey.
This project is my first stepping stone into the fascination field of user experience design. It started with the task given to us as individual designers to select a topic that we find most interesting and find a problem that could be solved with the design of a simple mobile app. Being a foodie myself, I choose to dwell deeper into the topic of food. After selecting the topic, the first task at hand was to hypothesise three main paint points the users experience in the selected topic. Seeing today’s trend of keeping track of our every aspect of life, I assumed that users would like to stay fit and would do so by eating healthy. The other paint point I think users experience, is deciding where to go and what to eat. In the area of food, users are spoilt for choice but are also left with the dilemma of choosing what type of food to eat (be it cuisine or food preferences like choosing to be veg or vegan) and where to go to dine. Another pain point, I assume users have is finding the right circumstances or conditions to cook.
To validate these hypothesis, we were asked to understand real users and interview them on the actual pain points they experience in the area of food. This lead to the first stage of the prototyping journey…user research.
Stage 1- User Research
I began the research stage by selecting my users. I did so by choosing 4 people who would like to share their thoughts and opinion regarding food. Because of the nature of the topic, I decided to form interview questions around the day to day activities of my users and their interactions with food. Around the aspects of buying food(from food courts, hawker centres or restaurants), choosing what to eat, ordering food (for instance from online portals) and cooking food. Additionally I inquired about the importance of food in their life and whether they had any food preferences or restrictions. Along with the above questions, I also focused on asking and understanding the reasons for their answers. Why they said what they did. This helped me gather user behaviour patterns as well as opinions. I choose to audio record the interviews with consent from the users, to focus more on listening to the answers and built a better interaction with the user. I tried to speak less and listen more.
One important lesson, I learnt from the user interviews was to keep the list of question asked under 15–20 questions, this helps in keeping the sample size under control for the next stage of the design journey. Another key learning was that, in order to dwell further into their thought process and better understand a certain answer, I sometimes tend to ask the user closed-ended questions which in a way interfered with the user’s actual opinions and thought process. To stay clear of these mistakes, it is better to ask the user to further elaborate on their answers by asking, why they said what they did. The end of user interviews marked the end of the research phase.
Stage 2: Synthesis of Data
The next step in the design journey was to gather the data points derived from the user interview and analyse them in order to obtain insights into user behaviour, their pleasure and pain points. These key insights assist in understanding user problems and leads to finding the main problem statement.
The method used to synthesis and analyse data from user interviews is affinity mapping.To implement this method, I reviewed my recordings and wrote down user answers on post-its. To make it effective every user was given a different colour. After all answers were written, the post-its were grouped into clusters that shared a common idea. This exercise led to finding patterns in user behaviour, user problems and pleasures.
Key Observations (After User Interview):
- Users are working individuals.
- User Age: 25–35
- Have a fast-paced life and don’t have much time to spare
- Users enjoy eating a variety of food.
- Cooking is like a hobby for the users
- They like eating healthy
- Have certain food restrictions
- Want quick convenient solutions.
Patterns Drawn (After Affinity Mapping)
Since the project was only about 4 days long, I choose key user behaviours, pain points and pleasure to work on. From affinity mapping I found the user faced problems while cooking and could not enjoy the process, even though they liked cooking.
Along with choosing the main pain point, it was important to consider the user behaviour as it shows the motivation behind user's actions and decisions. Hence I decided to work on a solution that would cater to user’s behaviour (i.e. user eats 2 out of 3 meals at home, wants to stay healthy and searches for a variety in food) and solve the problem faced while cooking (i.e. unable to decide what to make, where to buy the ingredients from and the problem of not finding ingredients when using a recipe to cook).
Stage 3: The Solution
I decided to design a mobile app that encourages user to eat a variety of healthy foods by cooking his/her own food. It makes the process of cooking easy and convenient by providing a recipe from the ingredients already available with the user. This eliminates the hassle of going and shopping for ingredients every time a user cooks. This saves user's time, makes it convenient to cook and motivates the user to eat healthy and stay fit.
The Solution- User Flow
Now that I had the solution statement, the next step was to design a way the user would perform the task. To do so, I decided to jot down on paper the number of steps it takes the user to accomplish the task, from start to the end final action. I later illustrated the movement via user flow diagrams using Jesse James Garrett visual vocabulary.
I found using paper to first jot down the number of steps and later turn these into visual flow diagrams helpful and fast, as it gave me the flexibility to add and subtract steps in between the start and final action.
Stage 4: Wireframes
Once done with the userflow, it was time to work on the wireframe of the app. It was about designing each screen the user will use in order to accomplish his/her task, in this case generating a recipe with ingredients the user already has at home. At this stage, its good to refer back to the user flow and keep in mind the user’s main objective. Because this was my first time designing wireframes, I referred to one to two mobile apps to understand screen visual design. I tried a few iterations to find the most effective way to locate the icons, hamburger menu, the save button, the bookmark bar, the search bar etc.
Stage 5: Prototyping Wireframe
After doing a few iterations of screen design and how the app will "flow" from screen to screen, it was time to prototype. Since this was already labeled as a rapid prototyping project, I used Adobe Illustrator to make the screen designs and later plugged the jpegs into InVision and devised a flow to create my first rapid prototype. This was the best part of the project, where after all the research, analysis, design (going back and forth between user needs and design goals), I got to see my own design in motion almost mimicking a real mobile app.
Stage 6: Presenting
The entire journey boils down to this moment, where you have to present all you research findings, iterations, userflow, screen designs and prototype in a precise and concise manner that doesn't exceed a limit of 5 mins.
Stage 7: User Testing
This part of the project was optional, but in reality, the phase of user testing is very important. It allows the designer to test and better his/her application design. This usually leads to iteration of design. For my prototype I got the opportunity to test it during my presentation and many users asked me to refine certain design aspects. There is a certain design elements that is redundant and needs to be removed.
The app has yet to be tested in the real world and needs further design improvements.
For now please check out the link below to the app prototype and feel free to leave and feedbacks. Thank you