Designing for Jasper

A design of Jasper Financial's Platform

Before the Appointment

Project Overview

From June to August 2020, my team and I at Jasper Financial designed a webapp to be used in healthcare offices. I was part of the team that was responsible for designing the provider dashboard, which would be the platform that office managers (particularly in dental offices) would use to do their everyday tasks.

During my time at the internship, I was able to take part of designing two elements of the provider dashboard for a dental office: a directory of a list of patients, as well as profiles for both the dental practice and its dentists.

Time duration
Jun. 2020 - Aug. 2020 (2.5 months)
Role
User Research, Design, UI Design
Tools used
Figma
Deliverables
jasperhelps.com (In development)

The Problem

Our Goal

Through our research, we found out more about the tasks of office managers and what kind of work they conduct on a daily basis. Office managers often have to juggle the tasks of managing their staff and patients, as well as making sure that the office runs smoothly. With this amount of responsibility, they need a management system that is able to fit their needs and provide a more seamless work experience. 

Our goal

“Provide relevant action items for office managers, relevant analytics, without creating additional friction to their day to day work.”

Our Patients

Users and Audience

For the webapp, our primary audience in particular were office managers, who are the people in charge of such offices. They manage a team of staff members and conduct administrative work. Our secondary audience is dentists, who may access the webapp via a mobile platform in order to keep track of important analytics and information pertaining to their own individual practice. 

In order to better understand our audiences, we conducted research and created user personas. As many office managers are often middle-aged women, we knew we had to keep that into consideration when designing our platform to make it intuitive and easy to use.

Office Manager Persona
Dentist Persona

We also created a user journey map in order to dive deeper into the user's experience and the pain points that they encounter. From marketing the practice of the office to the end of the journey where the office receives the payment, many stages lay in between, each with its own discrepancies. 

User Journey Map

Process

Understanding our Audience

For our research, we mainly focused on the office managers. We sent out a survey that received a little over 20 responses and conducted a series of around 15 phone interviews. Due to the time constraints of the internship program, we did not have much time and were not able to gather as many responses as we thought we would.

Nonetheless, through our research, we found out that many users were still using office management software that did not perform to their needs. Through the survey, we discovered that there were gaps in softwares such as Dentrix Ascend and Eaglesoft that many offices were using. Users expressed a desire for a software that:

  • Helped to schedule patients
  • Included a billing/accounting feature
  • Had an overall ease of use

As we went through the interviews, we found out that many office managers often spent a lot of their time explaining insurance to their patients, because their patients often do not understand how insurance works. Because there is a disconnect between the patient and the understanding of how their insurance works, this was a common pain point that was expressed throughout the office managers.

User quote

“I receive so many calls complaining about their bill, when in reality, they should be complaining to their insurance company. I spend a lot of time explaining to them how insurance works.”

User quote

“I spend a lot of time explaining with the patients, especially since others in the office were not familiar with insurance either. I would do an insurance breakdown for every patient.”

Ideation and Sketches

After synthesizing the data from both the interviews and surveys, we were better able to understand our audience and the pain points they experience in their jobs. Through the creation of a provider dashboard, we wanted to be able to create an overview that would display:

  • an analytics of payments
  • an appointment management system
  • and a directory of patients.

After analyzing the data results and creating an information architecture, we felt like these proposed design solutions would help to solve the user’s problems.

My role in particular regarded the design of the patient directory and the overview of the provider dashboard. After taking a look at all of the pain points, I drafted up some sketches to help solve those user problems.

Provider dashboard sketch

With my initial sketches, I wanted to organize information in an easy to understand format, using strong use of the grid in order to display key information. I included:

  • appointment statistics in order to keep track of how many appointments the office has had/has had cancelled over a duration of time
  • a schedule that lists the appointments that the office has for the day
  • and other information about revenue and patient information that may be insightful for the office manager

For the patient profile directory, I implemented a pretty standard design. As the target demographic is largely middle-aged women, I wanted to keep it intuitive and easy to use. The directory is an important platform for the user to keep track of patient information, such as appointment history and documents pertaining to a particular patient. 

Patient profiles sketch

Next, came low and mid-fi prototyping. During the whole process, I received a lot of feedback from my team each day, which resulted in multiple iterations.

Low-fi/Mid-fi

Round 1

After discussing with my teammates and project manager throughout the week, I began to iterate on my ideas even further. Through the feedback, I realized that certain information within the overview was not necessary. I removed the doctor’s profile on the overview, as many offices have multiple doctors, and could be better used elsewhere. Instead, I included a space to view pending notifications, such as when there is an appointment that  needs to be confirmed, or a payment that needs to be refunded. 

I also included a graph that would break down the office’s patients and what they came to the office for, as well as a space to view their most recent patients. 

First round of sketches for the dashboard

As for the patient profiles, I worked on further developing the actual page for each profile.

I included four distinct sections within the page, such as:

  • a section that held all of the important demographic and contact information
  • a place to view the patient’s past and future appointments
  • a space to write down notes pertaining to a certain visit
  • a place to store and view important documents such as onboarding forms or insurance information
First round of sketches for the patient profile

Round 2.1

During this round of iterations, I rearranged some features of the overview. After discussing with my team, we decided to implement notifications another way, so I decided to include a to-do list feature called “Today’s Tasks” to help the office manager keep track of important action items. During this week of feedback, my project manager wanted me to focus more on integrating the Revenue Cycle Management (RCM) more throughout the platform.

As a solution, I implemented a feature where the office manager is able to view the payments that have been made or are being made to the practice. I also integrated it within the patient directory as well so that office managers are able to directly see the status of the patient even just by looking at a list. Furthermore, when the office manager clicks into a certain profile, they can even see a more detailed timeline and progress bar of the payment as well.

I also revisited the patient profile page and moved the “Notes” section to become a button instead in order to highlight the action items that need to be done for a particular patient.

Iterated dashboard
Iterated patient profiles

Round 2.2

I ended up iterating again and going back to some features that I had lost in the overview, such as the “Patient Report” section and the overview of recent patients. After getting some feedback from my team, we agreed it would be better to move the appointment analytics to a new section that would focus on the entire practice, which I would soon create and call the “Practice Profile.”

I also added a place for action items for each patient to further highlight the patient's journey within the office, ensuring the most efficient check-out process. Lastly, I removed the profile pictures for all of the patients, as we decided that we did not want to ask for a photograph of themselves during the onboarding process.

Dashboard
Patient profiles

Round 3

One of the last things that I needed to complete during this round of iterations was to come up with a design for the practice’s profile within the platform. 

Again, I wanted to integrate the RCM in this page, as this would often be the only page that the dentists at the office would look at. There is a section that would show analytics of payments, as well as a portal for all of the dentists that practice in the office.

Each dentist’s profile would have the following:

  • Contact information
  • Appointment statistics pertaining to their own practice
  • Patient and procedure statistics
  • A section to view all of their pending and complete payments
  • A section to view all of their past appointments
  • Graphs displaying revenue information and patient statistics
Flow for dentist profiles

Needed: Appointment Confirmation

High Fidelity & Design System

After a few rounds of iterations, we moved towards integrating a new design system that my team and I had worked on to rebrand the Jasper identity. Throughout the internship, we worked gradually to rebrand Jasper in addition to our user research and prototyping. 

When we were making the final decisions on the logo, we knew that we needed to pay close attention to the colors that we chose. By opting for having the green as our main color and pink as an accent, we were able to create a logo that represented Jasper, but also represented the healthcare industry as well. The top of the logo creates a heart, which is a common trope in the healthcare industry, but as a whole, you can see a flower within the letter “J.”

A few elements from our design system

The Finished Product

The Next Appointment

Outcomes and Lessons

As this was my first UI/UX internship, I learned a lot about working in teams with other experienced UI/UX designers. I often felt like I was the most inexperienced out of the group, but it pushed me to do better and tested my limits as a designer.

As I also worked with a project manager, I learned to never be afraid to ask questions when things were unclear. And because this was a remote internship and we only met for an hour everyday to discuss progress, there would often be some sort of ambiguity regarding a certain task. 

I also learned to work in cross-functional teams, where both the design team and the development team met to discuss progress and what designs would/would not be feasible. It was really interesting to learn and see how the designs could come to life through the developer perspective, and was definitely something that I was never able to experience while learning UI/UX by myself.

Through this experience, I also was able to be a part of the user research process in which I learned a lot about user research and synthesizing data through my teammates and its implications in a large project such as this. I was not as comfortable with user research before this, so it really put things into perspective in a real-world context, which made things easier for me to understand.

Working at a startup, it was a fast-paced environment that really pushed my limits as a designer, but it was a great learning experience for me to experience UX design in a more professional setting. Overall, it was a lot of firsts for me, but during this whole process, I learned a lot about the user experience design journey and have become more comfortable in my skills as a UX designer.

Next Steps

Much of my time spent at Jasper was iteration design ideas and prototypes, and there was not a lot of time dedicated to usability testing due to the time constraints of the internship. Although we had extensive interviews with many people, we were unable to test out our designs to see how they would perform to office managers who would use the platform on a daily basis. If we had more time during the internship, this would definitely be something that I would have wanted to do in order to grasp a better understanding of how a user would approach the designs.

Because so much time was spent iterating, it also did not leave much time to prototype the screens with interactions. I’ve always wanted to learn more about prototyping and animating screens since I come from a visual design background, but unfortunately we ran out of time. And because the developers were also on a time crunch, they would not have had the time to implement the interactions either. However, to improve my prototyping skills, I hope to take my own personal designs and learn how to animate them on my own time.

Final Thoughts

Working with Jasper provided me with some great professional design experience, and throughout the whole process I was able to learn more about their product and their goal to provide accessible healthcare. I am really glad that I was able to be a part of such an integral time in the company, and I’m thankful for both my project manager and my teammates for making it such a pleasurable experience.