Project Overview

Problem

Busy practitioners lack the time to hold their clients accountable for payments & to manually call them to schedule appointments. Clients need a more efficient way to get in contact with their practitioner & pay for their sessions.

Solution

Design an app for PsyBill that can efficiently allow users to pay their bills, communicate with their health providers, and schedule for future appointments.

  • Research

  • Wireframe

  • User Flow

  • User Persona

  • UX/UI Design

My Role

Project Duration

March 2023 - September 2023

“I am overwhelmed by my everyday problems and managing my payments on time is one of them.”

Persona

Craig Ali

Pronouns: They/them
Age: 32
Education: San Francisco State
Status: Single, lives with cat
Location: New York City

Bio

Craig has been in the tech field for 6 years now. Recently, he got a position as a software developer in New York City. Although it’s rewarding, Craig finds himself overwhelmed & stressed by the amount of work he has to complete on the day-to-day basis. Craig struggles to find time for himself & forgets to pay his bills from his therapist.

Frustrations

  • “Unfortunately, I am not very good at keeping track of everything I have to pay for.”

  • Doesn’t have the time or energy to look at bills

  • Often forgets to respond to his doctors

  • Making late payments

Goals

  • Be able to stay on top of everything, including payments

  • Maintain a healthy lifestyle, mentally & physically

  • Appeal to their management for a promotion

User Journey Map

Actions

Task List

Feeling Adjective

Improve

Get App

  • Download app from app store

  • Making an account

  • Link bank account/credit card for payments

  • Frustrated by the amount of information needed to make an account

  • Worried about bank/credit card information stolen

Provide security for the client

Explore Features

  • Changing accessibility options

  • Finalizing profile

  • Finding the bill statements & payments

  • Confused about the icons & each page

  • Over-
    whelmed by the features of the app

Make the pages flow nicely & provide easy-to-use navigation

Review Bill

  • Reviewing statements

  • Making statement changes

  • Anxious with the billing statement amount

  • Befuddled with the payment amount

Provide clients with option to speak with customer service

Submit Payment

  • Provide payment information

  • Confirming the balance due

  • Clicking submit on the payment

  • Unease with paying the amount on the statement balance

Giving clients option of payment when submitting

Receive Confirmation

  • Confirming the payment went through

  • Looking through email for confirmation on the payment

  • Relieved that the payment went through

  • Glad everything’s done

Able to receive confirmation immediately

Drafted up a homepage that would target user’s pain points to allow for a well-suited app. I prioritized the billing feature, inbox, and appointment reminder, so users can view important content immediately after opening the app.

Wireframing

Digital Wireframe

In the initial design phase, I made sure to base my screen designs from research findings & feedback from other app users.

The lack of using other forms of payment was a key user need when it came to billing apps.

Low-Fidelity Prototype

The low-fidelity prototype connected the primary user flow of paying the bill statement on the app. This prototype is used in a usability study with users.

View PsyBill’s low-fidelity prototype here

I conducted two rounds of usability studies. Findings from the first study guided me to create the high-fidelity prototype from the low-fidelity one. The findings from the second round of usability studies for the high-fidelity prototype revealed what aspects needed refining.

Usability Study: Findings

  1. Users want more payment options

  2. Users do not need a statement balance to pop up every time

  3. Users want auto-pay to be more noticeable

Round 1 findings

Round 2 findings

  1. Users had a hard time reading the words

  2. User found buttons & text to be inconsistent

High-Fidelity Prototype

The final high-fidelity prototype demonstrated cleaner user flows for making a payment for the bill. It also met user needs by proportioning all buttons & fonts.

View High-Fidelity Prototype here

Refining Mockups

The second usability study revealed small details that appeared inconsistent. To fix this, I made the font bigger & prioritized unity with the wordings on the page.

The usability studies also revealed how disproportionate the buttons were on the page. Therefore, I consolidated by making them look exactly the same.

Mockups

Accessibility Considerations

Sitemap

After completing the app designs, I began designing responsive websites. I created & used PsyBill’s sitemap to guide the organization across each screen device to guarantee a consistent experience.

Responsive Designs

The designs varied across multiple screen sizes: mobile, tablet & desktop. I optimized the designs to cohesively fit all screen sizes to fit the user’s needs.

Takeaways

Impact

The app, PsyBill, makes users feel heard & their needs met since the focus is to give users more time to do what’s important to them.

What I Learned

While designing the PsyBill app, I realized that even though a lot of effort is put into the wireframes, the high-fidelity prototype may not be the best. It’s the process of improving the design from usability studies that makes the app special.

One quote from peer feedback:

“I’m always forgetting where I put my medical bills in the house, so this is an amazing way of making payments!”

Next Steps

Let’s Connect!