Case study:
Bringing a component library to a historic codebase
Collaborating with developers, I redesigned Wellbeing Way app UI, creating an accessible component library that leveraged the existing code.
This initiative improved delivery speeds, ensured compliance with NHS accessibility standards and laid the foundation for the delivery of subsequent roadmap items (see ‘Discovery-led approach to revolutionise a failing app’ case study.
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
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.
Challenge
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.
Scope and constraints
Lead designer responsible for strategic approach, planning, communication and deliverables.
My role
Stages of work
Component audit
Component library design
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.
