Accessibility analysis for healthcare system

Study case
RESEARCH

Overview of the homepage (Current website)

full image
INTRODUCTION
The platform helps find the right doctor make an appointment with him or her relatives, and manage medical records and data, set reminders to take medication.
TEAM
Solo designer, 2 mentors
TIMELINE
Mar β€” May 2020
TOOLS
Figma, Google sheets
MY ROLE
Responsible for in-depth research, Hypotheses, JTBD framework, User Interview, Usability testing, Collaboration with mentors, Presentation results.
PROBLEM STATEMENT

People with visual impairments want to make an online appointment on their own, choosing a doctor and a convenient time for an appointment. Why I decided to test the platform for accessibility to visually impaired and colour blindness users.

Challenges
πŸ“ Online moderation user testing
Testing required special preparation and the use of additional tools (such as a voiceover) and specific movements during testing.
πŸƒπŸ» Updating components and text styles
Checking for visual components for accessibility, such as sufficient contrast, size of text styles, images, as well as understanding the importance of the influence of semantics in front-end developmen
πŸ‘©πŸ»β€πŸ’» Access to users
It was tougher to directly reach potential visually impaired and colour blindness users.

πŸ†˜

Pain points (people with visual impairments)

iamge

Π‘all the reception

You have to wait a long time for an answer
It is not convenient to choose slots for the appointment

iamge

Daily waiting in line

Takes too much time

respondents for testing
user image

Colour blindness

The organizations are likely seeking ways to improve efficiency, collaboration, and decision-making within their teams.

user image

Myopia/farsightedness

The organizations are likely seeking ways to improve efficiency, collaboration, and decision-making within their teams.

user image

A visually impaired user

Users who frequently engage in video calls for various purposes, such as sales meetings, client interactions, project updates, and internal discussions.

PROCESS

I initiated an in-depth analysis of user interactions on the current platform, pinpointing potential pain points and making preparations for testing

Hypotheses (unknown)
  • πŸ—“οΈ I don't know how users most often make an appointment with a certain doctor.
  • πŸ‘¨πŸ»β€ It is not known whether the user will find the necessary doctor.
  • πŸ‘­ Is it possible to avoid physical queues at the hospital when registering online?
Hypotheses (Interface)

🚨

Difficult to read options for searching for a doctor.

Search by type is not sufficiently contrastive, especially not the default state of tabs

image

🚨

The text in the modal card "appointment details" is not visible enough + Icon β€œX” is too small.

image

🚨

The text according to the colour of the button is not readable enough, it is necessary to check the size of the fonts as well.

image

Job-To-Be-Done for booking doctor appointment

Situation

Body temperature 38.5 (4th day in a row), runny nose, sore throat.

action

How to get to an appointment/online consultation with a doctor.

so i can

Find out what is the cause of the prolonged temperature, how to speed up the recovery process

user interview
First, there was a stage of getting to know each other, introducing and familiarizing yourself with what will happen in the next 40 minutes. It was also important to ask and hear how the process of making an appointment/seeing doctors usually go and how exactly his last visit went.

Scenario (short version)

πŸ‘‹ Introductory questions

In what cases do you consult a doctor? How often does this happen?

Please tell me how exactly you make an appointment with a doctor? (type of communication) Describe your recent reception experience.

Please tell us about an negative appointment or doctor's visit.

πŸ“ Script task

1. Enter the site Helsi.me in the search of your browser

2. Please find the doctor you need to make an appointment on this site

3. Please go to this doctor's page.

4. What is the address of the hospital where the doctor accepts patients?

iamge
Results

The main measurement criteria:

  • Whether the user managed to cope with the task(+,-);
  • How long it took to complete
  • In general, she entered her own comments and observations (the respondent's as well)
Has the task been completed?

User 2 -

Myopia/farsightedness

Success

βœ…

User 3 -

Blind

Failed

β›”

User 1 -

Colour blindness

Success

βœ…

Session table result

full image
own observations

User 2 -

Myopia/farsightedness

Success

βœ…

The task was completed, however, during the execution of the task, some users needed more time to complete intermediate tasks, since some components were not visible enough. I also noticed some changes in user behavior.

iamge

Approaching the monitor on purpose

During testing, some users unconsciously moved their heads closer to the monitor to examine the details.

iamge

Scaling web browsers more than 110%

In some cases, users resorted to zooming using the trackpad or zooming in the browser.

result

A blind user used readers (Voiceover reader) by switching keyboard keys. As a result of the session, the user managed to complete 70% of the tasks using the program's voiceover, but unfortunately, the last important stage was a failure.

User 3 -

Blind

Failed

β›”

After choosing the time and date of the appointment , a modal window appears for filling in personal data, unfortunately, front-end part wasn't developed right (semantic part) so the voice reader couldn’t perform its action.

iamge

User 1 -

Colour blindness

Success

βœ…

Non-contrast elements and small(thin) font size

Problem

There are mostly non-contrast elements, users resorted to scaling in almost all cases)

image

Non-contrast Buttons

Problem

The default state of the buttons is not contrasting enough.

image
Impact

πŸ“ The testing showed where there are gaps in the product that should be worked on comprehensively - by the whole team, most of them can be solved in an affordable way and in a short time. This shows that designing and developing a sufficient level of accessibility (AA) of web pages and applications is not so massive resource-intensive.

Having collected the artifacts, I presented and sent them to the team of developers and designers of this platform, changes were made in the next iteration.

  • πŸ“ The semantic labels was rewritten in detail in a team of designers and front-end developers and tested
  • πŸ•Ή Clickable components (buttons and links) have been to have more contrast.
  • πŸŽ™ Screen reader users can now make doctor appointments and order medication on their own.