TotalHealth
A responsive web app designed for CareerFoundry UX Design Immersion course.
UX/UI Designer
THE CHALLENGE
Actively managing one's health often requires using several apps for different aspects of health. Users need a way to centralize all data and records in one place to streamline their healthcare.
THE GOAL
Simplify health management with a streamlined platform for users to sync their favorite health apps, track upcoming appointments, and organize medical records.
THE TOOLS
Adobe XD
Figma
Photoshop
UsabilityTesting.com
OptimalSort.com
THE PROCESS
INSPIRATION
Understand and observe existing health apps with Competitive Analysis & User Interviews
CONCEPTUALIZATION
Create a User Personas to better understand problem to be solved then create User Flows from this POV.
ITERATION
Transform user flows into wireframes then high-fidelity clickable prototype to conduct user testing and further refine design
EXPOSITION
Tell story of the design process, methodology, and evidence to support design decision in presentation
DETAILED CASE STUDY
INSPIRATION
COMPETITIVE ANLAYSIS
The results of my competitive analysis identified many highly-rated, direct competitors including: Fabulous, Recovery Record, Weight Watchers, Noom, Apple Health, Solstice Health, among many others.
However, while each app had its merits, I couldn't find a product available that gives options for customization while maintaining simplicity.
USER INTERVIEWS
Through user interviews and a user survey, I collected qualitative (interviews) and quantitative data (surveys) to understand which apps and features are most popular, gauge interest in an all-in-one health application, and pinpoint the common pain points.
View my detailed RESEARCH ANALYSIS
Organized by topic
Organized by types of feelings/statements
Next, I reviewed, dissected, and transferred relevants bits of information to individual post-it notes into an affinity map to visualize the results, which led to many valuable insights, including:
- Opinions on Existing Apps — Users base their opinions of apps on interface, accuracy, and details of metrics
- Apps & Devices — Most users of health apps use more than one. Apple Health and My Fitness Pal are among the most popular
- Feelings — There is a general ambivalence, leaning towards the positive side, about experiences with health apps
CONCEPTUALIZATION
USER PERSONAS
The inspiration phase helped me identify my target user as someone who is between the ages of 18 and 65 with an active interest in managing their health.
CHALLENGE!
With such a wide audience and large scope, I was having difficulty defining the Problem and Hypothesis Statements. The user personas helped, but I was still struggling with understanding which features would be most useful to the user while not including so many that the app becomes cluttered and confusing. This proved to be a continuing challenge, but I knew I could always go back to revise my goals, so I pushed forward with these working statements:
PROBLEM STATEMENT
Actively managing one's health often requires using several apps for different aspects of health. Users need a way to centralize all data and records in one place to improve and streamline their healthcare.
HYPOTHESIS STATEMENT
I believe an app that allows users to sync their favorite health apps they already use, track upcoming appointments, and organize all of their medical records in one application would streamline and improve the user's health management.
After establishing a working understanding of the problem to be solved and the users who would benefit from a solution, I identified a handful of tasks to help me focus on the most important features and created user journeys to imagine the emotional journey a user might experience.
USER FLOWS
This gave me insight to a few features that would improve the user experience, including a tool that allows users to view their progress and upload records by taking a photo on their phone.
These discoveries were valuable in the conceptualization phase, leading to more detailed user flows:
ITERATION
SITEMAP
With a my concept more solidified, I began iterating possible solutions by building a site-map. To reduce the cognitive load for users, I structured the website hierarchy into four main categories: Account, My Data, My Calendar, and My Records. This way the user only needs to choose from a few options on each screen.
WIREFRAMES & PROTOTYPES
The results of a CARD SORT I conducted with Optimal Workshop mostly confirmed my instincts organizing the app features into the highest-level categories, which was a relief as I created my low-fidelity wireframes and prototypes.
CHALLENGE!
In sketching out my wireframes, I faced the same challenge again in deciding which features to focus on while maintaining simplicity to avoid overwhelming users. So, I focused on the most important tasks: adding new appointments, syncing with other apps/devices, uploading and sharing records, and viewing the progress chart. I had to put a few of my ideas, such as building a learning feature, on the back-burner for later iterations.
I continued onto mid-fidelity and high-fidelity wireframes, making adjustments at each level to clarify the user experience. Then, finally, I had my clickable prototype ready for user testing!
USER TESTING
I chose moderated remote and in-person testing methods to balance the ease of scheduling with remote participants and the advantage of being physically present to observe participants in-person USABILITY TEST REPORT.
I discovered I overlooked some major components to the navigation and user experience: feedback! Without confirmation that their intended task was complete, users were visibly unsure if they completed the given task. To reduce potential interruption to the user's flow, I opted for feedback via a snackbar.
This worked better because it returned the user to the screen they initiated the task on immediately, allowing them to continue onto their next task smoothly while still providing a subtle confirmation.
UI
Now that I had a tested and proven user experience that fulfilled my original goal to create a platform that helps users streamline their health management, I turned to designing the user interface to support the UX and create a design language system for TotalHealth. I established a color palette with cool greens and blues, which have a calming and trustworthy effect on users.
I wanted a font that was pleasant and calming, but very easily readable with just a hint of style. So, I went with one of my favorites: Century Gothic.
Splash screens
EXPOSITION
TELL STORY & PRESENT
It was very satisfying and exciting to see my design come to life visually with the addition of UI elements. Before packaging up my design for hand off, I reached out to colleagues via slack to solicit feedback on my design.
I received a lot of valuable insights from my fellow designers, plenty of encouragement. One observation was that my original home screen was a bit redundant with the tabs. So, I removed the tabs from the home screen only, and added a side bar menu for an alternate method of navigation that's tucked away unless the user clicks on it.
Another colleague pointed out that I had a search bar in the top navigation bar, but it was unclear what could be searched for and why it was on every screen. This is a perfect example of the power of another set of eyes on a design before finishing. I hadn't even thought about this!
I originally intended the search to allow users to find records more quickly, so I deleted it from the top bar and replaced it with the heart from the logo. Then, I put a search field on only the Records screen instead.
I created the full DESIGN LANGUAGE SYSTEM document and packaged up my deliverables and assets into a folder for hand-off. Last but not least, I reviewed the project from start to finish to present in this case study!