Mobile App Design Healthcare

As part of the Health Center program, I worked with surgeons and nurses to redesign an mobile app that supports surgery scheduling and medical supply tracking. The original version slowed down workflows and contributed to annual waste of unused surgical tools.

$220K+

Annual Savings Achieved

35%

Supply Waste Reduced

30%

Efficiency Boosted

60%

User Satisfaction Increased

Role

Product Designer

TimeLine

Sep – Dec 2024

3 months

Tasks

Lo-fi to Hi-fi prototyping

User Research

Usability Testing

Cross-functional Collaboration

Team

1 PM

2 Researchers

1 Data Specialist

2 Designers

First

What’s the Problem?

The Health Center faces significant operating room waste due to complex surgical schedules, and PrepCard’s current version does not provide a unified solution. Our goal is to identify user pain points and redesign PrepCard into a more user-friendly tool that reduces unnecessary costs and improves workflow efficiency.

Second

Conduct User Interviews

To uncover user pain points, I conducted interviews with both surgeons and nurses and documented their feedback in detail:

What they liked
What frustrated them
What they wished for

In addition, I visited the hospital in person, immersing myself in their fast-paced environment to better understand their challenges.

"We need a centralized system where nurses can log and update supply data in one place, so we're prepared without relying on trial and error." — M, CSL Perioperative Services @ Health Center

"Preference cards are often inaccurate, creating confusion for nurses. Being able to update them in real time ensures each case has exactly what's needed." — P, Clinical Staff Leader @ Health Center

Findings

Key Pain Points

1. Who is the surgeon?

Nurses often don’t know who’s assigned, making it hard to clarify details.

2. What tool to prepare?

Surgeons don’t always update needs, so nurses lack prep details.

3. When to record tools?

Surgeons move quickly between surgeries, leaving little time to log tools.

Design Goals

Balancing Workflow
with Accuracy

From interviews and on-site hospital visits, I uncovered a core conflict:

The hospital’s rapid pace often clashes with the need for precise surgical tool preparation.

⚠️ This raises a key challenge:

How might we balance speed with accuracy?
How might we support both efficiency and safety in the OR?

Fast VS. Accurate

let’s make a change.

Third

The Solution

I want to solve the problems one by one:

For the three main pain points identified in the interviews, I aim to completely solve the conflict between Speed V.S Accuracy.

💡 My solution focuses on:

Improving existing features to make the interface smoother and more intuitive
Adding new features to directly address the core pain points
Enhancing the UI to create safer, more efficient workflows

Don’t know which surgeon to contact?

Adding a shared calendar for clarity.

Don’t know which tool to prepare?

Preference cards bring accuracy.

Too busy to keep records?

Adding a shopping cart to track items.

It’s Figma Time

Making Ideas Happen 💡

Function 1 – Calendar

A daily calendar displays upcoming surgeries with key details.
Nurses can quickly reach the right surgeon, saving time and ensuring tools are ready.

The problem of not knowing who to contact or how to reach them is solved.

Function 2 – Preference Card

Preference cards show tool categories, quantities, and status before, during, after surgery.

They help nurses quickly identify required tools, check stock, and receive notifications —

improving visibility, accuracy, efficiency, and reducing waste.

Function 3 – Shopping Cart

The shopping cart lets nurses search for tools and review past selections.
It helps them quickly find specific instruments, reuse prior setups, and save time —

streamlining preparation and improving efficiency

UI matters as much as UX

Fourth

Visual Design

Primary Color — Soothing Aqua (#B4E8EC)

Role: Primary UI color, used for key actions, highlights, and navigation.
Tone: Calm, clean, and trustworthy.
Rationale: Positioned between white and bright cyan #00F6FF, this aqua evokes clarity and a sense of safety.

Secondary Color — Warm Blush (#FCBFBF)

Role: Supporting accent, used for alerts, secondary buttons, or subtle highlights.
Tone: Friendly, human-centered, and approachable.
Rationale: A soft red that avoids the stress of pure red #F80000, introducing warmth and emotional balance into the interface.

Why Bubbles + gradients?

Bubbles and gradients were chosen to bring calm into a high-pressure hospital space.

Research suggests that humans instinctively prefer curved shapes over sharp edges, as curves evoke softness, safety, and ease (Blazhenkova et al., 2020). Bubbles, in particular, foster mindfulness and relaxation by encouraging steady breathing and gentle visual focus. Similarly, soft gradient borders—especially in cool tones—enhance emotional depth and evoke a tranquil, dream-like atmosphere (Kovack, 2019). Combined, these visual elements help reduce stress, provide comfort—an especially valuable benefit for surgical staff working in high-pressure environments.