Healthcare App – Material Design Wireframes

40 screens · WCAG 2.1 AA · Material Design 3 · HTML/CSS editable in Desktop view

Auth
Onboarding
Recovery
Main Flows
System States
Chat AI
AUTH · 01
Login
AUTH · 02
Login Error
AUTH · 03
Biometric Login
Sign In

Jane Doe

jane.doe@email.com

Touch the sensor or look at your camera

ONBOARDING · 01
Registration — Personal Info
Create Account

Personal Information

Let's start with your basic info

Sarah
Johnson
03/15/1988
(555) 867-5309

Already have an account? Sign In

ONBOARDING · 02
Registration — Account Setup
Create Account

Account Details

Set up your login credentials

sarah@email.com
sarah.johnson
••••••••
Medium strength
••••••••

Already have an account? Sign In

ONBOARDING · 03
Email Verification
Verify Email

Check your email

We sent a 6-digit code to

sarah@email.com

3
8
2

Code expires in 4:32

Resend Code Wrong email?
ONBOARDING · 04
Registration Success

You're all set!

Your account is ready. Start managing your health today.

WHAT YOU CAN DO

Find Care

Search doctors & facilities

View Coverage

Check benefits & deductibles

Track Claims

Monitor status & history

RECOVERY · 01
Forgot Username
Forgot Username

Recover Your Username

Enter the email address associated with your account and we'll send your username.

Enter your email

Remember your username?

RECOVERY · 02
Reset Password
Reset Password
1
Email
2
Verify
3
New

Reset Your Password

We'll send a password reset link to your registered email address.

Enter your email
MAIN · 01
Home / Dashboard

MyHealth

Good morning, Sarah 👋

Member since 2019 · Red Cross PPO

Find Care
Coverage
Messages

Upcoming

View all
MC

Dr. Maria Chen

Primary Care

Confirmed
Mar 15 · 10:30 AM

Health Alerts

MAIN · 02
My Coverage

My Coverage

Red Cross Red Shield PPO

Group #: BCB-2024-887234

Policy #: POL-SJ-20190314

Sarah Johnson Active
Deductible
$250
of $1,500
Out-of-Pocket
$1,100
of $5,000
Copay
$25
per visit
Preventive Care
100% Covered
Specialist Visit
$40 copay
Emergency Room
$250 deductible
Mental Health
80% covered
Prescription (Tier 1)
$10 copay
MAIN · 03
Navigation Drawer
SYSTEM · 01
Error Modal

MyHealth

SYSTEM · 02
Toast Notification

MyHealth

Good morning, Sarah 👋

Member since 2019 · Red Cross PPO

Find Care
Coverage
Messages

Upcoming

View all

Appointment scheduled successfully!

MAIN · 04
Care Options

Care Options

Available Near You

Primary Care

In-network

Urgent Care

Open now

Virtual Visit

On-demand

Mental Health

In-network

Pharmacy

3 nearby

Specialists

Referral needed

MAIN · 04a
Provider Search Results

Find Provider

12 providers found

Dr. Maria Chen

Primary Care · 0.3 mi

4.9 (127)
In-Network

Dr. James Park

Primary Care · 0.7 mi

4.7 (89)
In-Network

Dr. Aisha Patel

Internal Medicine · 1.2 mi

4.8 (203)
Out-of-Net

Dr. Robert Kim

Family Medicine · 1.8 mi

4.6 (54)
In-Network
MAIN · 04b
Provider Detail

Provider Profile

Dr. Maria Chen

Primary Care Physician

4.9 · 127 reviews
In-Network Accepting Patients
15+
Years Exp.
$25
Copay
0.3 mi
Distance

ABOUT

Board-certified in Internal Medicine with a focus on preventive care and chronic disease management. Graduated from UCSF School of Medicine.

OFFICE

450 Sutter St, Suite 1108, San Francisco, CA
Mon–Fri · 8:00 AM – 5:00 PM

INSURANCE ACCEPTED

Red Cross PPO Medicare Aetna Cigna
MAIN · 09
Book Appointment

Book Appointment

Dr. Maria Chen

Primary Care · $25 copay

In-Network

VISIT TYPE

March 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

AVAILABLE TIMES · MARCH 15

MAIN · 09a
Appointments

Appointments

Dr. Maria Chen

Primary Care

Confirmed
Mar 15, 2026 · 10:30 AM
450 Sutter St, Suite 1108 · In-Person

Dr. James Park

Primary Care

Pending
Apr 2, 2026 · 2:00 PM
Video Visit

Past

Dr. Maria Chen

Primary Care

Completed
Feb 10, 2026 · 9:00 AM
MAIN · 05
Account Settings

Account Settings

Sarah Johnson

Edit Profile

PROFILE

Personal Information
Health Profile
Insurance & Coverage

SECURITY

Change Password
Two-Factor Auth
Biometric Login

PREFERENCES

Notifications
Privacy Settings
Language
English
MAIN · 06
Message Center

Messages

  • Dr. Maria Chen

    Results look normal, follow up in...

    2h

  • Nurse Practitioner

    Your prescription has been renewed

    Yesterday

  • Lab Results Alert

    New lab results available for...

    2d

  • Appointment Team

    Reminder: Dr. Chen tomorrow at 10:30

    3d

  • Health Plan

    Your EOB for February is ready

    1w
MAIN · 06a
Compose New Message

New Message

To:
Dr. Maria Chen
Subject:
Follow-up question about test results
Secure, HIPAA-compliant message

Hi Dr. Chen,

I had a question about the lab results from my visit last week. The report mentioned my cholesterol levels were slightly elevated — could you clarify what that means for my treatment plan?

Thank you,
Sarah

MAIN · 07
Claims

Claims

  • Dr. Maria Chen

    Primary Care Visit · Feb 28

    $180 Paid

  • Lab Services

    Blood Panel · Feb 15

    $320 Processing

  • Urgent Care

    Walk-in Visit · Jan 22

    $450 Paid

  • Mental Health Svcs

    Therapy Session · Jan 10

    $160 Processing

  • Pharmacy

    Lisinopril 10mg · Dec 28

    $45 Denied
MAIN · 07a
Claim Detail

Claim Detail

Claim Paid

Payment issued Feb 28, 2026

PROVIDER

Provider Dr. Maria Chen
Service Primary Care Visit
Date of Service Feb 28, 2026
Claim # CLM-2026-0228-4491

COST BREAKDOWN

Amount Billed $180.00
Plan Allowed $155.00
Plan Paid $130.00
Deductible Applied $0.00
Your Cost $25.00
MAIN · 08
ID Cards

ID Cards

Medical

Red Cross Red Shield PPO

Sarah Johnson

MBR-SJ-20190314 Active

Dental

Delta Dental PPO

Sarah Johnson

DD-887234-SJ Active

Vision

VSP Vision Care

Sarah Johnson

VSP-44912-SJ Active

Prescription (Rx)

CVS Caremark

Sarah Johnson

RX-2024-887234 Active
MAIN · 08a
ID Card — Medical

Medical ID Card

RedCross

Red Shield

Sarah Johnson

DOB: 03/14/1990

Member ID

MBR-SJ-20190314

Group #

BCB-2024-887234

Plan

PPO

Eff. Date

01/01/2024

PCP Copay $25
Specialist Copay $40
ER Copay $250
Customer Service 1-800-555-0199
24/7 Nurse Line 1-800-555-0124

PLAN DETAILS

Plan Name Red Cross Red Shield PPO
Policy # POL-SJ-20190314
Network BlueCare Preferred
Status Active
MAIN · 10
Lab Results

Lab Results

Comprehensive Metabolic Panel

Feb 28, 2026 · Dr. Maria Chen

1 Abnormal

Lipid Panel

Feb 15, 2026 · Dr. Maria Chen

Normal

Complete Blood Count

Mar 5, 2026 · Dr. Maria Chen

Pending

Thyroid Panel (TSH)

Jan 10, 2026 · Dr. Maria Chen

Normal
MAIN · 10a
Lab Result Detail

Lab Result

1 Abnormal Result

Reviewed by Dr. Chen · Feb 28

TEST INFO

TestComprehensive Metabolic Panel
DateFeb 28, 2026
Ordered byDr. Maria Chen
LabQuest Diagnostics

RESULTS

Glucose

Ref: 70–100 mg/dL

95 mg/dL

Normal

Cholesterol Total

Ref: <200 mg/dL

215 mg/dL ↑

High
0Normal <200300 mg/dL

Creatinine

Ref: 0.6–1.2 mg/dL

0.9 mg/dL

Normal

PROVIDER NOTE

Dr. Maria Chen

Feb 28, 2026

Cholesterol slightly elevated. Recommend dietary changes and follow-up in 3 months.

MAIN · 11
Prescriptions

Prescriptions

Lisinopril 10mg

Once daily · Blood Pressure

3 Refills
Dr. Maria Chen
Last filled Feb 1 · CVS Caremark

Atorvastatin 20mg

Once daily · Cholesterol

1 Refill
Dr. Maria Chen
Last filled Jan 15 · CVS Caremark

Metformin 500mg

Twice daily · Diabetes

No Refills
Dr. Maria Chen
Last filled Dec 10 · CVS Caremark
SYSTEM · 03
Empty State

Appointments

No Upcoming Appointments

You don't have any scheduled appointments. Book a provider to get started.

SYSTEM · 04
Skeleton Loading
CHAT · 01
AI Assistant Home

HealthBot

HealthBot

Online · AI-powered

Hi Sarah! I can answer questions about
your health, coverage & care.

SUGGESTED TOPICS

person_search

Find a Doctor

medication

Refill Prescription

description

Understand My Claim

shield

Check My Benefits

calendar_today

Book Appointment

health_and_safety

Symptom Checker

RECENT CONVERSATIONS

smart_toy

Prescription refill help

Your refill was sent to CVS...

2h
smart_toy

Claim status inquiry

Claim #CLM-0244 is processing...

Yesterday

HealthBot provides guidance only. Always consult your provider for medical decisions.

Ask me anything...
CHAT · 02
Active Conversation

HealthBot

Online · AI-powered

TODAY · 10:42 AM

HealthBot

Hi Sarah! How can I help you today?
I need to refill my Lisinopril prescription.

HealthBot

Sure! Lisinopril 10mg was last filled Feb 1 at CVS Caremark. You have 3 refills remaining. Shall I request one now?
Yes please!

HealthBot

Done! Your refill has been sent to CVS Caremark. It should be ready for pickup in 1–2 business days.
10:43 AM · Delivered
Type a message...
CHAT · 03
Typing Indicator

HealthBot

typing...

TODAY · 2:18 PM

HealthBot

Hi Sarah! What can I help you with today?
What's the status of my claim CLM-2026-0244?
2:18 PM · Sent

HealthBot

HealthBot is looking up your claim...

Type a message...
CHAT · 04
Rich Card Response

HealthBot

Online

TODAY · 9:05 AM
Book an appointment with Dr. Chen

HealthBot

I found an available slot with Dr. Chen. Here's the appointment option:
event

Dr. Maria Chen

Primary Care · In-Network

calendar_todayMar 18, 2026 · 10:30 AM
location_on450 Sutter St · In-Person
payments$25 copay · In-Network
Available
BOOK THIS SLOT

HealthBot

Would you like to confirm this time, or see other available slots?
Type a message...
CHAT · 05
Quick Replies

HealthBot

Online

TODAY · 11:30 AM

HealthBot

Hello Sarah! What can I help you with today?
I need to see a doctor

HealthBot

I can help you find the right care. What type of visit are you looking for?
Or type your own...
CHAT · 06
Image Attachment

HealthBot

Online

TODAY · 3:15 PM

HealthBot

Hi Sarah! You can share a photo of your insurance card or a prescription label and I'll help you read the details.
Insurance_Card.jpg · 3:16 PM

HealthBot

I can see your Red Cross Red Shield Medical card. What would you like to know about your coverage?
What's my specialist copay?

HealthBot

Your specialist visit copay is $40 per visit for in-network providers. Need help finding a specialist?
Type a message...
CHAT · 07
Escalation to Live Agent

HealthBot

Connecting to agent...

CHAT · 08
Conversation Feedback

Rate Your Experience

How did we do?

Your conversation with HealthBot has ended. Let us know how it went.

TOPIC

medication

Prescription Refill

Duration: 4 min · 8 messages

TAP TO RATE

★ ★ ★ ★ ★

Good

What could we improve?
CHAT · 09
Chat History

Conversations

TODAY

smart_toy

Prescription refill — Lisinopril

Refill sent to CVS Caremark

2h
smart_toy

Claim status inquiry

Claim #CLM-0244 is in review

5h

YESTERDAY

smart_toy

Appointment booking

Booked Dr. Chen for Mar 18

Yesterday
support_agent

Live Agent — Claim dispute

Dispute submitted for CLM-0198

Yesterday

LAST WEEK

smart_toy

Benefits explanation

Explained deductible vs. copay

Mar 4
smart_toy

Find a doctor — Cardiology

3 in-network cardiologists found

Mar 2