Accesible design management system
Accessibility and Design system management
Web accessibility is a large and important topic. It is also incredibly nuanced, and with so many nuances it can seem daunting and complex.
Most businesses are aware that they should be considering accessibility, but it can be tricky to explain to clients past colour, contrast and text size as many of the elements are code based - and unless you work in the web, they can sound too 'techy'.
There's also the issue of retrofitting, which is understandably harder than implementation in a new design, but of course, with many businesses, retrofitting accessibility requirements is unavoidable.
I have worked hard to champion and explain accessibility to business teams, and working with various development teams, to implement and create best practice guides to follow for build.
Step 1; The brief - A new design system and a chance for change (and an opportunity to improve what's existing)
When Zurich underwent a global rebrand, it was a great opportunity to improve accessibility from the ground up, starting with the new DSM being created by Zurich Global.
I fed in from the start as UK accessibility champion, and worked hard to present back both the UK and European business stakeholders, explaining the importance of web accessibility, and how various elements worked - from mark up and structure on online PDFs and web pages to creation of reusable code packages for common elements that could be supplied to dev teams.
This helped the UK feed into the wider Global brand, rather than simply being led by the group.
Step 2; Increasing business understanding and support
Before I started work in earnest, it was important to gain business buy in for improving what we had, and for feeding into the new Global Design System (being created by designers in Zurich Barcelona).
I ran numerous workshops, presented at marketing huddles and to brand teams to explain the various ways we could work together to improve accessibility.
I also arranged support from an external agency who feeds directly into the WCAG guidelines to provide annotation and testing with assistive technology users
I explained crossover between accessibility requirements for screen readers and SEO to ensure further buy in
Step 3; Retrofitting and improving existing solutions
It's always fun as a UXer to have the freedom to create things from scratch, as with the DSM (which I'll explain below).
However, just as important is to ensure you improve what you have where you can, and to report proven results to keep momentum and interest in the business, as well as improve the experience for users.
Automated testing has it's place, and with such a large web estate, it's necessary.
Using SiteImprove, I created an accessibility backlog managed through Trello to assess and prioritise what we could fix on our existing sites.
I then divided this into what could be improved by the CMS team, and what required development work, assigning to the correct teams and monitoring change every 2 weeks.
Step 4; The new Design System
A global rebrand was the perfect opportunity to get accessibility baked in to our new UI elements and components. The UI elements themselves were being created by the Barcelona design team using Sketch and Invision, with StoryBook sitting behind for developers.
Though the designs looked fantastic, and visual elements like colour contrast and text size were considered in the design, there was a gap in advice for developers in terms of required aria and other mark up, fallbacks where design would not translate to native app controllers, and code packages which could be reused.
I work collaboratively with the global team to feed into this design system, supplying the above which means a really robust and easy to use system.
As the system is internal, the link is not yet publicly available without request.
