Designing a wonderful authoring experience for millions of users
D2L Brightspace is the world's most popular edtech platform, with over 15 million users across the world. I led the redesign of the Brightspace Editor, a foundational component of the LMS (learning management system). It's a rich HTML text editor supporting a considerable number of important workflows and user types—from students taking tests to instructors designing entire courses.
Through strategic collaboration with internal teams, I identified and reconciled dozens of incongruous authoring experiences and 15 years of technical debt into the design of a brand-new, unified component. I designed and prototyped a mobile-responsive UI that optimized the most important workflows and complied with WCAG AAA accessibility standards.
I ran extensive user testing and worked with developers to build the new editor on a strong technical foundation that allowed for future scalability.
Noah, I really can't express how impressed I've been with your collaboration, passion, and creativity on the Brightspace Editor project. From the early days where you gathered together every single example of our crazy editor across every incarnation, to interviewing internal teams around their needs and desires for this integral tool - you provided what we needed to make the compelling case to invest in this effort, and the blueprint to making it universally accepted across all teams.
Your endless redesigns, as information and technical requirements changed, seemed fueled by a deep passion for an amazing end user experience that I found inspiring. Your joy as we released your vision was tangible and made it exciting for me to work with you. I selfishly hope that I get to work with you into the future, as this was a such a great experience for me, for our dev team, and, soon, for our clients. I hope you have a chance to read all the incoming accolades around our editor - as it is your vision and you deserve recognition for your efforts in making it all happen.
— Jeannette McNamara, Director of Product Management
Challenge
With a rapidly growing platform that spans thousands of customer organizations across the world, D2L faces the challenge of maintaining UI consistency across its vast surface area. The Brightspace Editor is one of the platform's most essential UI components, relied on for dozens of core workflows by students, teachers, and admins alike. Many users spend more time interacting with this component than any other part of Brightspace.
So what did the experience look like? In short, there was no consistent experience. After a thorough audit I found that there were over 40 instances of nine different HTML editors, all of which had their own UI, feature set and accessibility affordances. New editors were built as needed by individual product teams, rather than conceived as one harmonious tool. None of them were built to be mobile responsive. They were all built on different backends, making new features, accessibility, and security updates nearly impossible.
Solution
Working closely with several internal teams, I extracted key workflows and user-facing features from hundreds of Brightspace tools and pages featuring a text editor. These learnings came together in the design of one single HTML Editor component, based on TinyMCE 5, with three authoring modes that account for every use-case while providing a consistent user experience across the platform . I created a new UI that simplified the most common and repeatable actions (such as uploading files and using text styles) and moved common workflows out of buried menus, while retaining and adding to the powerful capabilities that power users expect. The new component is now fully mobile-responsive and consistent across the entire platform.
Result
After designing and conducting detailed user tests on all three authoring modes, I worked closely with the development team to execute with utmost attention to detail. We met with TinyMCE's own frontend team to demonstrate the usability and accessibility improvements built in to our own UI, many of which they ended up adopting in their standard interface moving forward.
The new Brightspace Editor launched to overwhelmingly positive support from social media, client liaisons, and internal teams alike. It's freed up hundreds of hours of engineering time and elegantly supports the design and development of additional features (such as an interactive Code Editor).
Impact of this project:
- Reduced technical debt by removing the need to maintain multiple editors
- Modernized the editor with TinyMCE 5 features and a refreshed UI
- Streamlined key workflows by reducing the number of UI variations
- Implemented a mobile responsive UI on par with the rest of the product experience
- Rolled out to millions of users with overwhelmingly positive feedback
Initial Scoping and Research
The goal was to bring a consistent HTML Editor experience to the entire Brightspace platform.
Inconsistency
My first research step was to comb through hundreds of pages on Brightspace to take stock of exactly what we are working with. Using dev tools to identify every single page where the existing Editor component appeared, I created a spreadsheet of every instance and later converted it to a visual flowchart. I mapped these to nine completely different user interfaces which users would have to learn depending on context.
This research was invaluable because it allowed me to conceive and justify what would end up being three new authoring modes. These UI modes, along with some IA work, would allow our dev team to build a new editor that covered the entire gamut of use-cases while providing a consistent experience.
Responsive Design
As demonstrated below, the existing editor had exceedingly poor responsive design. The toolbar had no way to collapse or prioritize functionality. Toolbar items simply flowed off the screen making for a nearly unusable experience.
Full Editor
Provides the full range of formatting options in a simple responsive interface. Used in context where there is plenty of space and/or text editing is the main function of the page. This editor replaces the majority of existing D2L editors.
Inline Editor
Full-featured editor with a floating UI that surfaces the key features and recedes from view when inactive. Users can access the traditional toolbar with one click. This UI mode is is great when clutter is a concern, such as a page with several rich text fields.
Inline Limited Editor
A special version of the Inline editor with access to the full toolbar removed. This is specially-crafted for D2L's social feed which support very limited formatting features by design.