responsive health and wellness app
responsive health and
wellness app

Seamless Healthcare Management

ROLE

UX Designer

EXPERTISE

UX/UI Design

YEAR

2023

Project description

Project description

Project description

Imagine a world where healthcare seamlessly fits into our daily lives. Doctor Verse, a user-friendly health and wellness app, brings this vision to life. It simplifies healthcare by helping users find personalized care, schedule appointments, and securely store essential health information—all with minimal effort. Designed for busy individuals, Doctor Verse makes healthcare an effortless part of everyday life.

Timeline

7 months, part-time

Problem Statement

Users need an efficient way to access personalized healthcare, while being reassured their health and medical information is secure.

Hypothesis

I believe that by creating a responsive web app where users can schedule doctor appointments that best meet their health data and privacy needs, users will have an efficient way to access healthcare while securely storing their health data.

I will know this to be true when we see increased user engagement and retention, reflected by regular appointment scheduling and more users actively storing their medical information in the app.

Discover

To effectively position Doctor Verse in the market, I conducted a competitive analysis to understand competitors' problem-solving approaches and identify growth opportunities.

Logo

Zocdoc

A patient-centric platform for finding healthcare providers, hindered by issues with transparency and unreliable booking.

HealthTap

A cost-effective platform connecting patients with doctors nationwide, with potential for UX/UI enhancements and greater specialization.

Process

Discover

Define

Ideate

Prototype

Test

Design

Delivery

Process

Discover

Define

Ideate

Prototype

Test

Design

Delivery

Design

Delivery

Prototype

Test

Discover

Define

Ideate

Process

I validated my hypothesis and gained user insights through surveys and interviews, analyzed using affinity mapping.

Discover

Discover

To effectively position Doctor Verse in the market, I conducted a competitive analysis to understand competitors' problem-solving approaches and identify growth opportunities.

Logo

Zocdoc

A patient-centric platform for finding healthcare providers, hindered by issues with transparency and unreliable booking.

HealthTap

A cost-effective platform connecting patients with doctors nationwide, with potential for UX/UI enhancements and greater specialization.

I validated my hypothesis and gained user insights through surveys and interviews, analyzed using affinity mapping.

I validated my hypothesis and gained user insights through surveys and interviews, analyzed using affinity mapping.

After analyzing the data, I discovered the following insights:

Healthcare platforms are complex, emphasizing the need for a more user-friendly interface.

Healthcare platforms are complex, emphasizing the need for a more user-friendly interface.

Healthcare platforms are complex, emphasizing the need for a more user-friendly interface.

Scheduling doctor appointments is challenging, requiring a better solution.

Scheduling doctor appointments is challenging, requiring a better solution.

Users don’t prioritize health until an issue arises but show interest in regular check-ups.

Users don’t prioritize health until an issue arises but show interest in regular check-ups.

Users don’t prioritize health until an issue arises but show interest in regular check-ups.

Easy, secure access to medical information is crucial for personalized care.

Easy, secure access to medical information is crucial for personalized care.

Define

My research uncovered key user pain points, behaviors, and objectives in healthcare access, along with potential features for Doctor Verse.

To ensure inclusivity, I created diverse user personas like Kevin and Tonya, who need efficient, non-overwhelming healthcare access.

Doctor Verse can address these needs with features like appointment scheduling, physician comparison, reminders, and customizable information filters.

Ideate

The next step was translating user tasks into user flows, guiding the inclusion of necessary app screens and features.

Book Appointment

Kevin struggles to manage doctor appointments due to his demanding job and needs quick access to nearby healthcare services.

Compare and Schedule

Tonya, a stay-at-home mom, prioritizes her kids and needs a simpler way to filter healthcare resources by insurance, location, and reviews.

I used card sorting to refine the site map and information architecture, improving navigation and aligning with user mental models.

Prototype

With these insights, I sketched low-fidelity wireframes to shape the app’s design.

I used Figma to refine low-fidelity prototypes into mid-fidelity, simplifying designs to better serve users.

In this phase, I reviewed research highlighting a strong user preference for appointment scheduling and health record management over product purchases. Given time constraints, I focused on prioritizing medical appointment scheduling.

Test

Usability tests, both in-person and remote, involved six participants and assessed the learnability, satisfaction, efficiency, and errors across mobile and desktop devices.

Direct Tasks

Search For Doctors

Compare Doctors

Book an Appointment

Access Your Profile

I used an affinity map to organize observations, comments, and errors, then analyzed them with a rainbow spreadsheet and prioritized errors using Jakob Nielsen’s severity rating scale.

Users praised the app’s simplicity, navigation, and value proposition. The “compare” feature stood out, setting Doctor Verse apart from competitors.

Revisions

Searching with Insurance

Insurance was added as a search option when users search for doctors.

Adding Insurance

Users have the option to enter insurance manually or upload a photo of their insurance card.

Confirming Appointments

Enabled users to receive notifications, add to calendar, share, and get directions when confirming an appointment.

Design

A Style Guide ensured consistent visuals and functionality for Doctor Verse, streamlining design and development. Adhering to Material Design made patterns and components easily recognizable.

Typography

Roboto

Font Family

Roboto is used as the default font for Doctor Verse. It reflects our brand in the sense with it’s clear and professional typeface.

Mobile

Name
Font
Line

Heading 1

24px

32px

Heading 2

20px

28px

Heading 3

18px

26px

Heading 4

16px

24px

Subheading 1

24px

32px

Subheading 2

22px

30px

Body 1

20px

26px

Body 2

18px

26px

Body 3

16px

24px

Body 4

14px

22px

Desktop

Name
Font
Line

Heading 1

60px

68px

50px

Heading 2

42px

38px

Heading 3

30px

34px

Heading 4

26px

34px

Subheading 1

26px

32px

Subheading 2

24px

30px

Body 1

22px

28px

Body 2

20px

26px

Body 3

18px

24px

Body 4

16px

Colors

Brand Colors

#3D52D5
#FDFDFD

Secondary Colors

#D6E3FF
#312D2D
#707070

State Colors

Error
success
#E30202
warning
#E2B93B

Logo

Primary Logo

Secondary Logo

Iconography

Optimized Size

Standard Size

Delivery

In an era where convenience is key, Doctor Verse offers a groundbreaking solution for seamless healthcare management, empowering users to take control of their health and enhancing doctor-patient interactions.

Personalized Healthcare Management

Our customizable search engine and "Compare" feature let users tailor their healthcare preferences and easily evaluate medical professionals, ensuring informed and personalized decisions.

Seamless Accessibility and Convenience

With a user-friendly interface that works across all devices, Doctor Verse provides effortless access to healthcare resources, simplifies appointment scheduling, and offers timely reminders.

Enhanced Privacy and Security

Secure storage ensures the privacy and security of health information, insurance details, and payment data, allowing users to confidently manage and share their information.

  • Universal accessibility

    Doctor Verse’s user-friendly interface works across any device, allowing effortless access to healthcare from home or on the go.

    Weather app image
  • Extensive Doctor Database

    Our database includes specialists from primary care to pediatrics, making it easy to find the right healthcare provider.

    Weather app image
  • Tailored Search

    Our robust search engine helps users find nearby doctors within their insurance network and filter results by preferences.

    Weather app image
  • compare and decide

    Doctor Verse’s "Compare" feature lets users effortlessly compare multiple doctors side by side, helping users make informed decisions.

    Weather app image
  • Effortless Appointment Scheduling

    Doctor Verse revolutionizes appointment scheduling, allowing users to book, edit, and cancel appointments online.

    Weather app image
  • Enhanced Privacy and Security

    Doctor Verse ensures privacy and security for storing health information, insurance cards, appointment histories, and payment details.

    Weather app image

Define

Define

My research uncovered key user pain points, behaviors, and objectives in healthcare access, along with potential features for Doctor Verse.

To ensure inclusivity, I created diverse user personas like Kevin and Tonya, who need efficient, non-overwhelming healthcare access.

Doctor Verse can address these needs with features like appointment scheduling, physician comparison, reminders, and customizable information filters.

Doctor Verse can address these needs with features like appointment scheduling, physician comparison, reminders, and customizable information filters.

Ideate

Ideate

The next step was translating user tasks into user flows, guiding the inclusion of necessary app screens and features.

Book Appointment

Kevin struggles to manage doctor appointments due to his demanding job and needs quick access to nearby healthcare services.

Compare and Schedule Specialists

Tonya, a stay-at-home mom, prioritizes her kids and needs a simpler way to filter healthcare resources by insurance, location, and reviews.

Compare and Schedule Specialists

Tonya, a stay-at-home mom, prioritizes her kids and needs a simpler way to filter healthcare resources by insurance, location, and reviews.

I used card sorting to refine the site map and information architecture, improving navigation and aligning with user mental models.

I used card sorting to refine the site map and information architecture, improving navigation and aligning with user mental models.

Prototype

Prototype

With these insights, I sketched low-fidelity wireframes to shape the app’s design.

I used Figma to refine low-fidelity prototypes into mid-fidelity, simplifying designs to better serve users.

I used Figma to refine low-fidelity prototypes into mid-fidelity, simplifying designs to better serve users.

In this phase, I reviewed research highlighting a strong user preference for appointment scheduling and health record management over product purchases. Given time constraints, I focused on prioritizing medical appointment scheduling.

Test

Test

Usability tests, both in-person and remote, involved six participants and assessed the learnability, satisfaction, efficiency, and errors across mobile and desktop devices.

Direct Tasks

Search For Doctors

Compare Doctors

Book an Appointment

Access Your Profile

Direct Tasks

Search For Doctors

Compare Doctors

Book an Appointment

Access Your Profile

I used an affinity map to organize observations, comments, and errors, then analyzed them with a rainbow spreadsheet and prioritized errors using Jakob Nielsen’s severity rating scale.

Users praised the app’s simplicity, navigation, and value proposition. The “compare” feature stood out, setting Doctor Verse apart from competitors.

Revisions

Searching with Insurance

Insurance was added as a search option when users search for doctors.

Adding Insurance

Users have the option to enter insurance manually or upload a photo of their insurance card.

Confirming Appointments

Enabled users to receive notifications, add to calendar, share, and get directions when confirming an appointment.

Searching with Insurance

Insurance was added as a search option when users search for doctors.

Adding Insurance

Users have the option to enter insurance manually or upload a photo of their insurance card.

Confirming Appointments

Enabled users to receive notifications, add to calendar, share, and get directions when confirming an appointment.

Revisions

Design

Design

A Style Guide ensured consistent visuals and functionality for Doctor Verse, streamlining design and development. Adhering to Material Design made patterns and components easily recognizable.

Typography

Roboto

Font Family

Roboto is used as the default font for Doctor Verse. It reflects our brand in the sense with it’s clear and professional typeface.

Mobile

Name
Font
Line

Heading 1

24px

32px

Heading 2

20px

28px

Heading 3

18px

26px

Heading 4

16px

24px

Subheading 1

24px

32px

Subheading 2

22px

30px

Body 1

20px

26px

Body 2

18px

26px

Body 3

16px

24px

Body 4

14px

22px

Desktop

Name
Font
Line

Heading 1

60px

68px

50px

Heading 2

42px

38px

Heading 3

30px

34px

Heading 4

26px

34px

Subheading 1

26px

32px

Subheading 2

24px

30px

Body 1

22px

28px

Body 2

20px

26px

Body 3

18px

24px

Body 4

16px

Colors

Brand Colors

#3D52D5
#FDFDFD

Secondary Colors

#D6E3FF
#312D2D
#707070

State Colors

Error
warning
success
#E30202
#E2B93B
#06843A

Logo

Primary Logo

Secondary Logo

Optimized Size

Standard Size

Iconography

Typography

Roboto

Font Family

Roboto is used as the default font for Doctor Verse. It reflects our brand in the sense with it’s clear and professional typeface.

Mobile

Name
Font
Line

Heading 1

24px

32px

Heading 2

20px

28px

Heading 3

18px

26px

Heading 4

16px

24px

Subheading 1

24px

32px

Subheading 2

22px

30px

Body 1

20px

26px

Body 2

18px

26px

Body 3

16px

24px

Body 4

14px

22px

Desktop

Name
Font
Line

Heading 1

60px

68px

50px

Heading 2

42px

38px

Heading 3

30px

34px

Heading 4

26px

34px

Subheading 1

26px

32px

Subheading 2

24px

30px

Body 1

22px

28px

Body 2

20px

26px

Body 3

18px

24px

Body 4

16px

Colors

Brand Colors

#3D52D5
#FDFDFD

Secondary Colors

#D6E3FF
#312D2D
#707070

State Colors

Error
warning
success
#E30202
#E2B93B
#06843A

Logo

Primary Logo

Secondary Logo

Standard Size

Optimized Size

Iconography

Buttons

Button Rules

Container Height: 40dp Left/Right padding: 24dp

Container Shape: 20dp corner radius Text alignment: Center-aligned

Variants

Default

Hover

Focused

Pressed

Disabled

Filled
Outlined
text
tonal

Delivery

Delivery

In an era where convenience is key, Doctor Verse offers a groundbreaking solution for seamless healthcare management, empowering users to take control of their health and enhancing doctor-patient interactions.

Personalized Healthcare Management

Our customizable search engine and "Compare" feature let users tailor their healthcare preferences and easily evaluate medical professionals, ensuring informed and personalized decisions.

Seamless Accessibility and Convenience

With a user-friendly interface that works across all devices, Doctor Verse provides effortless access to healthcare resources, simplifies appointment scheduling, and offers timely reminders.

Enhanced Privacy and Security

Secure storage ensures the privacy and security of health information, insurance details, and payment data, allowing users to confidently manage and share their information.

  • Universal accessibility

    Doctor Verse’s user-friendly interface works across any device, allowing effortless access to healthcare from home or on the go.

    Weather app image
  • Extensive Doctor Database

    Our database includes specialists from primary care to pediatrics, making it easy to find the right healthcare provider.

    Weather app image
  • Tailored Search

    Our robust search engine helps users find nearby doctors within their insurance network and filter results by preferences.

    Weather app image
  • compare and decide

    Doctor Verse’s "Compare" feature lets users effortlessly compare multiple doctors side by side, helping users make informed decisions.

    Weather app image
  • Effortless Appointment Scheduling

    Doctor Verse revolutionizes appointment scheduling, allowing users to book, edit, and cancel appointments online.

    Weather app image
  • Enhanced Privacy and Security

    Doctor Verse ensures privacy and security for storing health information, insurance cards, appointment histories, and payment details.

    Weather app image
  • Universal accessibility

    Doctor Verse’s user-friendly interface works across any device, allowing effortless access to healthcare from home or on the go.

    Weather app image
  • Extensive Doctor Database

    Our database includes specialists from primary care to pediatrics, making it easy to find the right healthcare provider.

    Weather app image
  • Tailored Search

    Our robust search engine helps users find nearby doctors within their insurance network and filter results by preferences.

    Weather app image
  • compare and decide

    Our "Compare" feature lets users effortlessly compare multiple doctors side by side, helping users make informed decisions.

    Weather app image
  • Effortless Appointment Scheduling

    Doctor Verse revolutionizes appointment scheduling, allowing users to book, edit, and cancel appointments online.

    Weather app image
  • Enhanced Privacy and Security

    Doctor Verse ensures privacy and security for storing health information, insurance cards, appointment histories, and payment details.

    Weather app image

Results

In summary, our primary challenge was to create an efficient way for users to access personalized healthcare, while being reassured their health and medical information is secure. Our solution was to create Doctor Verse, an app that caters to users' healthcare needs while prioritizing the security of their medical data.

With the MVP in place, we’ll refine the interface based on user research to enhance the overall experience and make healthcare access more user-friendly.

Results

In summary, our primary challenge was to create an efficient way for users to access personalized healthcare, while being reassured their health and medical information is secure. Our solution was to create Doctor Verse, an app that caters to users' healthcare needs while prioritizing the security of their medical data.

With the MVP in place, we’ll refine the interface based on user research to enhance the overall experience and make healthcare access more user-friendly.

Results

In summary, our primary challenge was to create an efficient way for users to access personalized healthcare, while being reassured their health and medical information is secure. Our solution was to create Doctor Verse, an app that caters to users' healthcare needs while prioritizing the security of their medical data.

With the MVP in place, we’ll refine the interface based on user research to enhance the overall experience and make healthcare access more user-friendly.