Healthcare app concept /Prototyping & Interaction Design

Prototyping Design: Project Overview

Goal

Design a mobile application that will allow individuals to manage 5 aspects of their personal healthcare efficiently: manage appointments, order medication, pay bills online, access test report, chat with care team.

Process

Designed a healthcare application prototype by creating key user flow architecture and minimal design principles for users, informed by usability testing.

Role

UX Designer - All aspects of this design, were created by me, the primary design tool being Figma.

Jump to:

Competitive Analysis / Information Architecture / Usability Test /

Hi-Fidelity Prototype / Key Takeaways and Learning

DESIGN PROCESS

Design principles I followed:

Put usability first.
Information architecture should be intuitive, navigation persistent.
Use familiarity and actively avoid lorem ipsum content.
Minimal scrolling

Process Overview:

Research & Discovery
Information Architecture & User Flows
Sketches
Usability Test
Wireframing
Hi-fidelity prototype

Constraints:

Limited Time

Project Duration:

2 weeks

Tools used:

Figma
Pen and paper sketches
Material 3 Design Kit
Clay 3D mockups (plugin)
Blush (plugin)
Iconify (plugin)

Research & Discovery

Conducted competitive research of applications like myHealth Stanford, Practo, 1mg, Apollo, CVS to understand commonly used healthcare information architecture, user flows, decision maps, and so on.
- Conducted heuristic evaluation of systems (Molich and Nielsen)
- Focused on layout, visual design, UX Design, and key features

Competitive Analysis

Due to time constraint, I made a list of features I could keep in my designs, while following design principles.

Feature decision map

While I worked on the information architecture and planned features, I kept track of two users and their needs.
- To support this, I maintained an empathy map to lay out the Says, Thinks, Does, Feels of these two user profiles.

Empathy map

Information Architecture

Based on data from competitive research and decision mapping, I created this information architecture:

Sketches & Paper Prototype

Based on the user flows, I set to work on sketches and also created a paper prototype for the Messages flow.

For this case study, I will be focusing on the Billing flow.

Sketches for the Billing user flow

Feature Highlights:

Usability Test

I conducted a usability test with 5 participants with the sketches as a clickable prototype on Figma.

Findings:

Participants were not able to click the Details button easily. The close proximity to the larger, more prominent PAY NOW button was leading to the participants clicking the wrong button.

To combat this, I changed the position of the Details button in the wireframe, updated the name to View Details. Clicking it would progressively disclose the desired information.

It was not immediately evident to the participants that the first two payment options were saved credentials, and therefore quick payment options.

To address this issue, I created a visual representation of the saved cards and created a clear demarcation between saved and unsaved options.

Wireframes

I created the wireframes for the Billing flow on Figma. Having sketches ready saved a lot of time.

Hi fid

Hi-fidelity prototypes

I converted the wireframes to high-fidelity I converted the wireframes by updating text, color, and button styles using Google's Material Design 3 Kit that aligned with the visual aesthetic decided at the beginning of the project.

On the homepage, the user clicks the Billing button.

Step 1:

User reviews the invoice details and clicks the primary CTA: Pay Now

Step 2:

User reviews the payment method and clicks the primary CTA: Confirm Payment

Step 3:

User enters OTP code to complete verification and clicks primary CTA: Verify

Step 4:

User reviews the payment success details and clicks the primary CTA: DONE

Step 5:

With the delivery deadline close, I had switched to rapid prototyping.

Based on feedback, I created this final screen which showed the bill being reflected as PAID, earlier it had been shown as PENDING.

learning

KEY TAKEAWAYS & LEARNING

When time is a constraint, the first order of business should be to try and see what others have done and try to learn from their successes and failures. This provides a quick and easy framework to build on.

This prototype is a personal project and is not for commercial use. As next steps, I would like to explore further:

Use an established design system like Material Design components to update the UI.
Incorporating a conversation design flow for the appointments requirement.
Integrate a method to connect insurance provider.
Add a functionality to sort through available physicians by distance, specialty and so on.