Overview: App Creation (UX & UI Designer)
On this project we were tasked to identify an opportunity within a problem space, select an appropriate platform and design a solution. Thus, my team and I created a native mobile app designed to teach users the basics of cooking through educational and friendly interactions.
Technologies Used:
- Figma
- Miro
- Canva
- Notion
- Google Suite
Discover (Methodologies):
- User interviews & Interview Guide
- Detailed Research
Our initial discovery phase was of great importance as since we were developing the app from the ground up, we needed a lot of preliminary information before we could move forward. So during this time we developed a screener survey and a concise interview guide so that we could interview those who fit into our demographic (beginner cooks) and receive tangible, beneficial results.
Screener Survey results Define (Methodologies):
- Affinity Mapping
- User Persona
- Journey Map
From our user interviews, we now had key responses that would be critical in the progression of the project. We used affinity mapping to determine our insights as our insights would be the building blocks of our persona. Now that we had our persona to design for, we then created a journey map to look at the user's current journey to solve their problem, and identify main areas that would need to be improved. Now that we had our persona and their current journey, we could use these to develop a tailored problem statement that we could refer back to throughout the project.
User PersonaJourney mapWith Sasha and her journey in mind, we could now construct our problem statement. This would be tailored to our concise focus on the problem, and give us clear context to refer back to as we moved onto the design process of our project
Problem Statement:
“When people cook, they want to understand the instructions and be able to prepare dishes using the right ingredients, process, and tools to safely cook meals
Sasha is interested in cooking something that reminds her of her Mom’s cooking, but lacks the skills and experience in the kitchen. Since work keeps her busy, she doesn't have much time to do research to learn the technical skills she wants to improve, and gets tired of sorting through information online.
How might we help Sasha improve her cooking skills and gain confidence in the kitchen in order to recreate her Mother's favorite dish?”
Design (Methodologies):
- Design Studio
- Prototyping
- Wire framing
- Usability Testing (Mid & High Fidelity)
With our research phase completed, we now had a concise and sound basis upon which we would build on through the use of intelligent design. Starting off the process we conducted design studios to align our creative visions, and then produced these into mid fidelity wireframes through Figma. Once we had these wireframes and a working prototype, we could test our functionality and navigation through the use of usability testing. Once we had tested the mid fidelity, we could implement improvements backed by the usability results, and then translate the prototype into high fidelity which we would test again to see the results of our improvements.
Initial Design Studio Mid Fidelity Wire flow - We made a wire flow for our mid fidelity prototype because we needed to establish how we wanted the users journey to look like throughout their experience on the appFurther Annotations
Mid Fidelity & High Fidelity Testing Results:
Comparison between Mid and High fidelity results
Once we had completed our usability testing for our high fidelity testing, we had successfully reached the conclusion of our project, yet we looking at next steps we had some things in mind. For our next steps, me and my team had identified various elements we would improve upon or implement if we had the means to do so. We really wanted to add animations and GIFs into the project to help add deeper interaction and retention with the user. We would've also liked to create a leaderboard for users to compare their scores with, as this would help to keep user retention.
Below you can view the High Fidelity prototype!
Also, to view a deeper dive into the project, check out my published medium article for this project!:
