Learning a new skill is hard – especially when that new skill is science or mathematics. According to the Institute of Education Sciences, 93% of adults in the United States experience some level of math anxiety.
When Sue Khim, CEO of Brilliant.org, left the University of Chicago to launch an interactive learning platform, she had a clear mission: to inspire and develop people to master STEM skills.
Today, Brilliant provides over ten million users with guided and interactive problem-solving courses that are effective and fun. Their courses are designed to make learners feel motivated and successful. There is no formal qualification to attain after completing a course. In fact, that’s the whole point. Whether you’re an adult professional looking to upskill or someone who is naturally curious, Brilliant is a learning platform that doesn’t discriminate. Their goal is to help users learn at their own pace and grasp new concepts.
Brilliant came to us to make their learning experience more engaging by combining UX with game design principles. They had seen our work on Peloton Lanebreak, and they chose us for our track record of bringing playfulness to product design. Our brief was to develop a ‘Game Feel’ North Star vision to build upon an already brilliant product (no pun intended).
ustwo were the kind of collaborative, creative partners you dream to have. They pushed our thinking on the project in the early stages of the product, helping us imagine expansive new ways the “game” of Brilliant could be fun and surprising for learners. We valued the team’s deep game mechanics expertise and wild imagination. ustwo worked seamlessly with our internal team of designers and artists, pulling off a wide swath of design in a short length of time.
Since their early days as a start-up, Brilliant has always been driven by game design. Their platform already featured leaderboards and streaks, and learners could ‘play’ interactive courses featuring characters called Blorbs. However, Brilliant had an ambition to boost user engagement and retention. We know that play can reduce the anxiety associated with tackling unfamiliar concepts and drive sustained engagement, so we were excited to get started.
Our measure of success was whether we could make game mechanics work better for Brilliant in a way that highly retains users after week one, and keeps them motivated to continue learning.
This project allowed us to adapt our Play Thinking design ethos and traditional game mechanics to a learning platform. STEM subjects require deep focus, so we had to strike the right balance between fun and concentration. It was important that the gaming-inspired elements of the platform weren’t too distracting.
Working closely with Brilliant’s product team, we spent ten weeks establishing and defining a ‘Game Feel’ North Star vision that all stakeholders – from designers to course creators – could resonate with.
During the exploration phase, we studied a range of product experiences in gaming, digital, and the physical world to find compelling mechanics, interactions, and aesthetics that we could apply to the Brilliant universe. Then we built various low-fidelity prototypes to thoroughly examine possibilities. We tested up to six different concepts with people who weren’t close to the gaming world, and those who were immersed in it.
We focused our efforts on interactions that delivered emotional engagement and fun, but also usability. This gave us early indications of which animations, graphics and transitions worked well and not so well. We eventually delivered the following:
Showcased on web and mobile through user-tested prototypes.
Detailed mechanics of how learner progression would work, and what would be required to unlock new features in the short and long term.
The stories, characters, and how to introduce these elements as learners interact with the platform.
One cross-organisational team
Brilliant asked us to stick around and guide their team through bringing the ‘Game Feel’ North Star vision to life. Together we worked through a series of production sprints and established best practices. We soon became one team, merging our ways of working. We introduced them to our tried-and-tested agile working practices, with regular retrospective meetings, and we learned from their art director and designers who knew Brilliant’s visual style better than we could.
Designing for future success
After designing a final prototype that learners would love, it was time to showcase the platform through motion. We built on the designs from our ‘Game Feel’ North Star vision and improved navigation between lessons and courses. We also built a learning path page that showed clear direction and progression while maintaining the user’s freedom of choice.
We collaborated closely with Brilliant’s art team, working together to find the right balance of art, UI, and motion to convey both a playful feel and necessary guidance throughout learning. This included whimsical in-lesson flourishes that celebrate success, a ‘Level Gameboard’ that allows learners to track their lesson progress, and a learning companion that guides users to their next lesson.
It was crucial to set Brilliant’s team up for success, so we created a visual asset library which includes key components such as lesson and challenge tiles, lesson detail tooltips, and progress trackers that help users understand their overall points earned. To create moments of delight that motivate learners, we designed components for feedback on performance, including in-lesson celebrations when learners enter the correct answer, and moments of encouragement when learners are struggling.
Why it matters
Traditional methods of education don’t work for everyone. Brilliant.org is creating a culture of learning that encourages curiosity, allows for failure, and doesn’t discriminate. By making STEM learning more accessible online, and breaking down complex topics into a more digestible format, Brilliant has proven the happy union between education and play.
Whether it’s someone learning a new skill to switch careers, or someone who simply wants to keep their brain sharp, Brilliant’s decision to steer away from formal qualifications gives people the freedom to play. We feel proud to have played a part in making STEM learning less intimidating and more approachable.
Note: Imagery in this case study depicts “reference designs” provided by ustwo to Brilliant. The BCU characters and art were created by the Brilliant artists and team for ustwo to include in the designs.