Project Overview
Role
UX/UI Designer
Methods
Competitive Analysis, User Interviews, User Testing, Preference Tests, Wireframing, Prototyping
Timeline
7 months (October 2021 - May 2022)
Project Toolkit
Figma, Google Forms, Zoom, Procreate, Lookback, Optimal Sorts, Usability Hub, Lucidcharts
Allow health-conscious individuals to log in to a responsive health and well-being portal to record their health and medical information, as well as access general, physical and mental well-being features.
Project Introduction
Challenge
Creating a health and wellness application that allows users to find all the necessary resources needed while taking into consideration of their personal goals, habits, and conditions.
Hypothesis
Our health-conscious users with busy schedules need a way to obtain quick and concise reliable information mental health, fitness, and general well-being in order to live a healthier/balanced lifestyle while having a secure portal to save their medical information.
We will know this to be true when we see that Dopamine is being used regularly by our users, measured by the average days per month we see the users complete at least one exercise, utilize a resource, or update their health records.
Competitor Analysis
Seeking opportunities for Dopamine in the market
This is where I began to research and got to know the key competitors in the market so it could help me get an idea of what users might expect from my app, which competitors are doing a good job at solving user problems or not, and opportunities to meet an unfulfilled user need. I took a closer look at two apps, 8fit and ZocDoc, below are opportunities that can be capitalized on for Dopamine.
User Research
Reaching out to potential users allowed me to explore this opportunity more in depth
I conducted a user survey with 15 participants using Google Forms and interviewed 3 participants via Zoom and In-Person ranging between 20-40 years old that has used a health or fitness app within the past 6 months.
Research Goals
Survey Takeaways
Affinity Mapping
I collected qualitative data from the all 3 interviews to create an affinity map. I was able to categorize specific pain points and develop a better understanding of Dopamine’s potential users.
User Personas
Combing my learnings to create personas
To better understand and empathize with my users’ needs, motivations, and frustrations, I created Molly and James who were used throughout the project to keep in mind who we were serving and how features could be further tailored to them, especially when considering what design patterns they may already be familiar with from prior experiences.
User Journeys
Better understanding user needs
Based on the user personas created, I mapped out a user journey to help me better understand their needs and wishes. James utilizes the diet and fitness feature while Molly spends more time using the health feature.
User Flows
Visualizing the in-app experience
After determining the journey of our users, I created 3 user flows to visualize the in-app experience of the three main features. The flow itself shows a good overview of potential touch points and obstacles for the users.
Ideation
Research insights shaped the features of Dopamine
Features
Dopamine consist of many futures that will aid in the health and well-being of a user but these are the 3 highlights through the process of wireframing and prototyping.
Diet
Offers you suggested plans and recipes based on your preferences and goals.
Health
Log and access all of your medical and health records in one central location.
Resources
Access to a wide variety of resources in video, blog, and community format that will include all things health, fitness, diet, and general well-being.
Ideation
Defining the information architecture
To check if the structure of my app is logical, I conducted an open card sort with 8 participants via optimal workshop. The card sorting itself had a positive feedback and allowed me to restructure the hierarchy to something more familiar for users when navigating through the app.
initial site map vs. refined site map after card sorting
Ideation
Prototyping Dopamine through low, medium, and high fidelities
I started out with low-fidelity sketches using Procreate, I tried to visualize the rough placement of key features and navigational elements. After, I translated the sketches to mid-fidelity wireframes that gave me a better idea of how the elements and copy would actually fit on the real app and used it for my first prototype.
Usability Testing
Validating the app’s functionality
This is where I was able to put my mid-fidelity prototype to the test with real users. I observed how frictionless the users are able to navigate through the app and identified entry points while they completed 2 scenario tasks.
Usability Test Plan Highlights
6 participants
Moderated remote test
Think-aloud-Method
20-40 minute sessions
3 background questions
2 open-ended questions
3 scenario tasks
Screenshot of usability testing on Lookback
Test Results
Sessions were recorded and reviewed multiple times in order to organized all of my observations, comments and ideas into affinity mapping (positive quotes, negative quotes, observations, and errors). From mapping, I then created a rainbow spreadsheet to evaluate and prioritize issues for Dopamine.
With the rainbow spreadsheet, I was able to rank the severity and plan accordingly for the next iterations. For my error rating I used the Jakob Nielsen Scale.
Major Findings
Refinement
Refining Dopamine with informed next steps
I went through my findings that I mapped and sorted out, then chose the top 5 issues that were rated at high severity. I needed to make these changes before I created the high-fidelity screens for Dopamine.
view full Dopamine usability test report here
Issue 1: Uncertainty of what the categories on the homepage mean
Suggested Change: Create a quick onboarding for the categories to explain the overall app after sign up or more callouts on the homepage screen.
Evidence: All 6 participants were confused as to what the categories on the homepage meant or where they lead to once they were clicked on. Most participants knew it was a health and wellness app but questioned if the category buttons lead to resources or its own page or the feature.
Issue 2: The utility of the vaccine card feature was unclear and the process of how it becomes digital from a photo upload
Suggested Change: Rethink about the whole process of uploading an image, instead I will have the user scan an image of their vaccine card that will transcribe into a digital version of their card and also allow the users the capability of the adding it manually. Instead of having it placed just in the app for access, there will be the ability to add it to your wallet.
Evidence: Participants thought it was a great idea but the world is slow shifting away from proof of vaccination. 2 participants knew what the QR code was used for the on the vaccination card but the other participants were confused. 4 out of 6 said that they usually just show an image of their card. 4 out of 6 participants were a bit concerned of the process and questioned how exactly it worked.
Issue 3: Flow of using the recipe was clear but missing key details that the user normally utilizes when cooking or prepping a meal
Suggested Change: Change the overall flow of viewing a recipe and allow the user to customize servings and make sure all of the key details like nutritional facts are added. Make it easier for the user to follow and understand by adding time stamps to the videos and the ability to view the ingredients and instructions on one page.
Evidence: 2 participants wasn’t too fond of going back and forth between the two pages from the ingredients and instructions. Most participants wanted an easier way to modify servings for the meal without having to think much about it. 3 participants suggested that they would like the instructions to have time stamps in the video instead of having to scroll through it.
Design Collaboration
After making some changes based on material.io patterns, it was time for an expert review session so I can make improvements to the app. To do so, I collaborated with other UX students from CareerFoundry via Slack. There were a total of 3 students who provided feedback.
Here is one of the changes made based on feedback from other designers.
Accessibility
It is important to the app’s experience level nearly up to 100%. I tried my best to figure out how to make Dopamine for accessible for all users. It is important that the app follows the Web Content Accessibility Guidelines (WCAG) to be ensure usability for people of disabilities.
Here is one of the changes made based on WCAG for better accessibility.
Preference Testing
Participants were shown two different versions of the same screen and asked to chose which one they prefer and explain why. I took the preferred screen and iterated on it for the high-fidelity wireframe and prototypes.
There were a total of 31 participants using Usability Hub.
User Interface
Creating a brand for Dopamine
In order to create maintainable and scalable User Interfaces. I created a branding and design system for the app. It not only helps workflow become more efficient, but also establish principles for the application to follow through consistently, which ultimately will enhance user experience.
Moodboard
Design Systems
Final Product
High-fidelity and Prototype
Here’s a closer look at some of Dopamine’s final screens.
Now it’s your turn to try the prototype and take a closer look!
Try to manually add your vaccine card to the app so it can be securely stored for future use.
What’s next?
I’ve completed my first-ever UX project (Woohoo!). I definitely learned a lot through this process of end to end design, I hope to continue the journey of becoming a better UX designer as I take on more projects and apply the insights I gained from this.
What new hypotheses do I have?
By creating a library of health and wellness resources that is easy to comprehend and enables users to connect with others through the community, we can help our user reach their health goals with ease.
How will these hypotheses be validated?
The hypotheses will be validated through data analyzation of users activity and engagement of the different resources that Dopamine offers. It will tell us what resources are doing well and if we should change the way we present them to the user. I will also able to look at customer feedback/reviews on this feature to determine how successful it is and possibly conduct user interviews/surveys to ask users how they utilize the given information in their everyday lives to better their health.
Are there any areas of your product you believe need specific improvements?
For the most part I think everything is good to go for it’s first run and from there we can see what needs improvements. Done is better than perfect. If I had to pick an area that need specific improvements, I would probably have to be health record aspect in making sure that the user fully understand its capability and how they they can rely on this app to keep their information secure. Even though I think I found solution to the vaccinations feature, I think it could use some work on the overall flow in making it stand out from other apps or tools used to store this.
How might your user testing evolve as you begin to polish your application?
I feel like my ability to gain more precise data from usability testing and user feedback will likely improve as the application becomes more polished. There will be constant test as apps will always have product updates, with that I will learn what’s the best methods and how I can efficiently test. User testing will have less limitations as it will be more established and been through various testing.
What is your timeline for improvement and implementation?
The timeline for improvement and implementations of the app will greatly depend on what it is that needs to be improved and the type of release. All improvements will happen through the lifetime of the app itself and occur as needed. For this particular need in ensuring resources are being utilized, I must make sure that we are constantly putting out new content and catering to the users needs. There needs to be time set aside for each step of the process, mainly for user testing and analyzation of the data.