MedCharge Hospital Mobile Payment App
Project Overview
MedCharge is a convenient mobile app for paying for medical services in Japanese hospitals and clinics. Busy medical patients are often stuck in long waiting rooms waiting to pay for their visit. I set out to design an app that allows patients to save time by making mobile payments. This case study will primarily focus on the checkout user flow.
Design Process
This chart illustrates the design process used while working on MedCharge.
User Research Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was busy hospital patients who don’t have the time to wait to pay for their visit.
This user group confirmed initial assumptions about hospital patients, but research also revealed that time was not the only motivator, some simply wanting the convenience. Other user problems included downloading the app at the hospital, privacy, and language localization.
Discovered Pain Points
Time: Most hospitals and clinics require patients to stay in a waiting room to pay their bill
Accessibility: At many hospitals, you can only pay in cash. A digital alternative would allow for screen readers etc.
Context: There is a disconnect between the paper bill being paid and the user’s entire history.
Personas
An example of one of the personas created for this project.
Persona Summary
Watanabe-san finished her health checkup and was told she could use the MedCharge app to pay for her visit. Excited by the idea of saving time, she decides to give it a try and downloads the app. But for most of her life she has conducted business in cash and has a lower digital literacy. Downloading the app is time consuming. The signup process is overwhelming.
Takeaway
Improve on-boarding. Simplify the signup process overall. Make it possible to pay without signup and include the option to signup later.
User Journey Map
An example of Watanabe-san’s user journey.
Paper Wireframes
Taking the time to draft iterations of each screen of the checkout flow on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy “pay now” option to help users save time.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
1
On this step, the user is able to scan a physical receipt and proceed to pay.
2
This button is prominent and helps users quickly identify the next action.
Having several different methods of payment proved valuable to different types of users with varying digital literacy.
1
The user can use a credit card, scan a QR code with services such a LINE pay and PayPay, or request a paper bill to be mailed to their home
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was skipping signup and immediately progressing through the “pay now” process.
Mockups
Early designs allowed for some customization, I added additional brand colors, and began to divide things out with different background colors.
Mockups
The second usability study revealed frustration with the checkout flow. to streamline this flow, I broke down the address and payment info steps under one “Payment Details” screen.
Key mockups
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for mobile payment. It also met user needs for a clearer process and the ability to use non-digital payment methods.
