Project Background

Location: Toronto, ON

Timeline: 12 Weeks

Project Type: End to End UX Design

My Role: End to End User Experience Designer

Research Methods: Competitive Analysis, User Interviews, Card Sorting

Usability Testing methods: Moderated, In-person

Tools: Figma, Optimal Workshop, Canva, Lucid

Introduction

In response to the growing demand for accessible healthcare services, I designed a healthcare app focused on simplifying the appointment booking process. This user-centric solution empowers individuals to effortlessly schedule medical appointments online, streamlining their healthcare journey. By combining intuitive user interface design with a patient-centric approach, I aimed to enhance the overall healthcare experience while optimizing clinic operations. This case study delves into the strategic design decisions and methodologies that contributed to the app, highlighting its impact on healthcare accessibility and user satisfaction.

Research Goal

We want to learn what barriers people face when trying to book or manage their appointments with a healthcare provider.

Problem Statement

Accessing healthcare, particularly for new patients, is significantly hindered by the challenge of locating and scheduling appointments with dependable healthcare providers.

Project Scope

As the sole UX designer for this project, I undertook the end-to-end design of this healthcare app, managing all aspects from user research, ideation to prototype completion.

Design Process

In crafting the user experience for this healthcare app, I employed the Double Diamond methodology as a guiding framework throughout the design process. The Double Diamond model, with its four distinct phases—Discover, Define, Develop, and Deliver—was instrumental in ensuring a user-centric and iterative approach.

User Interviews

In the initial Discover phase, I immersed myself in extensive user research. I conducted a series of interviews which involved active listening to capture candid feedback from a diverse group of healthcare service users. By empathizing with users' pain points and preferences, I gained invaluable insights into their needs, motivations, expectations and challenges.

Interview Questions

What is their usual process to find and book with a reliable healthcare provider?

What is their process to get in touch with the healthcare provider’s office?

What were the challenges they faced during this process?

What are their ideal expectations while booking these appointments?

Affinity Mapping

After gathering the interview data, it was organized it into an affinity map to discover common patterns and themes. Broadly classifying all the insights into Goals, Wants, Needs, Motivations, Challenges.

Insights Uncovered

The common goals I observed in my participants were that they all wanted to book appointments and see their healthcare providers as efficiently as possible.

  • Most were pained by the slow communication process, because they had to make phone calls with long wait times, often ending with the call going to voice mail and then having to wait a long time to get a reply back from the healthcare providers office .

  • Unavailability of the providers schedule proved to be a problem when trying to manage their own schedules to take time out of their work. The actual process of finding, booking, and scheduling appointments seemed to be more effort taking than the appointment itself.

  • They were almost all very clear about how they would decide to select a healthcare provider where ratings and referrals from friends and family were a huge factor.

Competitor Analysis

I conducted a comprehensive competitor analysis to gain insights into the existing landscape of healthcare appointment booking platforms. This analysis involved a thorough examination of various competitor apps and platforms, assessing their strengths and weaknesses. By scrutinizing their user interfaces, functionality, and user experiences, I identified opportunities that helped identify the problems users face and also helped to differentiate our app and address the pain points that patients often encountered, later on in the process.

Research Synthesis

Moving into the Define phase, valuable insights were extracted from the affinity map and competitor analysis data, guiding the development of POVs or point-of-view statements (highlighting potential issues) and HMWS or how-might-we questions (exploring potential solutions).

POVs

  • I would like to explore ways to help ‘tech savvy professionals with busy schedules’ to ‘streamline booking and managing their appointments themselves’ because ‘they might not be able to disrupt their work schedules to attend their healthcare appointments’.

  • I would like to explore ways to help ‘people looking to book an appointment with a doctor’ to ‘find an efficient way to communicate with the doctor’s office’ because ‘doctors’ offices are often short staffed and more than often patients’ appointments are not booked due to no response from the office via phone or email booking procedures’ .

HMWs

  • How might we make it easier to access healthcare without a long wait time?

  • How might we have more visibility on doctors’ availability, wait times and schedules?

  • How might we ensure pending appointment requests are booked and not missed?

  • How might we make communication more efficient between a patient and a doctor’s office?

User Personas

I crafted user personas by analyzing the demographics of interview participants (tech savvy individuals, aged 25-45, who are concerned about their own and their family’s health), emphasizing shared user objectives, requirements, and challenges. This persona served as the focal point for the product's ideation and development journey, representing our target audience.

Idea Generation

With a deeper understanding of user needs and market trends, I embarked on a brainstorming journey, exploring diverse concepts to reimagine the healthcare appointment booking experience and communication with the provider’s office.

Ideas

  • Ability for users to book, reschedule or cancel appointments themselves.

  • A dashboard to upload, save and receive health records for more efficient communication.

Who is it for?

  • Tech savvy people who want to save time and manage their schedules
    by managing their healthcare appointments themselves on the go.

  • Tech savvy people who want to avoid paper work and have their
    health records safe and available in one place digitally.

What does it do?

  • Gives them the ability to manage their appointments online via web or
    app which in turn saves time for them. They have visibility on available
    appointment times and can book whatever time works best according
    to their own schedule and also saves them the time that would
    otherwise be spent calling/emailing back and forth with the
    healthcare providers office. This also gives them the ability to
    reschedule or cancel appointments without having to wait for a reply
    from the providers’ office.

  • This helps our users save time and energy when managing their health
    records, it saves them the hassle of filling out paper work, keeping
    track and losing paper records. It will act as an efficient channel
    for quick exchange of documents like prescriptions and doctors’ notes.

How?

  • It shows them the available slots for healthcare providers that can be
    booked, it also shows them their already scheduled appointments and
    gives users the option to reschedule or cancel.

  • This feature gives our users a platform where they can upload their
    health related documents and also receive documents from their
    healthcare providers, documents like test results, x-rays, lab results,
    doctors’ notes, prescriptions, instructions etc.

Story Boards

In the concept development phase of the app design, my focus sharpened on refining the most promising ideas generated during the ideation process. To visualize user journeys and interactions, storyboards became a valuable tool. These visual narratives allowed me to map out the user's experience.

I focused on 2 main ideas generated from my research, to create storyboards:

  • How an app, that empowers users to schedule and manage their appointments, impacts their daily lives.

  • How an app, that enables users to centralize all their health records in a single location, simplifies their healthcare journey.

Site Map

In order to create an intuitive and user-friendly site map, I conducted a card sorting activity involving six participants. This activity played a crucial role in organizing the app's information architecture effectively. By analyzing how users categorized and prioritized the app's features and content, I was able to develop a site map, using Lucid, that aligns with their mental models and expectations. 

User Flows

To ensure a cohesive user experience, I meticulously crafted user flows from the Site maps and user personas in mind, defining the step-by-step interactions within the app. These artifacts streamlined the design process and helped identify critical touchpoints for users.

I focused on two user flows that would be the core functions of this app:

  • Sign In/ Sign: In this user flow, the primary goal is to facilitate a smooth and secure onboarding process for new users and allow existing users to log in seamlessly. Users who are new to the app can either browse as a guest or create an account to access more features, while existing users should be able to log in swiftly.

  • Booking Appointment: The primary objective of this user flow is to enable users to effortlessly find, schedule, and manage healthcare appointments with their preferred providers. This user flow is the core of this app, as it directly addresses the primary user need – booking healthcare appointments efficiently. It is crucial to ensure that this flow is intuitive and user-friendly hence this flow shows the many ways a new appointment can be booked for the users convenience.

Task Flows

To ensure an intuitive user experience, I created some task flows. Each of these task flows was designed keeping in mind the diverse needs and technical proficiencies of the user base, ensuring the app remains accessible, efficient, and user-centric. By outlining the step-by-step sequences of user interactions and decision points, these task flows served as a visual roadmap, aiding in the visualization of the user experience and helping to ensure that the design aligns with user needs and objectives.

  • Sign in with Email: This flow provides a traditional and secure method of signing into the app, making it familiar for users who might not be very tech-savvy.

  • Sign in with Social Media: This flow offers a faster, frictionless alternative for the younger or more digitally connected demographic, capitalizing on the ubiquity of social media platforms.

  • Book New Appointment: This flow prioritizes the core functionality, streamlining the process to be as intuitive and straightforward as possible. This reduces barriers to healthcare access, ultimately encouraging users to proactively manage their health.

  • "Cancel Existing Appointment" flow was developed with empathy towards unforeseen circumstances users may encounter. It’s crucial for users to have the ability to manage or alter their commitments without navigating through convoluted steps.

Lo-Fi Wireframes

Transitioning to low-fidelity wireframes, sketching ideas played a pivotal role in ideation, enabling rapid exploration of various design concepts. These wireframes were sketched with a focus on streamlining the appointment booking process and maintaining consistency throughout the app's various screens.

My design decisions were rooted in the insights I uncovered during the research phase, like the UI trends and layout options I discovered during my competitor analysis, and the insights I gained about what type of interfaces users preferred. Most modern users preferred minimalistic and clean designs.

Mid-Fi Digital Wireframes

I selected a design from the Lo-fi sketches based on feedback from peers, insights from senior designers, and my own intuition about what would resonate with users. I transitioned from low-fidelity sketches to digital mid-fidelity wireframes using Figma. These mid-fidelity wireframes played a pivotal role in the iterative design process. By digitizing the initial concepts, I was able to refine the user interface, interaction flow, and overall user experience. The mid-fidelity wireframes served as a valuable intermediate step in the design process, ensuring that the final product met user needs and expectations, and that the user interface exhibits an visually pleasing design while saving time and resources.

Mid-Fi Wireframes for Desktop

UI Component Library

I designed a comprehensive UI component library to maintain consistency and streamline the design process. This library encompassed essential elements such as the logo, color palette, typography choices, icons, grids, input fields, buttons, cards, search bars, and calendar widgets. The choice of fonts and a color palette featuring blue, pink, and purple was deliberate, as it conveys a sense of welcomeness, friendliness, and ease, aligning perfectly with the app's mission to make healthcare appointments seamless and approachable. By establishing this unified set of design elements, it ensured a cohesive and visually appealing user interface. More importantly, the UI component library served as a dynamic resource throughout the project, facilitating efficient iterations and revisions. It allowed for quick exploration of design variations, rapid prototyping, and easy testing of different visual styles, helping to fine-tune the user experience and visual aesthetics before finalizing the design, ultimately resulting in a polished and user-friendly healthcare app.

Hi-Fi Wireframes

In the final stage of designing the app, I leveraged the foundation established through the UI component library, as well as insights gained from low-fidelity and mid-fidelity wireframes. This informed approach allowed me to create high-fidelity wireframes that closely resembled the app's eventual appearance and functionality. These high-fidelity wireframes served as a critical bridge between conceptualization and the final product.

Usability Tests

The Hi-Fi wireframes were converted into a prototype on Figma. This prototype was instrumental in conducting usability testing sessions. Using Figma's collaborative features, we engaged with real users who interacted with the prototype, providing invaluable insights into the user experience. These sessions helped identify usability issues, refine the app's intuitiveness, and collect user feedback for iterative improvements.

Test Insights

Through the usability tests, a significant design issue came to light. It became evident that the "make a new appointment" button needed to be more prominently displayed to better capture the user's attention, especially since it was a core objective of the app. In response to the insights gained from these tests, I iterated on the design, resulting in an improved version where the process of booking a new appointment became notably quicker and more seamless.

Iterations

Iterations were made for new appointment CTA Button to make it more visible

Iterations were made on minimizing homepage UI

Success Metrics Post Iterations

Revised HI-Fi Wireframes

Conducting usability tests on the initial prototype garnered valuable feedback. These insights guided iterative updates, addressing the identified issues and aligning the design more closely with user needs. Through this iterative process, I refined the high-fidelity wireframes, culminating in a revised prototype that resolved usability concerns. This approach ensured that the app's final design was rooted in user feedback and capable of providing a seamless and user-friendly experience for booking and managing healthcare appointments.

Registration/ Sign In

Booking an Appointment

Reschedule/ Cancel an Appointment

Check out the Interactive Prototype 🡒

Key Takeaways

  • Prioritizing user-centric design is paramount for creating a successful healthcare app.

  • Embracing an iterative design process, as exemplified by the Double Diamond methodology, enables continuous improvement and user-centered refinement.

  • User feedback is a valuable resource for making informed design decisions and addressing pain points effectively.

  • Usability testing plays a pivotal role in identifying critical issues and refining the app's usability and user experience.

Thankyou for scrolling through this case study.