Blazing Audio

Developing Patient Dashboard and Onboarding for Healthtech Tool

UI/UX Designer

August 2022 - October 2022

Tool

Figma, FigJam

Methods

User Flows, Wireframing, Prototyping, Usability Testing

Client

Blazing Audio
Session results dashboard for Aurasense device

Blazing Audio is a healthtech company that is creating a tool to help physical therapists better assess the progress of their patients. The product, called Aurasense, uses sound waves to create a projection that a user can feel. As long as the patient has the product, they can participate in these sessions remotely, allowing for more consistent tracking of their therapy progress.

Collaborated with two Springboard students and the CTO & President of Blazing Audio for this project.

Main Responsibilities:

  • Spearheaded creation of onboarding and session user flows
  • Established color palette for design
  • Designed high-fidelity mock-ups of session results and resources pages
  • Presented results with client and lead discussions on designs

Problem

As an early startup, Blazing Audio has no process in place for how their users will track their progress and wants to develop what the experience for their users will look like.

Aurasense is a product that is still in development and has no real users yet. Therefore, the main challenge came from taking an ambiguous idea and creating a concrete project plan with a limited timeline.

Results

Designed a website dashboard experience for a patient using Aurasense. This dashboard allows the patient to manage their sessions, view results, and track their overall therapy progress.

Empathize

Understanding the Product

To start off, the team and I needed to get a better understanding of the product and what business goals the company had for the future. I helped lead these exploratory meetings so that we could understand what the client was expecting and where we could provide value. The client wasn't as familiar with where UX could provide help, so we explored the options together and discussed where we should best focus.

  • Suggestion of Desktop: We discussed with the client the different platforms where we could design this experience. The client expressed interest in using the metaverse as a waiting room where a patient enters their sessions. However, thinking about the users who are possibly older and with hand injuries, we suggested that the use of desktop could be a better, more efficient experience for users as they would be more familiar with usage.

Expert Interview

We conducted an interview with an expert, an occupational therapist of 22 years, who was able to help us get a better understanding of the patients who may use the Aurasense tool.

  • Common Patient Goals: This would depend on diagnosis, but the two main goals are doing certain activities without pain or obtaining full range of motion.
  • Example Injury and Goal: First Dorsal Compartment Injury (pain in tendons from wrist to thumb). Can make simple activities such as buttoning up a shirt or using a cellphone difficult without pain and that could be the goal of the therapy

Define

User Flow

With the Aurasense platform still not developed, there was not yet a framework for how a user will interact with the tool. I decided to lead the development of the main user flow of someone interacting with the onboarding of the platform and going through a session. Since our main challenge was trying to figure out where we could provide the most value, this exercise allowed us to take a step back and look at the overall interaction first.

I presented the flows to the client and we collaborated on a few adjustments on the patient side of the onboarding flow as he was able to give more clarification on how the referral and consultation parts would work. We discussed what was important from a business point of view for his MVP and determined that the dashboard is the pivotal point of interaction a patient will have with the platform. He was curious on how to develop an experience where the patient will get the information they need, but in an encouraging way so that they can understand their progress.

Ideate

Now with our plan in mind, we conducted a brainstorming session over Zoom, sketching some initial ideas, and then moving to Figma to create our wireframes.

Wireframes

For the wireframes, I lead the design of the session results page and a health resources page. This image illustrates the iterations for the results page as we ideated together. The top two images showed the addition of more progression charts since that is the main focus of the page. Next, I looked to iterate on the past session dates as they were taking up a lot of space on the page. I decided to implement a format similar to an email inbox, a pattern that users would be familiar with. Lastly, I iterated on the types of graphs being shown after consulting with the client on what information needed to be represented.

Progression of wireframing for after session screen of Blazing Audio.

Low Fidelity Prototype & Testing

We worked on creating a clickable prototype of our wireframes in Figma and conducted 4 remote usability tests to test for overall flow and comprehension of the pages.

Main Insights:

  • Scheduling after a session: Users expressed that after a session was finished, they would expect to either schedule their next session or manage their appointments. This brought attention to the importance of the schedule in the design.
  • Importance of progression imagery: Users mentioned that they appreciated use of imagery to understand their progress. One user, who had done physical therapy in the past, mentioned how she wished this was something that existed when she had been going through it. This statement helped to validate that the design is in the right direction to encourage user's progress.

Adding Fidelity & Changes

High-Fidelity Mock-Ups of Blazing Audio.

Blazing Audio Color Palette

Color palette for Blazing Audio.

Since Blazing Audio did not yet have an established style guide, I spearheaded the creation of a color palette to use for our designs. I based the main brand colors off of the logo that the company currently has and added some secondary colors to add to the elements. I made sure to check for color contrast and color blindness comparisons to keep accessibility in mind in the design.

Changes for High-Fidelity Prototype

From the insights of the low-fidelity tests, I decided to make two main changes for my high-fidelity designs.

Changes Made:

  • More Prominent Scheduling - During the usability testing, users expressed that they expected an easier way to access their next appointments. We originally had the schedule within the homepage, but users were expecting it to have a more dedicated area. In the high-fidelity change, I added a "View Schedule" CTA on the session results page since users wanted to view their next appointment after finishing. This button will lead to a "schedule" tab that now has its own section in the navigation.
Scheduling area change for after session design.
  • Clearer Progression- Since users expressed the importance of progression graphs, in the high-fidelity iteration, I redesigned the graphs to make them more prominent on the page with their own cards and with brand colors. I also made sure to include a percentage statistic so it is easier to understand the change over time. I also made the goal progress percentage more prominent on the page so that the user can see the change at a glance.
Graph progression change for after session page.

Solution

By the end of this project, we were able to create a high-fidelity prototype of the patient dashboard for the Aurasense tool. I presented our ideas to the client, walking him through the problem, testing results, and details on the final designs.

The client was enthusiastic about our results and expressed how we brought up design decisions that he hadn't even considered as part of his plan for the product. Since it is still early for the product, the client stated how useful these designs will be in explaining the concept of his product during his presentations. Once the product is further along, the designs will be implemented by developers.

Health resources recommendation page for Blazing Audio.

Next Steps

Future Recommendations

Although this project is finished, there is so much more that I would have liked to be able to work on if there was more time.

  • Scheduling Tab - After testing, we discovered the importance of the scheduling section for the users and decided to add in its own tab. However, due to deadlines, this feature was something we were unable to explore at this time. I would love to be able to take a look at developing this section and figuring out how it would be incorporated into the dashboard.
  • Measuring Success - Once these designs are implemented I would want to be able to run tests to understand the success of what we created. I especially would pay attention to user's comprehension of their progression and willingness to continue their sessions. I would be interested in seeing the differences in consistency between patients who use the platform and patients who just go through regular therapy sessions.

Final Thoughts

This project gave me the valuable experience of working with a start-up client and collaborating with other designers to create a final design. Since the product is still not created, there was a sense of ambiguousness and uncertainty in figuring out what could be done. I loved facing this challenge and working with the client to develop an experience that was most useful to him and his users in the end. Designing with business and product constraints in mind let me further practice what I have learned thus far and prepare me for the collaboration necessary for the next steps in my UX career.