Creating an Accessible Design System with React

By Adam W., Director, User Experience Design

Part of our Ethos at Cengage is to “Set the Bar Higher,” so we’re always looking for ways to improve how we work. We recognized the need to improve accessibility, performance, and design consistency, while standardizing our process for building products across teams. We explored creating our design system and chose to use React because it offers an open-source framework, which will enable other companies to leverage and benefit from our efforts, too. While we’re not the first company to build a design system with React, we saw an opportunity to focus on accessibility features, which are critical for Cengage products.

This project began as a grassroots effort – without a team or the capacity to create a team. We focused on quality and building what Cengage needed, and invested significant time and energy to ensure we got it right – from the complexity of the date picker, to being mindful of battery life and data usage. Realizing hundreds of developers and millions of students would benefit from the library motivated us to create the best resource that we could.

Fast forward two years – today we have a team dedicated to developing the system, dubbed React Magma. The core building blocks are in place and we’re working to create patterns and templates that deliver additional value at scale. To ensure we maintain the rigor and the best-in-breed experience during growth, we’ve documented usage and contribution guidelines so others can utilize and improve upon the library. Our hope is that React Magma will grow and eventually become an industry-leading system for universal design, meaning it will be accessible to all people regardless of age, disability or other factors.

Throughout the process, we’ve recruited different departments to weigh in – from marketing and quality assurance, to National Geographic and the Perkins Access team from Perkins School for the Blind – to help us ensure we’re delivering consistency, quality, and accessibility for learning components. We continue to involve more teams as the work progresses, and our regular dialogue with Perkins Access has been invaluable – they work as an extended part of our team and have been a true partner in this effort.

While we’ve made great progress, we’ve also met with our share of challenges along the way. The opportunity to define the standard was interesting and fun but also extremely difficult, as there was no clear path to success. At first, it was a struggle to bootstrap internally – we didn’t have a team but needed resources, the project didn’t fit a standard, and our developers hadn’t built anything like this before. Once we got support, we made progress quickly. Our Agile approach was critical – in the beginning, we changed our mind constantly and were able to turn on a dime. Our commitment to quality was also a core tenet of this work – we never sacrificed quality, but sometimes that meant scrapping two weeks of work. There’s been no shortage of challenges to solve for!

The system that we’ve built enables us to deliver in a scalable way, and to create experiences that are highly accessible, consistent, intuitive, and comply with all Cengage standards. This project proves that we can build and innovate anything – we accomplished this work on the margins and with a small team, all working towards a shared goal. As Cengage’s digital business continues to grow, this will be an important resource to support our accelerated pace. 

If you’d like to learn more or become involved with the React Magma Design System, please reach out. The project is hosted on GitHub, and the source code is accessible to all.