Pledge Health

Automated back office for healthcare practices and patients

Mobile and Desktop mockup for pledge health.

The company

With the recent increase in higher deductible rates in insurance plans, patients are starting to owe more out-of-pocket. As a result, a more significant portion of the bill falls under their responsibility. Studies have shown that the earlier the patients and members are informed about their rates, the more is the likelihood of paying earlier or at the time of service if given cost estimates. This is where Pledge Health comes into play. By working closely with independent practices and insurance companies,  Pledge Health automates benefits checks to verify patient insurance eligibility and benefits, generate out-of-pocket cost estimates, and promptly collect patient payments.

The Problem

The Pledge Health team is creating a Minimum Viable Product (MVP) and is looking for UX/UI input from Moment Studio. There is a seemingly endless supply of information spread among different entities, and it isn't easy to parse through them all and find the most relevant features to be designed.

The Process

1. Analysis of their current MVP, conduct the appropriate research and brainstorm ideas to implement into the project.
2. Synthesizing research and starting iteration for low-fidelity mock-ups.
3. Creation of Information Architecture, so content is adequately organized, structured, and labeled.
4.Final Hand-Off with feedback gathered from the clients and implementations made.

The Solution

My team and I were responsible for evaluating their current MVP to create a simple yet intuitive experience for both healthcare providers and patients. To match their audience's expectations, they will need a web design for both patients and practicesand a mobile version for patients only. Eventually, this project will be handed over to a team of developers for launching.

Role, Tools & Duration

UX/UI Designer in a team of three + Figma and Miro. 5 Weeks Project

Mockup of high fidelity wireframes.

01
Research

01.01. Website Audit

Initially, all the information we gathered had to be through screenshots of videos on the internet since no mock-up was available for us to explore. This step was crucial for us to assess their current product so that when we first met with them, we could have specific questions ready and communicate our thoughts accordingly.

Screenshot of old UI titles "Appointments" web page.
Screenshot of old UI of the customer web page.
Screenshot of old Ui of the payment web page.
Screenshot of old Ui of upcoming appointment web page.
Deconstruction of old UI elements.

By breaking their clinic website into elements and components, we could make a UI inventoryand see all thepossible routes to be navigated. This would help us create a style guide down the road.

01.02 Brainstorm Session

Once all of the explorations were completed, my team and I started to brainstorm questions that would need to be answered during our first meeting with the clients and get further information to help us understand their goal and target audience. This project is unique because it requires different MVPs for two different audiences and needs.

Sticky notes highlighting brainstorming session.

01.03 Insights

Our first meeting with the client was great to understand who Pledge Health is, what they would like the website and mobile platforms to convey, their competitors' pros and cons and what kind of experience they want to offer to their clients. Essentially they want to eliminate all unnecessary struggles patients and practitioners face during the confusing, complicated billing administrative process.

Insights notes organized.

01.04 Competitor Analysis

We analyzed three competitors to understand industry standards and common practices. We observed that there seemed to be a gap in their current website and mobile design around accessibility and documentation. By doing so, we could set ourselves apart, learn from others' mistakes and implement new ways to engage with our target audience.

Competitor Analysis table.

01.05 How Might We (HMW) Statements

Now that we could address clients' goals and needs, it was time to set some problem statements that would serve as challenges. We knew these challenges were hidden opportunities to create a welcoming space for "out of the box" thinking. But, ultimately, it would serve us as pain points to effectively convey our idea.
-Allow the user to see that they have an upcoming appointment?
-Allow the user to view previous appointments?
-Allow the user to view their bill?
-Allow the user to pay their bill in different ways?
-Allow users to see previous bills?
-Allow users to see all statements, including insurance breakdown?
-Allow users to auto-pay for appointments?
-Allow users to view plan details?
-Allow users to see services available for each clinic?
-Allow users to communicate with clinics for the upcoming and past appointments.
-Allow users to see individual/family full benefits (e.g.deductibles, copays, out-of-pocket)?
-Allow users to see the entire process from pre-visit to post-visit and billing.?

02
Iteration

02.01 User Stories

Moving along, we wanted to promote a concrete, realistic yet shared vision to our end-users. These would help us speak the target audience language and have a clear understanding of this project's scope. So we sorted stories based on what was considered low to high priority.

User stories highlighting priorities.

02.02 Site Map

The team and I created sitemaps as hierarchical diagram models to show related content and where they would best be applied. That would ultimately improve user experience and general SEO action for Pledge Health company. They are an essential step of the user center design as they ensure content is in places people would expect to find it.

Site map for patient mobile and web platforms and web for clinics.

02.03 Sketching

We looked at other applications, not necessarily related to this industry, but that shares similar features to create our first sketches of what the mobile and website would actually look like. Again, it was imperative to keep the design clean and straight to the point.

Sketches of possible iterations.

02.04 Low Fidelity Wireframes

We began working on low-fidelity wireframes that would resemble our final project. First, we worked on the web for both patients and practitioners since they were similarly structured. Then, we presented to the clients for initial feedback and comments.

On the other hand, the mobile version would represent obstacles that needed to be addressed with extra caution since there was less space to be used, and hierarchy was at its core.

Low fidelity wireframes for both mobile and web versions.

03
Design

03.01 Brand Platform

We needed to create a design system to have a collection of guidelines, principles, and relevant assets for our project.  The team and I started with Brand Platform to present the mission statement, our promise, our personality, and our attributes so that people could relate to us personally.

Image highlighting brand platform.

03.02 Moodboard

By gathering a collage of imagery from various sources, we would represent the visual aesthetic elements users would relate to our brand. This is deeply connected to feelings and emotions of being calm and trusted as there is lots of color psychology involved when interacting with a brand.

Visual representation of moodboard.

03.03 Style Guide

A style guide and component collection made the design process much smoother and faster. It helped make our screens cohesive and consistent throughout the screens. Users could trust the brand by using a friendly typeface similar to industry standards. Moreover, this would also help us designers further advance in our project. We did not develop a Logo as the Pledge Health team would have a separate group of graphic designers working on it.

Visual representation of style guide.

03.04 High Fidelity Wireframes

Our team gathered all the information and material collected to create the High Fidelity Wireframes for patients and practitioners. We wanted to make sure that the product conveyed a sense of polished, mature feel so that users could feel credibility and trust when using it.

High fidelity mobile upcoming appointment screen.
High fidelity appoitment history screen.
High fidelity payment mobile screen.
High fidelity verify mobile screen.
High fidelity web payment due.
High fidelity web appoitnment screen.
High fidelity web user screen.
high fidelity web screen unpaid version.

04
Handoff

We did not communicate directly with the development team. However, we wanted to make this transition as smooth as possible. Therefore, along with the deliverables, we made handoff annotations. The annotations are to further aid communication among stakeholders, developers, and future designers who will eventually work on this project.

Handoff high fidelity mobile.
High fidelity web screens handoff.

05
Takeaway

The Pledge Health company is creating an end-to-end product that will soon help many practitioners and patients navigate through the challenges of medical billing. We made several mistakes throughout the design process, but communication was vital to readjust and move on quickly.It is interesting how simple design decisions could be so meaningful for people on the other end. That is why ideation and iteration were fundamental to see all the possible solutions we could come up with. Also, preserving the reputation of one’s company is unquestionable as they are dealing with sensitive information from people.We learned a lot from this project, but the most important was understanding that all design processes go through different phases at different times. At the end of the day, it is a matter of adapting to changes during distinctive situations.