Olive
The Health and Wellness App
Product Brief
The project scope required the development of a responsive health and wellness application. The application needed to offer various physical and mental wellbeing features for health-conscious individuals. Additionally, the application needed to include the capability for users to log their health and medical information.
​
Problem
In a society where individuals have a busy lifestyle and wellness is often overlooked or given minimal attention, many people face challenges in managing their physical and mental health. Unfortunately, tools designed to encourage a healthier lifestyle are not always inclusive of users with diverse needs.
​
Health-conscious individuals need a one-stop solution to health and wellness information that will educate and support them in maintaining a healthy, balanced lifestyle.
​
Solution Hypothesis
Design a health and wellness mobile application that offers curated content and facilitates connections with experts and peers to support individuals with a health-conscious and wellness-oriented mindset in achieving their goals. This approach aims to enhance user focus, engagement, and motivation while simplifying the process of reaching desired objectives.
Roles
UX Designer
UX Researcher
UI Designer
Information Architect
​
Tools
Paper and Pen
Figma
UsabilityHub
Miro
​
​
Timeline
5 months
​
​
The Design Process
Discover
Define
Ideate
Design
Test
Problem Statement
Competitive Analysis
User Research
Affinity Mapping
User Stories
User Personas
User Journey Maps
User Flows
Sketches
Wireframes
Responsive Design
Style Guide
Design Language System
Usability Testing
Preference Testing
Discover
Understanding the Problem
To ensure a comprehensive and effective user experience design, it is essential to have a deep understanding of the problem and its complexities. To begin this project, I initiated the process by identifying potential problems and formulating a well-defined problem statement as a foundation for developing a solid solution strategy.
​
-
Users may struggle with choosing the right tips or content to follow.
-
Users may want to feel included in the process of selecting an expert.
-
Users might feel that it's hard to communicate with or reach out to experts.
-
Users may feel unmotivated with taking the steps towards achieving a healthy lifestyle.
​
Problem Statement:
​
Users need a way to communicate with experts, increase motivation throughout their path, connect with a community of users, and discern between information that is relevant to their goals because they want to play an active role in their journey towards improving their physical health and well-being.
​
We will know this to be true when we see a retention in the number of users who use the application to improve their physical health and well-being.
Competitive Analysis
Next, I performed a competitive analysis in order to analyze the market and get an idea of what users may expect from my app. I identified my 2 main competitors: 8fit and MyFitnessPal.
I payed close attention to each app's key objectives by evaluating their core message, reviewed their overall business strategy to find out the way in which they attract customers, and assessed their market advantage by pinpointing what made them better, faster, or more unique than their competitors.
​
I summarized my findings by creating a SWOT profile for each competitor.
​
8fit SWOT
MyFitnessPlan SWOT
User Research
After my competitive analyses, I began identifying specific research goals to help narrow down what options might be most relevant to my user's needs.
​
Research Goals:
​
-
Identify users current attitudes and perspectives surrounding their health and overall well-being​.
-
Identify what pain points users face when achieving fitness and/or nutrition goals.
-
Document user opinions on competing fitness, nutrition, or overall wellness applications.
-
Identify what type of support users believe would help them with improving their health.
​
Interviews
​
As a part of my user research process, I identified specific criteria for recruiting participants who would provide relevant insights for my project. This helped me design an interview script that was effective in gathering the necessary information. After selecting 3 suitable individuals, I conducted open-ended interviews with them, using carefully crafted questions that aligned with my research goals.
​
Key Findings:
​
-
Users preferred apps that suggested diverse workout routines.
-
Most users had access to healthy foods but still believed that their diet could be better.
-
Users mainly sought out doctors when they did not feel well or had a medical emergency.
-
Most users had a positive outlook on physical activity and believed that they could improve their health and/or physical appearance.
​
​
.jpg)
Affinity Mapping
After conducting the interview, I employed the use of an affinity map to further organize and categorize my findings. This allowed me to uncover significant connections and insights that may have been initially overlooked or not easily apparent during the interview process. I grouped my data into the following 3 categories:
-
Behaviors & Attitudes
-
Needs & Goals
-
Frustrations
.jpg)
Define
User Stories
Drawing on the insights generated during the discovery phase of the design process, I developed several user stories that outlined the specific actions users would take within the app. These stories provided a clear roadmap and helped to break down the project into manageable components, providing a high-level overview of the scope of work.
​
-
As a user, I want to have an expert and be able to communicate with them regularly, so that I can reach my goals.
-
As a user, I want recipes that are tailored to my specific diet, so that I feel included in the design of the app and reach my nutrition goals.
-
As a user, I want an app that showcases my goals and rewards so that I can feel catered to and be reminded of how far I've come.
As a user, I want an app that keeps track of my mental state, so that I can have resources offered to me when I feel down.
~Target Audience User
User Personas
My previous research provided the necessary building blocks that allowed me to create accurate personas.
Each persona served to establish empathy with users, prioritize functionality based on audiences, and make design decisions based on real data from real users.
​
Kimberly: The Scrupulous Student
This persona is interested in partaking in structured and engaging workouts in order to obtain a more toned look. They hope to be able to track their progress.
​
Lucas: The Warm-Hearted Worker
This persona cares about finding resources tailored to their health and age. They hope to improve their diet but need some direction.
​
Isaiah: The Admirable Athlete
This persona desires to become more in tune with their emotions. They hope to find a community that supports their goals.
​
User Journey Maps
To gain a better understanding of users' beliefs, behaviors, and experiences, I utilized a user journey map as a tool in my design process.
​
My objective was to visually depict the user journey of two personas based on the insights gathered from previous research. This would provide a clear and comprehensive understanding of the steps users take to achieve their goals.
Ideate
User Flows
After creating personas, reflecting on the user actions within the app, and understanding the project's business objectives, I was able to develop the user flows for the application.
​
Through the utilization of task analysis, I gained insights into the various steps and interactions that my users would require to achieve their goals within the app. This approach enabled me to identify essential pages and screens, and ultimately, avoid common design pitfalls by prioritizing the user's requirements in the development process.
​
I identified 3 main user flows:
-
Select a workout challenge.
-
Add grocery items to shopping list.
-
Book and select an apppointment with an expert.
Card Sorting & Sitemap
Popular Placement Matrix
Revised Sitemap
To establish the structure of my application, I developed an initial sitemap that outlines the interrelationships between each page. To begin, I determined the purpose and content that I wanted to present to my users.
​
Next, I conducted a digital card sorting test using OptimalSort to help refine my sitemap. I generated 20 cards that all 5 of my participants were asked to sort into the following categories: fitness, nutrition, community, experts, account, and resources. My sitemap was revised based on the results.
​
Key Revisions:
​
-
I decided to add a "Resources" section that would feature a community and article hub, allowing users to get extra support when needed.
-
I included a way for users to view both fitness and nutrition goals by clicking on their profile, instead of having to jump between the Fitness and Nutrition section to view each specific goal.
Sketches
In order to establish a preliminary framework for my design, I created initial sketches to outline the primary elements of my application. The sketches were informed by my user flows, which allowed me to identify the key features that were critical to the success of the app:
​
-
A favorites tab so users can access saved workouts, recipes, and articles.
-
A search bar on every screen to facilitate acessing content throughout the app.
-
Recommendations tailored to user's recent activities.
-
An expert portal so users can feel supported.
​
​
Design
Wireframes
Throughout the design process, I continuously increased the level of fidelity of my wireframes by adding more intimate details and elements to my screens.
​
For example, as the fidelity increased for the nutrition user flow, I solved for the following:
​
Low-fidelity wireframe: I solidified the placement of most elements for the nutrition screen and determined it's placement on the navigation bar.
​
Mid-fidelity wireframe​: The price button was disgarded while photo placeholders were added so users could visualize their grocery items.​
​
High-fidelity wireframes: After getting feedback, I increased the sizes of several buttons and added a shadow in order to draw attention to important CTAs.
Responsive Design
After finalizing the mobile designs, I iterated on one of the mid-fidelity mobile wireframes that I had developed for the home screen. I adapted this wireframe for desktop users in order to apply reusable design elements from the Material Design guidelines, thereby enhancing the responsiveness of my design.
Testing
Usability Testing
After creating a high-fidelity prototype using Figma, I administered a usability test to evaluate the utility and usefulness of my product.
​
I recruited 6 participants and conducted testing using moderated-in person and remote sessions. The sessions allowed me to collect qualitative data and gather feedback from my network.
Key Updates:
-
Removed the previous Expert’s name from “Appointments today" as it proved to confuse users when completing their task.
-
Included an explanatory message under "Appointments" describing what users must do in order to book an appointment.
-
Updated the next browsing screen to make it easier to understand.
-
Added the expert's specialty on the browsing screen to facilitate the task of searching for specific experts.
Original
Revision
Preference Testing
Screens Tested
Original
Revision
To gather feedback on the design of my app, I conducted preference testing on the splash and onboarding screens. Thirteen participants were recruited through my personal and professional network, and were prompted to select their preferred design. This helped to further refine the visual design of the app.
​
Results:
-
100% of test participants preferred a slogan that reflected improving oneself.
-
100% of test participants preferred a more simple onboarding screen that had minimal text and descriptive images.
Final Prototype
Olive Prototype
Reflection
At the outset of the project, I explored several ideas and directions to guide my app development. However, to avoid creating an app that did not meet the user's needs, I refrained from including too many elements.
​
I understood the significance of validating my hypothesis and designs through multiple rounds of testing. Collaborating with peers enabled me to receive valuable feedback and identify solutions that I had not previously considered. I acknowledge that team collaboration is critical to bringing an app to fruition.
Future Iterations
The core features of my app were based on solving the main needs of my users. For future iterations, I would propose the following:
​
-
Including more graphs and charts so users can more effectively track and visualize the progress that they have made.
-
Varying the type of content available by including workout and meal prep videos, live fitness classes, and maps detailing running routes.