Project: NutriFood
Role: User researcher, UX Designer, UI Designer
Overview
Vision
NutriFood is an app that gives users the ability to order a healthy and suitable meal. It gives them an overview of a meal's nutrition and calorie so users can choose the best meal based on their dietary preferences.
Key Challenges
During the design process, I was challenged with different areas. I tried to use these challenges to focus and guide my design decisions.
• Finding a balance between providing too much information and not enough information.
• Providing a seamless and familiar user flow.
• It was necessary to find a neutral color palette for visualizing the nutritional values not to persuade or discourage users from ordering a meal.
Design kickoff
Research and Design Methodology
For this project, I decided to follow the Design Thinking process since it provided me with the most relatable insights from my target users. My research phase of the design started with some reading. I was able to gather unbiased information about health and diets. The next step was to define goals and interview questions.
Interview
Then, I needed to know my users, understand their pain points, and listen to their stories and goals. In order to proceed, I needed to know the answer to some questions:
• "What is the product and who is it for?"
• "What do our primary users need most?"
• "How to implement a user-friendly flow?"
The persona was born.
Meet John, a busy student/junior employee, who wants to maintain a healthy diet for an improved lifestyle.
User flow
By analyzing and mapping the goals of my persona I could identify the main user flow for the app. It should be simple and user-friendly for both beginner users and experienced ones.
Competitive audit
I knew that in the today's market, apps related to food and delivery are not scarce, So I could learn more by analyzing my competitors that were active in the market.
I first started by gathering a list of potential apps that were somewhat similar to Nutrifood.
My analyze of them consisted of several aspect such as:
I first started by gathering a list of potential apps that were somewhat similar to Nutrifood.
My analyze of them consisted of several aspect such as:
• How the competitor defines themselves on the market?
• What are their strength and how those would compare to Nutrifood?
• What are the opportunities that Nutrifood can use compare to the competitors?
I was able to use the results of this audit in my upcoming design decisions.
Wireframing
Paper wireframing
Now, the work on the design can be started. Based on insights, I created a paper wireframe to showcase the user journey in Nutrifood.
After wireframing I tried to create a wireflow. In the picture below you can view it in the picture above. I have also included some major changes to the design in this iteration and provided the Figma link for your better view.
.png)
Usability study
By conducting usability studies from the beginning of the design, I was able to make sure my design decisions and iterations had a correct focus. Usability studies helped me improve my designs to better serve the users.
Out of my 2 usability testing, I found several improvement points:
• Users wanted more accessible functions, like the filter and account creation.
• They felt that not enough information was provided for each food.
• Despite liking the map function, they wanted it to have improvements.
The Final design
All the insights gathered in the previous steps, were included into the final design. I have completed the design system and made it consistent across the app. Try the final design yourself using the link below.
Takeaway
Final Notes
I, myself, am a gym goer. I like to maintain a healthy lifestyle by being conscious about the food I eat everyday. In my daily life, I see and hear people who are afraid because they can not be sure about the amount of calorie they get from ordering food online. This gave me the idea of designing this app with the hope that it can provide the element of "Healthy Choice" with the flow familiar to most users. For me, during this project, I feel the user research step being one of the important sections, had challenges for me. Finding "What the user wants" had me engaged for a while.
“This project, also helped me understand my biases and taught me that any project can always be improved through iterations.”
“This project, also helped me understand my biases and taught me that any project can always be improved through iterations.”
Process Deck
.png)
.png)
