Accessible Design System to answer CS agents needs

Supporting Customer Service Agents through brand new accessible UI to WCAG 2.1 with implemented dyslexia recommendations.

Problem and hypothesis

When I joined People’s Postcode Lottery, one of the main problems with the old CRM was its inaccessible interface. It was audited by dyslexia consultants to establish how it can be improved for the Customer Service.

For the new CRM, there was requirement set for it to be accessible for users with dyslexia, including to a level AA of Web Content Accessibility Guidelines 2.1.

Collaboration and my role

I joined People’s Postcode Lottery as the first internal UX designer. I have worked with developers, Product Owners, stakeholders and users to establish how to approach the problem and its priorities. I have showcased the differences and benefits of digital accessibility, designed accessible styles and components, and worked with developers on its implementation through Zeplin and Storybook.

Progress to solution

We started from analysis of available dyslexia recommendations, progressed through interviews with 10 customer service agents and survey with 68 of them. I showcased different accessibility levels and benefits of meeting WCAG 2.1. We established what UI framework to use and how to work efficient with design system. I designed components based on React Material UI in Adobe XD and worked with developers on connection of Zeplin with Storybook.

Problem-solving solution

We established an accessible single source of truth with instructions how to maintain the accessibility. The current design system is re-usable by consultant designers and by developers.

Challenges

Some team members and managers were prejudiced that accessibility is an add-on and not minimal valuable product. Through user interviews, usability testing and digital accessibility showcases, I and other accessibility champions managed to show its priority and value.

Outcomes for users and business

Customer Service agents are able to use the CRM more efficiently and without workarounds. The business became more inclusive with possibility of hiring Customer Service agents with disabilities.

What I learned

Through working on this project, I learned about neurodiversity and making UI for neurodiversity beyond dyslexia. I appreciated the support of so many team members who helped me to get digital accessibility implemented through our CRM product development.

storybook logo and zeplin logo