Giving users an increased understanding of their health metrics and direct contact with their healthcare providers.
UX Designer, and Researcher
UX Bootcamp Final Project
Health Report is an application that records hospital visits and explains measurements that doctors use to assess patient health in general terms. This gives users a better understanding of how their health is progressing and a better relationship with their healthcare providers.
How might we create a product that helps users connect with their healthcare providers in a manner that makes information easily digestible and keep users emotionally calm.
This started off after I looked at my own discharge papers after a routine checkup. I realized that I didn't understand any of the core numbers and so I set out to find out how others felt. After doing a survey I found that most participants didn't understand those metrics either, and on top of that they viewed their healthcare providers as cold and uncaring. To combat we combined a design system that focuses o psychologically soothing users with features that provide a clarity of information.
Health Report uses data visualization and simple communication to demystify healthcare. It is an application for providers to help users look up their health records, prescriptions, and message their doctors. This combination provides clarity on the user's health, while also changing the paradigm of an apathetic and dreary healthcare process.
We asked users if they felt distance from their healthcare providers and the answer was an overwhelming yes. To solve this we included a chat feature that users could use to ask their doctors small questions for an allotted amount of time.
We asked users if they felt distance from their healthcare providers and the answer was an overwhelming yes. To solve this we included a chat feature that users could use to ask their doctors small questions for an allotted amount of time.
- 66% of participants would be interested in tracking their health metrics outside of the doctor's office.
- 66.7% of users stated that their doctors don't help them with their health goals.
Users reported their thoughts connected to healthcare illicit sadness, extreme dread, anxiety, stress, and worry.
We asked participants what features or types of information they would like to see in a healthcare application. They suggested clear and easy to read aftercare options, blood sugar tracking, and the effects of mixing their medicines.
Apple Health: The UI and metric representation is aesthetic and simple.
ADA Healthcare: This app has thorough descriptions of user symptoms.
MyChart: As the standard provider communication app, MyChart helped us determine key pain points.
Fitbit: This app inspired future iterations such as wearables and goal setting.
The first idea I had when hearing about users feeling dread and emotional dysregulation was creating a safe space. To achieve this, I paired colors that are psychologically calming paired with a typeface that users are very familiar with.
I named this user after my favorite television character, Bob from Bob's Burgers. His pain points are a summary of the issues that were reflected by participants in the survey. Having him as my north star helped me think of simple solutions to their problems.
As I worked with my mentor, they mentioned the need for multiple user stories as a way to flesh out features for the application. With this in mind, I decided to solve for the user stories by creating user flows that display the user's action step by step until they achieve their goals. This helped me create an MVP that didn't add any extra steps or features.
After creating five user stories, I decided to focus on one main task flow that I tested with users later on.
Wireframes & Initial Iteration
My initial inclination was to keep things simple by providing users a general idea of where their metrics are compared to the baselines of average the healthy person. I later found a glaring issue with this as I continued into digital wireframes.
After sketching features on paper, it was time to make simple representations on Figma. After doing this, I submitted these ideas for review with my mentor and a group of colleagues. I received great feedback, noting that the representation of each health metric was monotonous and the large blocks of text were overwhelming.
I pushed through V1 of the product to test some changes I made to the digital wireframe. After creating better data visualization, I received a much better reaction. I also received much needed feedback on my use of color and navigation with users reporting accessibility issues and misunderstanding the prescription toggle at the top of the dashboard.
The first goal after receiving the last round of feedback was making sure that everything was accessible. For my headers and callouts, I used a much darker green that was soothing to the eye, yet still contrasted well against a white background. I then found a tertiary color and restructured both the dashboard navigation and bottom navigation to create a standardized recognizable system.
As I looked for solutions to creating clearer information for my users, I looked at other apps to see how they deliver good or bad news. I thought this would provide insight on how to communicate whether users are healthy or not and provide clarity on their health metrics. I realized that simple iconography would do the trick and added a green check mark giving users a clear bill of health. I then added graphs that better visualized where users compared to their healthy peers.
This project was a great stepping stone in learning how to present information in a scannable manner. I used subheadings and toggles that allowed users to hide information that they would deem not useful. I also spaced out cards and separated callouts for users to clearly see where they can get more information.
Looking at core issues from multiple viewpoints
This project was sparked by a passion of mine to improve the healthcare system, however as a designer I learned to think of the whole system and not just the patient. I learned to think of the data inputs that hospital staff would have to upload for each patient. The message rate between patients and doctors, and the psychological needs of the users themselves.
UX Designer & Researcher
June - August 2022
For my final capstone project, I wanted to address an issue that I found in our healthcare system, which is a lack of transparency. Health Report is an application that records hospital visits and explains measurements that doctors use to assess health in more general terms so that users are better able to utilize this information.
Health Report uses data visualization and communication to demystify healthcare. It is an application for providers to help users look up their health records, prescriptions, and message their doctors. This combination provides clarity on the user's health, while also changing the paradigm of an apathetic and dreary healthcare process.
The survey focused on the emotions surrounding healthcare, as this was something that I felt was a barrier in communication between patient and healthcare provider. My findings suggested that the emotions were mostly negative, and patients felt isolated and on their own when it came to their healthcare.
After learning these main points, I dove deeper and asked users to describe in their own words what emotions arise when they think of healthcare and the doctor. These are their direct quotes:
This information was shocking, and so the goal became to bridge the gap in communication between patient and doctor. This was to address the emotions that arise with users and provide them with the information that they were looking for.
For the competitive analysis, I looked at four different applications in the healthcare space. I wanted to have a holistic look at different services that patients would feel comfortable using and not just focus on services provided by healthcare providers. This would then help Health Report be more familiar to a greater amount of users and include more affective design patterns to the project.
The first application that I looked at was the MyChart application powered by Epic. This is the standardized application that healthcare providers in Ohio use to get in contact with their patients. This application was my direct competition, so I had to make sure to get a thorough look at its strengths and weaknesses. To achieve this, I began doing a SWOT analysis on the competitor.
After completing the SWOT analysis on My Chart, I turned my attention to companies and applications that weren't my direct competition in order to look for solutions and design patterns that could be experimented on.
Apple Health is a health tracking service that is provided on every iPhone. Along with this brand recognition, it also provides measurements on users' health in a very digestible and bite-sized manner. With this in mind, I used this application's design pattern and data visualization as a blue print for my final design after the initial iterations of the application.
In a similar vain to the Apple Health app, FitBit provides users with visualization of their bodily measurements. However, in this case, it requires the purchase of a watch. I saw FitBit's data visualization as something to take inspiration from as a manner of communication that has widespread popularity.
ADA is a directory that takes users' symptoms and gives out possible causes. This application gave me the idea to include a directory or search function for the application. It's UI is also very fresh and has a lot of white space, providing a great deal of breathability, which most users find refreshing.
With my research complete, I used the average demographics of my research group to put together a persona that I would keep in mind while creating the application. In this case, it is Robert Belcher (no relation), a 26 year old chef. After creating the persona, I also took a look at their empathy map in order to get a better sense of their thoughts and feelings.
After developing my empathy map and persona, I looked at the scope of the project. These tools were integral to my design thinking, as over time, I would return to my user stories to guide my decision making. I made five user stories to ensure that I covered as many edge cases as possible.
After finding out what our goal was, I looked to make the user flow as simple as possible. I did this in order to capitalize on one of the faults that I found within the MyChart system: specifically how confusing the navigation was.
I then went on to complete user flows for each user story. In this case, I want to highlight the main user flow because it serves as the backbone of the following stories. This flow continuously changed throughout the testing process to become more refined and straightforward as I found out what users liked and disliked about the process.
Prior to sketching, I established a site map that would serve as my base for ideation. Ensuring that each screen was thought out, I aimed to make the site map simple in the same vain as the user flow.
With a few ideas in mind, I sketched a few iterations of the design system assets. I found that sketching with the atom methodology in mind helps create a design system and a more scalable product.
I heavily focused on the card system that I would implement. On the left, you can see that I was figuring out the auto layout of the card and how each element would fit together. The middle and right pictures are sketches done after the first wireframe, as I had to refine the visual hierarchy and data visualization of each screen.
The digital design process began with wireframes, followed by a series of testing and iteration. With the idea of a card system mapped out, I put it to the test. I also did research on the health metrics that I wanted to explain for the body copy. I used Apple Health's design pattern as it allowed for a lot of negative space. I then added the card system on top of this so users could expand or hide any information, giving them a sense of control while tidying up the design.
As you can see, the wire frames focused on the idea that users could get all their information in card form and looked to explain the medical information as thoroughly as possible. While this form of communication was very insightful, it did not test well because users felt intimidated by the large blocks of text in front of them. It was at this point that I decided to take a course on data visualization in order to broaden my perspective and increase my ability to communicate.
I began my first round of user testing right after finishing the wireframe because I didn't want the brand to distract users from any shortcomings in the application. I tested the application with a simple prototype, asking two users to move from screen to screen and give me their thoughts. I would do a specific timed test of user stories in later iterations. I compiled a list of quotes from both my participants.
With the initial reaction to the prototypes, I now wanted to focus on fixing two main issues. The first issue is the big block of text that is making the information hard to interpret. I looked for solutions in different forms of communication and decided that I would need to learn how to visualize data. I took a course on story telling using data visualization and went on a tutorial spree to learn how to build the graphs you see in the solution. The second issue is that there was no way to contact the doctor. If I was to be competing with the application of MyChart, I would have to add a messaging system. This is where I made an error, as I saw that users wanted this function in their interviews, but I was stubborn and didn't add it in until the third iteration.
Before I would change the wireframe, I tackled the brand of Health Report in order to present it in the next user test. The goal was to ease the negative emotions found in the research. To do this, I chose the most common font on the apple platform: SF Pro display. This was done to make users comfortable with a font that they are used to seeing. AS for the color scheme, I had to look at the other applications and saw that three of them favor the use of blue. In this case that would exemplify trust, however it may also be a reason that users felt a sense of coldness while using these applications. I opted to use green in order to promote the feeling of health, nature, and growth. Green is also known to be a calming color, counteracting some of the emotions that participants talked about in the the survey.
After adding the brand to the prototype, the application felt very refreshing. I wanted to test the user stories themselves, and so I split the screens into the different user stories. This way, I was able to test which part of the application users would have trouble figuring out and fix each flow one by one, rather than having to fix the product as a whole.
I tested participants on how long it took them to complete each user story. I then averaged the times to establish a base rate for the general population.
After the testing, I sat back and looked at the times and considered the proper length, depending on the amount of screens and how I saw my two users interact with the application. Overall, their reactions improved from the first test, but I found a significant issue with the 3rd user story. This user story was where a user would set goals for their health. Both test subjects were confused on how to operate the goal setting system, so this had to be revised. For the fifth user story, I couldn't test it specifically because I was unable to get a doctor to be my test subject. This may be a blessing in disguise because it allowed me to consider this app in a completely end-user facing perspective. With that, I have changed my final user story to include the messaging portion of the app.
With the second user test came both validation and the need to revise some aspects of the application. I wanted to address some of the times you see above, and make changes to improve usability and accessibility. The first couple changes can be seen from the main screen. I changed all the titles from a light green to the dark forest green to increase the contrast ratio to 6.3:1, which passes the accessibility test. The second change was to the scope bar. I figured the main issue people had in finding their prescriptions was because the previous scope bar was not highlighted or large enough to make an impression on users. In this case, I wanted it large and bright in order to draw users attention.
I also decided to alter the spacing on my cards in order to give a better sense of space, so I increased space between items using auto layout from 20 to 30 pixels, which really improved the look of each card. The other changes I made were specifically to the task manager side of the application. My previous iteration had focused on the measurements of each of the tasks, but did not highlight the tasks themselves.
I made the "Set New Goals" button much larger, and I made tracking the goals a daily task. This would encourage users to check the app every day, while marking off tasks in their checklist.
With the final screens out, I found that each of the user stories was fulfilled. After the third iteration, I realized that design is never over. It only makes sense to continue to improve through more and more iterations.
This project has taught me several lessons, and with that said, there are still some points of this project that could be improved. Below are some points that should be considered for future changes.
This project will only improve with feedback from the community. If you are interested, please try the prototype for yourself and reach out to me via email or LinkedIn!