Project Background
This application is focused on users who are looking to improve their dietary habits and take control of what they are consuming. Aiming to attract users who are already healthy and looking for tools to help maintain their healthy lifestyle.
Position | UX designer/Visual Designer
Duration | 3 Months
Tools | Figma, Miro, Illustrator, Photoshop
Task & Mission
Design an app attract users that have little to no dietary management, and are looking to live a healthier lifestyle
Make sure to make is build it simple and easy to follow through
Discovery
Research Goals
Do people know nutritional value of their diet
What would motivate people to use these meal plans
What percentage of people maintain their health on regular basis
What is preventing young adults from learning about nutritional facts of the food they are consuming
What are their long term health goals
Define
Personas
I consulted my notes from the interviews and was able to develop the type of persona who are more focused on maintaining their health and will more likely to use this app . Based on my research and interviews it became clear that this group, the targeted users, needed a resource to under the nutritional value of the food they are consuming. These targeted users are lazy and need something quick and easy to help them prep healthy meals.
Kano Analysis
By identifying both the basic needs of customers and the necessary balance of performance and excitement this model takes into account that a product's quality is not solely determined by its functional capabilities
Impact Map
This is a visual representation of the relationships between design elements and the impact they have on the user, it helped to understand the effect of their design decisions on the user experience.
Design
Low Fidelity Wireframes
Having gained a basic understanding of the IA structure, I quickly generated some design concepts. I started by focusing on the homepage to determine the likely locations of key elements, using a loose approach knowing it may change.
Low Fidelity Responsive Prototype
After reviewing the sketches with the users and making some changes, it's time to create a low-fidelity wireframe. This helps to define the interface layout more clearly. Using wireframes early on in the design process is a good way to communicate the placement of elements without getting into too much detail. One of the biggest advantages of this is that the layout can be easily modified.
I gathered inspiration from around the Apps for how the design for Food For Thought might look and feel. I included potential colors, fonts/typography, textures, and anything else that might inspire me. This exercise helped the client to visualize what the App's elements and mood could look and feel like. This mood board provided me with a jumping off point to create the App's branding.
Mood Board
Branding
Usability Testing
Participants
-
40 total test subjects
-
3 in person (2 female, 1 male)
-
37 remote, unmoderated
Test Objectives
-
Determine the ease at which users can navigate through the app to accomplish their task
-
Observe the path in which they took to get through to the end goal
-
Test the overall ease of use of navigating through each process
-
Observe any frustrations or obstacles users may have that may impede their ability to complete their task
Test Summary
-
In Person/Remote Testing
Users completed the task in under 5 minutes
-
Unmoderated Remote Testing
20% had direct success.
60% used an alternate route
20% gave up
Many expressed frustration or difficulty interacting with the prototype.