“MealPro offers a fresh and improved approach to saving both time and money, all while ensuring I receive all the essential nutrients I need!”
Meal Pro is a meal preparation mobile application I created for a client. As the exclusive UX/UI designer, I was responsible for completing everything - from the initial concept to the final design.
Project Duration: 3 months
Research Methods: Surveys, Interviews, Affinity Mapping, User Personas, Empathy Map, Heuristic Analysis, Wireframes, High Fidelity Mockups, Prototyping, Usability Testing
Technical Tools: Figma, Adobe XD, Usability Hub, Google Suite
Context
Food indeed plays a crucial role in influencing people's mood, productivity, and overall well-being. As a result, it's essential for individuals to consume multiple nutritious meals each day to maintain a healthy lifestyle. However, the available meal options, ranging from cooking at home to dining out, may not always be the most cost-effective and time-efficient choices. Nowadays, meal prepping has emerged as the optimal method to save both time and money by preparing meals in advance.
Design Process
Research
Surveys & Interviews
For this project, it was crucial to comprehend several factors. Key elements included individuals' daily eating habits, whether they cooked or ordered food, the reasons behind their choices, and their level of satisfaction after meals. Gathering this information allowed me to more effectively evaluate significant issues related to individuals' decision-making processes concerning their food consumption.
Competitor Analysis
To gain a deeper understanding of the competitive landscape in the market, I conducted a heuristic analysis of three popular food apps that primarily cater to users preparing or receiving their meals at home. While these apps may provide instructions on how to prepare such meals and deliver ingredients to the user's home, it's essential to recognize that not everyone possesses the necessary skills or has the time to assemble meals, especially after a long day, or consistently place orders for ingredients to be sent to their home.
Key Findings and Insights:
Following the surveys and interviews, I identified user-specific issues and unearthed key findings and insights that will be invaluable for this project.
Define
Problem Statement
Adults with full-time jobs or other key responsibilities need to find a way to have nutritious and healthy meals readily available to them to be healthy and maximize productivity. Therefore, a time and cost-efficient method is needed to have nutritious meals ready.
User Personas
During the research phase, I found that users with different lifestyles can face the same issue of not having meals readily available due to the lack of time. So, two personas were created as a reminder to focus on the vital point that needed to be solved.
User Stories
I created user stories from my personas and organized them by MVP. This method helped me ensure that my design was user-focused so people could reach their goals efficiently.
Core Features
In my research, there were three main features that I wanted to focus on for my product.
Sitemap
To ensure that my users could reach their goals efficiently, I created a sitemap that depicted a visual representation of how a user would navigate through the product.
Ideate
Low Fidelity Wireframes
To better understand what I wanted my product to look like, I made low-fidelity wireframes by sketching out the crucial screens that reflected the core features. Additionally, I added some middle screens that would help get to that goal. I then, I played with the screens to find the best combinations for my product. Lastly, I created a mid-fidelity mock-up of the screens to get a better idea of what the final product would look like.
After this step, I uploaded my designs to Figma and turned them into a clickable prototype to conduct further testing with users.
Testing
Usability Testing
This phase was the most critical part of the project because it quickly helped me realize what I needed to fix to improve the product for the user. First, the users were asked to complete tasks with the clickable prototype, which highlighted the core features of this app. Then, the results for this phase were recorded and implemented.
Key findings
To ensure I make the right app changes, I listed some critical positive and negative findings that I needed to enforce.
Findings:
Positive:
Users were fond of the overall idea of the app
Users were quickly able to make an account through different platforms
Users were able to navigate through the app easily
Negative:
Users did not like the extensive amount of onboarding pages
There wasn’t a back button or an indication to go to the previous page for delivery changed
Lack of filter
Iterate
Design Changes
After the user feedback, I was able to implement the changes and test them again with a couple of family members. I quickly felt confident in my design and created a high-fidelity mockup, ensuring straightforward navigation, better meal options, and onboarding pages.
After building my style guide consisting of my colours, fonts, iconography and images, I used Figma to develop my design while keeping everything consistent.
Final Product
After extensive research, design, and testing, I successfully realized the objective I had in mind. I developed an app that simplifies meal prepping for users. All they need to do is select the date and time for delivery, and they'll receive fresh meals at their doorstep.
Created by Aml Sultana