BeWell
end-to-end design of a responsive health and wellness management website
.png)
OBJECTIVE
Allow health-conscious individuals to log in to a responsive health and wellbeing portal to record their health and medical information, and access general physical and mental wellbeing features
CHALLENGE
We now have too many different apps and websites we use to track our health. There are YouTube videos for working out, special apps for yoga, we have to google what our lab results mean, each doctor’s office uses a different scheduling service, Fitbit, Apple Health and such track our daily activity. It is impossible to see the whole picture. Users need a way to manage all their health and wellness needs in one place.
MY ROLE
UX design
User research
UI design
SCOPE
January 2021 - September 2021
MY DESIGN PROCESS
INSPIRATION
CONCEPTUALIZATION
ITERATION
EXPOSITION
USER RESEARCH
AFFINITY MAPPING
USER PERSONAS
PROBLEM STATEMENT
USER FLOWS
WIREFRAMES
USABILITY TESTING
PEER REVIEW
PROTOTYPE ITERATIONS
POLISHING UI DESIGN
INTERACTIVE PROTOTYPE
LOOKING BACK
USER RESEARCH
To begin, I made a survey of 15 generic health and wellness related questions. I shared the link to the survey on my social media, and got 32 responses.
Based on the project brief and survey results, I came up with a list of further questions for interviews to find people’s goals, wants, and pain points when it comes to health and wellness management.
AFFINITY MAPPING
Looking for common goals, needs, and pain points, I created an affinity map from the answers I got, grouping them together and analyzing the results.
INSIGHTS
-
People want to see all available times before scheduling an appointment
-
Online appointments are preferred whenever possible
-
People want a reliable source to look up health and wellness information
-
People need an easy way to improve wellness
-
People want to be able to find workouts based on specific criteria
-
People want to control which health records get saved and shared
POSSIBLE SOLUTIONS
-
A calendar showing all available time slots
-
A secure video chat with a specialist
-
Messaging system for non-urgent questions
-
Resources by health and wellness specialists
-
Profile page with specialist’s credentials, education, reviews
-
Tracking progress
-
Reliable resources
-
Filters to look up workouts
-
Preview of a workout
-
Easy add/share function
-
Scanner button to upload records
I turned my findings into user personas.
USER PERSONAS
Jane, 23 y.o.
"I know I should do more for my wellness, but I don't know what"
Needs and Goals
-
looking for a fun way to improve wellness
-
wants to get into work out routine
Challenges
-
doesn't know where to start
-
has a hard time finding motivation
Mitchel,34 y.o.
"It's a pain to get my medical information sent to my nutritionist"
Needs and Goals
-
wants to easily communicate with wellness coaches
-
looking for a better alternative to a personal trainer
Challenges
-
finds it difficult to share health records from his physician to a wellness coach
Laura, 45 y.o.
"Not all my medical information gets saved in a patient portal, and sometimes I am missing records"
Needs and Goals
-
wants to find a secure way to store her health records
-
wants to control what gets saved and how it is used
Challenges
-
has to bring lots of papers to different health and wellness specialists
PROBLEM STATEMENT
Users need a way to pursue their wellness goals by using one place to store and share medical records, connect with a specialist, and find wellness resources.
My vision of the project
As I was working through user personas and mind maps, I developed a fuller vision of my project:
BeWell - a web platform that helps improve wellness by connecting people with a wellness specialist as well as providing wellness resources to use on their own.
The main features I decided to work on are: wellness resources, scheduling appointments, and storing medical records
WIREFRAMES
Next was the step of creating low-fidelity and mid-fidelity wireframes. I had lots of fun working with pen and paper, then moved to Balsamiq.
Even though my project took a mobile version way, it is a responsive website, so I got to work with both mobile and desktop versions and think of how the elements would rearrange when changing screen sizes.
Even on this early stage I had to do a lot of iterations to make sure the flow goes uninterrupted. This showed me how important it is to not skip steps, start with simpler and less time-consuming design, and work my way up.
MID-FIDELITY PROTOTYPE
After I was satisfied with my wireframes, I turned them into a mid-fidelity prototype in Figma.
It was very exciting to see my project starting to come to life.
I recruited 6 participants of different background, age, goals, and needs to conduct usability testing. Usability testing sessions were incredibly useful and taught me a lot.
After I analyzed the results, I identified a few minor usability issues, such as: users couldn’t find the button to add a new record, users didn’t know what to do with “done” button, the process to add records wasn’t very clear.
USABILITY TESTING
As I was observing people interact with my prototype, I realized that scheduling the way it was designed didn’t make sense for many people. With the help of follow-up questions I found out 5 out of 6 participants would schedule an appointment through a specialist’s page, not through a specific scheduling section. I considered that a major usability issue.
This is when I once again saw the importance of testing, observing, and listening to the people who will potentially use your product. I felt inspired by this finding, because that meant the project gets to be more intuitive to users.
I created a new user flow and made the necessary changes in the prototype.
PEER REVIEW
I also shared a link to the prototype with my fellow students for additional feedback.
As I was the only UX designer working on this project, I knew there was a big chance for me to have missed something.
This peer review was incredibly helpful and contributed to further shaping of BeWell.
POLISHING UI DESIGN
Now that I had the prototype flows backed up by research, it was time for polishing the visual side of BeWell.
I created a style guide to make sure the design stays consistent throughout the website.
I also went through every screen making sure the design is accessible:
-
used labels instead of/ in addition to placeholders
-
made sure contrast ratio is sufficient
-
used multiple indicators of a state, e.g. color and size
-
created universal symbols across the platform
.png)
LOOKING BACK
Working on BeWell and getting to be a part of the whole journey from start to end was an incredible experience. The most important lessons I learned are:
-
Importance of teamwork. Even though I was the only designer on this project, I got to be a part of many teams: with my interviewees, user testing participants, fellow students, my mentor, and tutor. My project wouldn’t be the way it is without other people by my side.
-
Importance of listening and observing. Some major usability problems I wouldn’t have discovered by just talking to potential users. Every face expression or tone change is important in user research.
-
Importance of advocating for your users. As a UX designer, I learned to shift focus from what I think is good for the users to what users think is good for them. Any project has a way bigger chance to succeed if it is designed for real humans.
WHAT NEXT?
If I had more time and resources to continue working on BeWell, I would work on the following:
-
Add new features that I found of interest to the users during the user research, e.g. video chat with a wellness specialist.
-
Research the other side of the app - design the flow of a wellness specialist.
-
Collaborate with a developer to bring the project to life.