top of page
HS Cover.png

From 0 to 1 Building An Educational App to Help Surgery Patients Manage Pain Safely and Prevent Opioid Misuse

CLIENT
Behavioral Health Wellness Group (BHWG)
DURATION
Sep - Dec 2023
TEAM
Roey Wang (Product Designer): Competitive analysis, user interviews,  persona, information architecture, style guide, key workflows, wireframes & prototype (Homepage, MyProfile, Pre-Surgical, Medication Reminder).

Nishi Chitale (Project Manager), Sayali Nikumbh (UX Researcher), and Xinru Wen (UI/UX Designer)

Meet Andrew - Our Primary User

20251211_1825_Andrew's Facial Expressions_remix_01kc7vmebkec8sa0qag908r1mp_edited.jpg

For the past five years, arthritis has gradually made everyday activities more difficult. After multiple rounds of physical therapy, his doctor recommends knee replacement surgery.

The surgery promises long-term relief—but Andrew is anxious about the recovery.

He wonders:

  • How painful will recovery be?

  • How long will it take to get back to normal?

  • What exactly are opioids, and are they dangerous?

Medicine Guideline.png

At his pre-operation appointment, Andrew receives a thick booklet explaining opioid safety.

He skims a few pages before putting it aside.

The information feels overwhelming, and the recovery journey ahead feels uncertain.

Andrew’s situation reflects a broader problem faced by many surgery patients.

Problem

Patients undergoing major surgery often rely on opioids for pain management, but many lack clear, accessible guidance on how to use them safely.​

Information overload 2.png
Information Overload
Limited understanding of opioid risks 2.png
Limited understanding of opioid risks
Lack of ongoing support during recovery.png
Lack of ongoing support during recovery
Complex recovery experiences.png
Complex recovery experiences

To understand the needs of patients like Andrew, we conducted multiple research activities.

Literature Review

We explored medical research and healthcare guidelines related to opioid usage.

Key insights included:

  • Opioids are effective pain relievers but carry a risk of dependency when misused.

  • Patient education plays a critical role in preventing opioid misuse.

  • Medication tracking and reminders can help patients maintain safe dosage patterns.

Ecosystem Mapping

We mapped the recovery ecosystem to understand the stakeholders influencing patient behavior.

Key stakeholders included:

  • orthopedic surgeons

  • nurses

  • physical therapists

  • caregivers

  • behavioral health experts

This helped us identify an important gap:

Patients receive expert guidance before surgery, but lack structured support during recovery at home.

Eco-system Map.png

User Interviews

Key Insights

​

Accessibility is essential
Most knee and hip replacement patients are 45 years or older, making clear navigation and readability critical.

Patients trust doctors but forget instructions
Once home, many patients struggle to recall medication guidelines.

Recovery is emotionally challenging
Patients often feel uncertain about whether their recovery progress is normal.

Patients want multiple recovery strategies
Medication is helpful, but patients are also interested in alternative ways to manage pain.

Defining the Design Strategy

Our research informed four guiding design principles.

1. Simplify Complex Medical Information

Educational content must be clear, digestible, and actionable.

2. Reduce Anxiety During Recovery

The interface should feel supportive, calm, and trustworthy.

3. Design for Accessibility

The app must be easy to navigate for older users.

4. Empower Patients

Users should feel confident managing their recovery rather than overwhelmed by it.

Opportunity

The Behavioral Health Wellness Group previously offered an in-person opioid prevention course to help educate surgery patients.

However, the course stopped during COVID-19.

This created an opportunity to reimagine the program in a digital format that patients could access anytime during recovery.

multimedia_15236058 1.png
Transform educational content into an engaging digital experience
health-insurance_11815418 1.png
Support safe medication behavior during recovery
retirement-community_18367457 1.png
Make medical information accessible for patients aged 45+
emotional-balance_16317689 1.png
Provide emotional reassurance during the recovery process

Solution: HealSmart

HealSmart is a mobile platform that supports surgery patients throughout their recovery journey.

It provides:

  • opioid education

  • medication tracking tools

  • alternative pain management resources

  • structured recovery guidance

Instead of overwhelming patients with information, HealSmart delivers support exactly when patients need it.

How Andrew Will Navigate HealSmart

Information Architecture

The IA is structured so Andrew can quickly find:

  • Home — his recovery hub

  • MOP Program — step-by-step opioid education

  • PainEase Kit — non-drug pain management tools

  • My Profile — medication tracking & reminders

  • Every screen guides Andrew without overwhelming him.

Information Architecture.png

Visual Design

Fonts

  • Merriweather for titles → conveys trust, professionalism, authority

  • Lato for content → clean, readable, friendly

​

Colors

  • A calming, trustworthy green theme, reducing stress and signalling healing

  • Consistent branding to help Andrew recognize reliability across the app

Style Guide.png

Product Architecture

To support Andrew’s recovery journey, we structured the application into four core sections.

Main Course.png

HealSmart

A digital version of the Medication Opioid Prevention course, redesigned into easy-to-follow learning modules.

Instead of reading long documents, patients learn through short, structured content.

Home Dashboard

The central hub where patients can quickly access:

  • medication reminders

  • recovery progress

  • key educational resources

Tutorial.png

Medication Reminder

The central hub where patients can quickly access:

  • medication reminders

  • recovery progress

  • key educational resources

Conclusion

Final Report Meeting
Wrapping up our healthcare education app project has been a wild ride! Working with our client and diving into the nitty-gritty of design and functionality was a great experience under the guidance of our professor. As a group, we brought a mix of skills to the table, making the whole process a creative exercise. We learned a lot about real-world challenges, teamwork, and thinking on our feet. The app we’ve crafted not only meets our client’s needs but also serves as a hands-on lesson in the ever-exciting world of app development. Beyond the tech stuff, this project has taught us the ropes of effective communication and adaptability. We’re excited about the impact our app could have in the healthcare education scene and grateful for the practical insights that will stick with us long after the classroom days are over.
  • LinkedIn
  • Instagram
bottom of page