Skip to main content

Designing the future of education

I worked as the design lead on a major iteration of Smart Sparrow’s product. We took the platform in a bold new direction, focusing on becoming the best tool for learning designers.

https://www.floodin.com/
https://www.anthropic.com/
https://agence-belle-epoque.fr/en/
https://unmaze.com.br/en/
https://next-movies-zeta.vercel.app/
  • Art Direction
  • UX and UI Design
  • Front End Development
  • Motion Design
The aero lesson builder app dragging an audio component into a screen about plant cells.

The problem

In 2017, Smart Sparrow began a project to build an entirely new platform to from the ground up to serve as the most powerful tool for educators to create online learning experiences. The old platform was built in Flash, and there were a number of user experience problems to solve in the process of moving the platform to Javascript. The primary goals for the project were reducing barriers to collaboration, and making the platform both easier for new users, but with plenty of room to scale for advanced users.

A set of dark themed components for the aero design system

The aero design system

To streamline the design process across designers and engineers for such a large project, it was important to lay the foundations with a strong, flexible design system that could evolve during the product’s development cycle. This would inform both the aesthetics and user experience across the product itself as well as the website and marketing material.

The homepage of the aero design system docs website linking to principles and components.

Design system docs

A design system is useless if no one knows how to use it, so we put together a comprehensive documentation website to cover principles, ux, accessibility, and component guidelines for designers and engineers working with the system.

A dramatic ocean scene with lava forming a new land mass.

Motion design

Animation was a core principle in making the authoring experience a more understandable process. Elements animate in ways that indicate the cause and effect of each interaction to improve the fluidity of the overall experience.

Encouraging adaptivity

A major part of solving for collaboration was being able to visualize the learner experience in the editor. This was especially beneficial for subject matter experts and instructors need to review and give feedback on the higher level structure without having to dig through all of the adaptivity scenarios screen by screen.

A drag and drop storyboard style editor for creating an adaptive lesson.

An extensible plugin ecosystem usable by everyone

The most powerful aspect of the platform is the ability to create custom plugins for any content, whether it be a degree, course, lesson, screen, or interactive component. Out of the box these can be made configurable with minimal effort from developers. Learning designers can then edit everything using a common configuration interface.

Configuration options for a component.
Configuration options for text.

Next-generation learning experiences

The flexibility of the product allowed for developers to create engaging interactive experiences as highly configurable plugins that could then be used and manipulated by learning designers.

Bringing 3D into learning

One really cool example is the 3D screen plugin. Learning designers can load any model into it and then configure camera positions to animate to for each section.

Interactivity

Learners can then be directed to specific parts of the model and shown labels. They’re also able to click and drag to orbit around and freely explore at any time.

Animation

Learning designers can pick an animation included in the model to play or loop for any section without having to use any complex animation tools.

Project outcomes

Ultimately the project was successful after Smart Sparrow and the aero platform were acquired by Pearson in 2020 to become a foundation for their next generation learning platform.