Designing the future of education
I worked as the front-end lead on a major iteration of a learning platform, taking the platform in a bold new direction with a focus on becoming the best tool for learning designers.
The problem
In 2017, we initiated a project to build an entirely new platform from the ground up. Our goal was to create a powerful tool for educators to craft engaging online learning experiences. The previous platform relied on Flash technology, and as we transitioned to JavaScript, we addressed various user experience challenges. Our primary objectives for this project were to enhance collaboration, simplify the platform for new users, and provide scalability for advanced users.
The aero design system
To optimize the design process for a project of this magnitude, it was crucial to establish a robust and adaptable design system. This foundation would facilitate collaboration between designers and engineers and evolve seamlessly throughout the product's development cycle. The design system's influence extended to the product's aesthetics, user experience, as well as the design of the website and marketing materials.
Design system docs
A design system's value lies in its usability. Therefore, we developed an extensive documentation website that comprehensively covers principles, UX, accessibility, and component guidelines. This resource serves as an invaluable reference for designers and engineers working with the system, ensuring its effective utilization across the board.
Motion design
Animating elements played a pivotal role in enhancing the authoring experience by making it more intuitive and user-friendly. Through animations, we conveyed the cause-and-effect relationships of each interaction, ultimately contributing to the overall fluidity and comprehension of the experience.
Encouraging adaptivity
Addressing collaboration challenges included the need to provide a visual representation of the learner experience within the editor. This feature proved particularly advantageous for subject matter experts and instructors, as it allowed them to review and offer feedback on the higher-level structure without the need to navigate through adaptivity scenarios screen by screen.
An extensible plugin ecosystem usable by everyone
The platform's true strength lies in its capacity to generate custom plugins for various content types, including degrees, courses, lessons, screens, and interactive components. Initially, these plugins can be made easily configurable with minimal developer input. Consequently, learning designers gain the ability to modify everything using a standardized configuration interface.
Next-generation learning experiences
The product's adaptability empowered developers to craft captivating interactive experiences in the form of highly configurable plugins. These plugins could subsequently be employed and customized by learning designers.
Bringing 3D into learning
One fascinating example is the 3D screen plugin. Learning designers have the capability to import various models into it and subsequently tailor camera positions for animated transitions between sections.
Interactivity
Learners can be guided to particular sections of the model and provided with labels for reference. Additionally, they have the freedom to click and drag, allowing them to orbit around and explore the model at their discretion.
Animation
Learning designers can select an animation from the model to play or loop within any section, eliminating the need for complex animation tools.
Project outcomes
Ultimately, the project was successful as the aero platform became the foundation for the next-generation learning platform.