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!