PROJECT

The project aims to improve the accessibility of the UI elements from MediMe, to reflect what I have learnt from the course: ‘How To Design for Accessibility: for UX Designers (WCAG 2.2)’ by Liz Brown

Role: UX Designer

Duration: 3 days

Methods: Colour Contrast, Colour Independence, Wording, Button Styling, Link Styling and Interactivity

Tools: Figma, WebAim, W3C, ColorBlindly

Solution

  • Re-designed several pages by using the guidelines of Colour Contrast, Colour Independence, Wording, Button Styling, Link Styling and Interactivity to improve accessibility.

Problem

  • MediMe is designed for everyone, therefore it is needed to follow WCAG 2.2 rules to ensure people with disabilities can also access to all functions.

  • There are a few issues with MediMe that do not meet the WCAG 2.2

ORIGINAL UI

The UI below are the original UI of MediMe. In the coming up sections I will be evaluating each one of them and try to improve the overall accessibility based on WCAG 2.2.

COLOR CONTRAST

The first thing to evaluate is the colour contrast.

According to the guidelines, the standard contrast ratio should be 4.5: 1 with exceptions of 3:1 e.g. icons

To evaluate the contrast, I decided to use ColorBlindly to run a greyscale test on the UI:

With greyscale at hand, I tested the colour contrast ratio on WebAIM. All the problematic ratios are shown below:

Now I have adjusted the contrast ratio to at least 4.5:1:

Although the colour contrast is readjusted, it does not mean the UI reaches the standard accessibility. The next thing is to evaluate with Colour Independence.

COLOR INDEPENDENCY

Colour Independency means designs that don't rely on colour alone to convey meaning.

  • ‘Colour should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element’ - w3.org

Luckily, there were no colour independency issues in the previous UI, however, there is one on the payment page:

In this case, The progress is hugely dependent on the colours, which is something we should try to avoid when designing UI. Although we can tell the difference through the darkness in greyscale mode, it is better to adjust such a design to a more accessible state.

Here are the changes I made:

Secondly, I used:

a. tick to represent 'stage complete';

b. hollow round with a thick stroke to represent the 'current stage';

c. hollow round with a thin stroke to represent the 'uncompleted stage'.

Firstly I kept both colours but created two different patterns to indicate the progress:

INTERACTIVE ELEMENT

Signifier/perceived affordance is the key to the interactive elements. It communicates an element's intended use and they are clues that indicate an element is interactive in a certain way.

There are three core types of interactive elements in UI design: Button Styling, Link Styling and Interactivity. In this section, I will be talking about how I improved my UI based on them.

1. Login Screen

There are four issues on the Login Screen:

  1. Label Capitalization(Tone of voice) for the word ‘LOGIN’ looks like it’s shouting at the user, therefore I decided to change it to Sentence case to make it more friendly, conversational and easy to read. I also turned the noun ‘Login’ into a verb to indicate that this is an action.

  2. The login button is filled with colour which makes it harder to read in greyscale, therefore I gave it a border instead.

  3. Sign up button is too small with no indication that it is clickable. I gave it an underline to indicate that it is clickable just like a link.

  4. The page slider at the bottom of the page needs to look more interactive, therefore, I implemented a similar design I used in the progress tracker - a hollow round indicates the previous/next page and a round with the dot indicates the current page.

2. Email & Password Screen

There are three issues on the Email & Password Screen:

  1. Borders either fail to reach the required colour contrast ratio or not providing enough information. therefore I re-designed it to give the users a clearer idea of what to do on this page.

  2. forgot password? is too small and placed in an awkward position. To improve, I made it larger and readjusted its position to make it look more comfortable.

  3. The Arrow button indicates the next page but is too competitive with other elements, which distracts users from focusing on inserting their email and password. To solve the problem, I gave it a border to decrease its competitiveness.

3. Home Screen

There is one issue on the Home Screen:

  1. Buttons do not look clickable during the greyscale test. Therefore, I added borders to indicate that these are clickable buttons.

4. GP Online Screen

There are two issues on the GP Online Screen:

  1. Too many buttons compete against each other to weaken the signifier. Apparently booking with a GP is the key on this page, so I kept those and converted the ‘appointment’ and ‘history’ into clickable links below. I also added a slide bar underneath the GP.

  2. Texts underneath GP’s names are redundant. Removing them helps improve the aesthetic.

5. Covid Update Screen

There is one issue on the Covid Update Screen:

  1. The Colour Contrast Ratio of news titles and background images varies, which may cause trouble when accessing. The solution is to remove the images and highlight the news titles and contents underneath. The bold title will indicate to the users that this is interactable, tap/interact to read more. The main thing here is trying to avoid using terms such as ‘read more, ‘continue’ and ‘click’ because it will be difficult for people who need hearing technologies to understand the content on this page.

OUTCOME

After evaluating and re-designing the features of MediMe, these are the things I learned:

  1. Check the contrast of your colours as you are designing, not once you are all done;

    It is important to always keep in mind that once a certain design decision is made, there is no turning back. The best way to avoid mistakes is to evaluate the decisions whilst you are making them.

  2. Design things that are essential for some, and useful for all.

    Always think for people who have disabilities - what should I do if they have difficulty seeing/hearing/touching/smelling etc?

  3. It’s always about the customer/users

    Always focus on delivering the information instead of visuals. It is important to let the users know what to do.

CONCLUSION