connectCARE

"How can we encourage users to prioritize their wellbeing?"

A UX Case Study

Hero Mockup Image
VIEw PROTOTYPE

Role:
UX/UI Designer
Branding

Team:
Solo Class Project

Timeline:
7 weeks

Tools:
Figma
Miro
Otter

Imagine: You're juggling work, family, and personal obligations, trying to keep up with the constant demands of life, suddenly a thought pops in your mind - you need to book a healthcare appointment, but the thought navigating the process and seeking help seems too overwhelming.

This is the exact feeling I wanted to explore when I began my research journey.
By immersing myself in two different methodologies, competitive analysis and user interviews - I set out to discover what already existed in the market and uncover pain points patients and clients experience before, during, and after a healthcare visit.

Overview

The Problem

In today's fast-paced world, it can be challenging to find time to take care of our wellbeing.

During the pandemic, we have seen how important it is to be able to access help easily and as early as possible. This can be paramount to one’s healing journey and in avoiding serious health issues, mentally and physically.

My Challenge

Finding participants who seek and are willing to their personal experiences on the topic, while also catering to the diverse needs of patient and clients seeking multiple healthcare services.

The challenge was to create a seamless user journey that would empower individuals to easily find and get connected to the right support for their unique wellness requirements.

The Impact

To revolutionize easy access to wellness in a digital world, with just a few clicks, while bridging the gap between busy lifestyles, hesitation, and timely wellness attention.

Finding a way to provide patients and clients with an efficient way to discover and connect with a variety of wellness professionals in a convenient way.

POV Statements

Patients and clients needs to feel valued and understood while receiving helpful assistance to have concerns addressed directly.

  • Number 1

    to feel valued, understood, and receive help

  • Number 2

    to book an appointment with flexibility and convenience

  • Number 3

    Not as easy to have concerns answered directly

  • Number 1

    encourage people to prioritize their wellbeing

  • Number 2

    minimize appointment booking time

  • Number 3

    create a way to communicate easily

HMW Statements

How might we empower patients and clients to prioritize their wellbeing by minimizing appointment booking time and creating an effortless communication channel?

01
Emphasize
Market Research
Competitive Analysis
User Interviews
02
Define
User Persona
Affinity Mapping
03
Ideate
Goals & Objectives
Feature Prioritization
Information Architecture
User/Task Flows
Sketch
Lo-fidelity Wireframe
Branding
UI Kit
04
Usability Testing
Prototype Hi-Fi Wireframes
Online Usability Test

01 Emphasize

Research

Competitive Analysis

Through analyzing 3 mental healthcare services, I focused on understanding their mission, the services they offered, and the steps it took to get started. This helped me establish and identify the gaps in the market and to further discover needs of patients and clients.
Key Findings
I learned that the pandemic has increased the use of digital products for healthcare bookings and centered around online visit options, and continues to be the case post-pandemic.
User Interviews
I embarked on a global exploration, interviewing 5 participants from diverse professions, delving into their pre, during, and post mental and healthcare visit experiences.

The interviews were held over zoom and transcribed to help me analyze and gather data.
Key Findings
Uncovering user Insights: Breaking Barriers to Mental Health Services with Empathy and Convenience

The user interviews reveals that over half of participants have never considered seeking therapy or coaching services. However, despite where they are in the world, patients and. clients value personalized care and flexibility, requiring a seamless experience from appointment booking to the end and after their visit, opening the door to a positive attitude towards options of therapy and coaching.

02 Define

Affinity Mapping

From the user interview findings, I created an affinity map to help me make sense of the insights by grouping similar ideas to identify patterns and themes. This allowed me to gain a deeper understanding of the needs and desires of penitents and clients, defining specific features and requirements to inform the design decisions.

Key Findings

Themes
  • Time
  • Book
  • Selection
  • Successful Visit
  • Cancellations
  • Frustrations
​I learned that healthcare visitors value their time and want to feel cared for during and after their appointment. They want their problems solved, and to have plenty of flexibility when booking and searching for a healthcare professional. The data suggests that this can possibly be solved by a few simple features, services, and designs.
Affinity Mapping

Personas

Based on user research, I was able to generate 3 personas to guide me in visualizing the stories of real patients and clients. Through this process, I identified the following general target users.

02 Ideate

Goals & Objectives

Before diving into designing a solution, I created a Venn diagram to better understand the connection between the business and user goals, along with the possible technical constraints. This made sure that I considered all perspectives while brainstorming design solutions, which also helped in measuring the success of the overall user experience.
Venn Diagram through Goals and Objectives

Feature Prioritization

Now that I understand the goals and objectives, With so many potential features and functions that could be included, I decided to utilize a prioritization matrix to compare and organize features to be implemented. I based this on the value it would provide to patients and clients, and also keeping the business goals in mind.

Due to time constraints, I decided to focus on 2 features:

1. Booking an appointment
2. Messaging a wellness professional.

Information Architecture

With the key features established, I created a sitemap to help me organize and structure the website, in a way that will help patients and clients seamlessly navigate and complete goals. I ensured I used words that will be clearly understood by patients and clients, due to the possibility that they could be in a vulnerable state when accessing the website.
Sitemap 2

User and Task Flows

Now, at this point, I asked myself: "How do I create a seamless user experience?"

In order to do this, I need to create an experience that was intuitive and effortless. This is when I decided to develop user and tasks flows. It allowed me to envision the steps users would take to book an appointment and message a wellness professional.

This process helped me identify challenges, opportunities, and key screens to design. This involved the state of mind the user may be in when completing the task, the types of services users may be seeking for, and the overall amount of steps users will take before becoming impatient.
View assets in more detail

Low Fidelity Wireframes

Next, using the user and task flows, I began brainstorming ideas through sketching layout ideas on a notepad. This gave me a starting point to designing a solution, as my mind was scrambled with ideas, and did not know where to begin. As I continued sketching, I would run into a design block and that's when I went back to my research findings and seek inspiration from competitors products. These findings were user pain points discovered, which helped remind me and inspired me to develop more ideas.

This included:
1. Doctor and Therapy
2. Information users seek when choosing a healthcare professional
3. Pain points and frustration of scheduling and flexibility


Sketch 1Sketch 2Sketch 3
After sketching, I chose the best design solutions to start digitalizing into low fidelity wireframes. This helped me develop a clear design direction. I then used these wireframes as a visual representation of my designs to gather feedback from potential users.

Through receiving feedback, the main critique was for the messaging design. The "completed" section is not needed, as messaging can be ongoing and is not necessarily "completed". This is when I decided a search or filter function can be added into chat instead.

Overall, receiving this feedback early on helped me prioritize, shape my technical, logical, and critical vision, which changed my design direction into focusing more on details of booking an appointment.
Lo-Fi Wireframes 1Lo-Fi Wireframes 2

Branding & Style Guide

The brand style was inspired by utilizing color psychology principles to convey the the traits of empathy, compassion, and trust. These are the 3 adjectives that represent the brand values and identity.
Style Guide

03 Usability Testing

The high-fidelity wireframes were used to conduct usability testing. As I was building the prototype, I quickly learned that additional screens were needed to ensure the user flow was intuitive. The main screen was a pop-up message screen to ensure the user is aware that "an action" was taken.

After adding a few more screens, I completed the prototype, tested the flows myself, and was ready for usability testing.

Prototype

Additional screens added

Additional Hi-Fi Wireframes

Usability Test

The Task

The usability testing included 5 participants who were given a prototype link and was asked to complete 2 tasks.
Task 1: From the homepage, please sign in and make an appointment with Dr. Cheleste.
Task 2: From the homepage, please sign in and message Dr. Cheleste regarding a past appointment.
Success Metrics
The success metrics were based on both quantitive and qualitative.

Quantitive was based on participants completing the task given within 90 seconds.
Qualitative was based on the hesitation during the task and how participants felt after completing the task.
Positive feedbacks:

1. Design is clean, simple, straight forward, and intuitive. 
2. Users mentioned they would use this website, because a lot of sites they've used before are not as clean and intuitive.


With the results, I made design and flow iterations with data that were rated 60% and above. Also, due to time constraints and prioritization, I visually disabled a few features to ensure users understood that the function was inactive.
Next Steps
To run the test with more participants to ensure successful completion of tasks within the given success metrics without failure. I would then go through feature priority list and add additional features to the platform and continue to design, test, and iterate, to ensure the design solutions delivers the best possible experience for patients and clients globally.

Onboarding

Sign In and Registration Screens

Sign in & Registration

Find Care Screens

Finding Care

Booking Appointment Screens

Booking an Appointment

Messaging Healthcare Professional Screens

Messaging Wellness Professional

View More Case Studies

.midpoint Case StudyAirBnb Feature Case StudyInformedy Case Study Image