Media
Baking accessibility into The Very Group’s new design system
August 4, 2023
By Lee Somers, product manager, DCX Fuse Enablement
Behind every great online user experience is a great design system. Google has Material. Spotify has Encore. The BBC has GEL. And now The Very Group has Fuse.
OK, so perhaps it’s a bit early to be labelling our design system “great”. And maybe we’re getting a bit ahead of ourselves by including it in the same paragraph as those superstar design systems I’ve mentioned above. But there’s no doubt that our design system, Fuse, will play a critical role in every great digital customer experience we create from now on.
Today, design systems are one of the core foundations on which digital customer experiences are built. And, as anyone who’s ever built anything from bricks and mortar will tell you, your product is only ever as strong as your foundations. If you apply care, time and effort to your foundations, you’re well on the way to building something solid and robust that people want to use.
For us in the Fuse design system team, building solid foundations means ensuring that the components of our design system adhere to 5 key principles. They must be focused on user needs and be honest, intuitive, consistent and inclusive. If a component doesn’t tick all 5 of these boxes, then it has no place in Fuse.
All 5 of these principles are equally important to us but we focussed a lot of our attention on inclusivity over the last 18 months as we knew that we had (and still have) a lot of work to do to make The Very Group’s digital products equally accessible to everyone.
Whoever you are, and whatever your ability, we want you to enjoy a simple, pain-free experience when shopping with Very or Littlewoods. This means that all of the different ways customers shop - whether it’s using a keyboard to navigate instead of a mouse, or hearing products being described rather than seeing them - need to be fully considered for every single user experience.
To ensure that every component that goes into our design system meets the WCAG 2.1 AA accessibility standards we’re committed to achieving, the Fuse team have made it our mission to bake accessibility into every stage of the component development process. From understanding and establishing its requirements, all the way through to testing the new component with assistive technology users, accessibility is at the forefront of everything we do.
The first stage of our 5 stage development process is called Define. Our objective at this stage is to define the scope of the component and its requirements. What’s its purpose? How will it work? Where might it be used? We also start to consider how we can make it accessible to everyone. From a long list of 24 different accessibility criteria, we identify and document the ones that we’ll need to consider in the component’s design and build. Starting the conversation about accessibility at the very beginning of the process sets us up well to achieve the AA standard we’re aiming for.
Stage 2 is our Design stage. It’s also when we do our ‘discovery’ and try to answer any previously unanswered questions. It’s a great first opportunity for us to consult our accessibility expert to get her opinion on our design thinking and any accessibility considerations we might have missed.
Websites or design systems where accessibility has been fully considered are few and far between, but there are one or two out there, and we find that it’s always worth looking to those for inspiration before and during the design process. Once we have our initial designs in Figma - our design tool of choice - we are able to use its many accessibility plugins to run automated checks on things like colour contrast and keyboard focus order.
Once the designs are complete, and we’re happy that they’re setting us up to achieve AA accessibility, we move into our Build and Test stage. This is the last opportunity for us to make sure we’re building an inclusive component, so we double down on accessibility at this point. Automated testing tools like Chrome’s Accessible Web Helper plugin and Silktide help us to flag and fix some of the issues, while structured manual testing with screen readers and other assistive technology tools often uncover problems that the automated tools miss.
Before we release any new component, we provide our accessibility expert with a beta version of it in Storybook and ask her for one final, thorough check. Even at this late stage, there’s usually something we’ve missed or not quite executed correctly.
Stage 4 is Document where we write up our usage guidance, ready to be published to our online Experience Hub. These user guides are the perfect place to document how we’ve made the component accessible and what, if anything, designers and developers need to do to maintain this accessibility when they use it to design and build user experiences.
That just leaves Release, which is the final stage of our component development process. As you might have guessed, this is where we make v1.0 of the component, and all of its supporting documentation, available for everyone to use. Once a component is being used in a live application, we’re able to test it with real assistive technology users, thanks to our fantastic UX research team, and our accessibility research partner Fable.
So, to summarise, building a design system from scratch, as we’re doing with Fuse, presents an unmissable opportunity to bake accessibility into the Very foundations of our user experience. Having a comprehensive set of AA-accessible components significantly improves our chances of creating AA-accessible customer experiences but, to make this happen, it’s vital that we prioritise accessibility at every stage of the component development process.
While it improves our chances of achieving AA accessibility, it doesn’t in any way guarantee it. If we are to meet the accessibility targets the business has set itself, we need to ensure that accessibility isn’t just baked into the component development process, but into all of our other development processes too.
