Problem:
As Instructure’s flagship product, Canvas, grew in features and it took on new markets, design and development speed slowed, inconsistencies arose and non-functional requirements became a repeated obstacle. This was because hundreds of different people were working on features, accessibility and internationalization were mandatory for anything we built, and the coordination required to pin down consistency took a lot of time.
Goal:
Develop a scalable, reusable design system that solves interaction problems, accessibility needs, can be fully internationalized and customized, and speeds up feature delivery.
Process:
I collaborated with a lot of talented people here – other product designers, engineers, user interface developers, accessibility experts, to name a few. Through research, testing, and trust we have been able to build out not just a design component library, but a framework that is so flexible it can be adopted by any institution around the globe. My main contribution has been to the usability research and accessibility standards for components. I read dozens of usability studies and conducted my own tests to design highly usable interface elements that comply with WCAG 2.1 AA standards. This ensures people who use a mouse, keyboard or screen reader can access their school’s learning management system with ease.
Result:
We have seen huge success and excitement around InstUI. It is open source, so both our engineering teams and institutions outside Instructure have adopted it. This has sped up product release cycles and ensured consistency across our user experience within Canvas. Our design system has ensured we are fully compliant with government accessibility requirements in countries all over the world which has opened up tremendous opportunities for the business as well.