Case study:

Creating an accessible component library for a legacy healthcare platform

The Wellbeing Way app had grown without a consistent design system, creating accessibility issues, visual inconsistencies and inefficiencies across design and development.

I worked closely with developers to audit the existing product and create an accessible component library that reused existing code where possible, improved consistency and made future product improvements faster to design and deliver.

Overview

Xyla, a provider of NHS health programmes, incorporates the Wellbeing Way (WW) app into its services to help users adopt sustainable lifestyle changes.

Xyla’s new branding needed to be applied to the product, coinciding with a planned upgrade from Ionic v4 as part of broader improvement initiatives.

At the time, there was no component library, which led to UI inconsistencies that negatively impacted user experience and increased design and development costs for the business.

Background

Challenge

Establish a component library to support the rebrand, provide consistency and improve usability for users and enhance the efficiency of product design, development and maintenance processes.

Scope and constraints

Rebrand WW in accordance with Xyla brand guidelines, leveraging Ionic v5 as a foundation for the new component library with custom components to be generated as required.

Designs needed adhere to WCAG 2.1 accessibility standards, aligning with NHS requirements at the time.

Designs had to be ready for refinement within 4 weeks.

There was no scope for user research. Components would be tested and optimised later as part of an imminent, subsequent product overhaul.

My role

Lead designer responsible for strategic approach, planning, communication and deliverables.

Stages of work

  1. Component audit

  2. Component library design

  3. Library publication and release

Request access to the full case study

For confidentiality reasons, you need a password to access the full project details.

Already have the password?

Enter the password to continue reading.