Case Study: Thinking in Code
Designing an interactive CS/Programming course for young professionals who want to learn the basics.
Brilliant is a STEM learning app on iOS, Android, and the web. It’s a platform where players engage with 60+ interactive courses to improve their problem solving skills.
The product vision for this new course was to address a gap in our course learning paths. We wanted to make content that our core users, young professionals, had been demanding for awhile.
To accomplish this goal, we created a course centered around an interactive block coding tool focused on mobile experience. With this tool, the user builds and tests small apps to learn programming concepts.
The course was produced in two main phases, the MVP launch and the updated version of the course with more polish.
My Role
As part of the cross-functional course production team, we were responsible for delivering incremental updates to the course. Our team directly collaborated with the team responsible for creating the block coding tool we used int he course as well as the leadership team who was responsible for final reviews and approval.
My role included:
Driving the narrative theming process to arrive at a solution that worked for our core users and aligned with our brand.
Creating high quality production assets including illustrations and animations for the course.
Designing and implementing the themed interactivity in collaboration with product design and engineering.
Narrative Theming (MVP)
My first priority was to align the team on a narrative that was appealing to our core audience and also fit our brand. This happened in three main phases over a couple weeks.
Facilitate a brainstorming session with the team to generate a shortlist of ideas that felt in-line with our brand.
Generate visual concepts together with another artist to use as artifacts.
Validate our ideas through user research targeted are the core demographic for this course.
The brainstorming session resulted in a few ideas that the team believed in. For the initial concepts, we wanted to show what the visuals would look like at-a-glance based on the initial feature requirements documentation and making sure that each concept had a visual representation of all the main elements. The core concept was that users would program a robot to automatically interact with targets and avoid obstacles.
The last phase involved me conducting one round of moderated interviews with Brilliant users who matched the core demographic we were targeting.
Based on that research, we defined guidelines regarding what a successful narrative theme looked like:
Align the story to actual examples of coding in the real world.
Feed into my love for sci-fi and futuristic themes.
Make it accessible for novice programmers.
Feeling game-like is a bonus as long as it isn’t patronizing to me as an adult.
Visual Direction (MVP)
Scene setter illustration.
Based on the theming process, we chose the video game developer narrative since it was both accessible and fun without having overly contrived real-world scenarios.
This narrative has a history dating back to the 1970’s when a Stanford graduate used “Karel the robot” to teach the fundamentals of programming to students.
Since the visuals were going to be used in the interactive coding tool, this added a few design constraints:
All assets needed to read at a small scale
The robot needed to have a clear indication of what direction it was looking.
Objects to pick up should look desirable and obstacles to avoid should look undesirable.
Concept sketches for the robot, obstacles, and goals.
Final MVP robot design.
As part of the concept process, I created motion mocks to see how the robot would transition between various functions at a small scale.
The block coding tool was being developed concurrently while we produced course content. This meant working within limitations of scope to provide as much visual polish as possible.
Through this collaboration, I was able to document various methods for implementing art+animations into the tool and even requesting new features from the tools team, like an animated end state modal.
Final interactive in situ.
Scene Setter Illustrations
In-lesson scene setter illustrations are an important way to add visual interest and spark curiosity from our learners.
Starting from the core lesson topic and ideating based on that concept was a useful process to creating illustrations.
MVP Learnings
Scene setter illustration.
Key learnings from the MVP launch:
The course broke a record for week 1 retention and was immediately among the top engaged courses in the product, validating that users wanted this content.
Practice lessons were just being conceived and showed promise to create additional content.
Re-skinning the block coding interactive was a long process and would require further work to make turn key.
Refreshed and Rebuilt
Over the following year, there were big changes to the product that impacted how we approached the updated course.
Creative direction was evolving after a brand refresh and the art style saw updates as a result among other design systems. Also practice lessons became a larger focus and this also needed to be based on the block coding interactive.
Visual Direction Updates
Updated interactive theme and scene setter illustration.
As part of our brand refresh, we wanted to lean into being a trusted and effective product while using fun, game-like qualities as a secondary attribute. This meant some updates to the narrative theming.
For the core lessons, we used a Google maps-like, self driving delivery vehicle narrative.
The autonomous delivery vehicle was now the main character of the course. We wanted to strike a balance between believability and humor.
Concept sketches of self driving delivery vehicle and robot worker.
Final autonomous delivery truck design.
Once we settled on a design, I created turnaround assets in order to quickly place the truck in multiple illustrations while getting the most visual variety out of the composition.
Scene Setter Illustrations
The delivery truck would act like a main character for the illustrations that mirrors the user journey.
The concept behind the story is that the vehicle and learner will improve throughout the course and encounter increasingly challenging situations to solve.
Interactivity Updates
Core lesson theme in situ (self-driving delivery truck).
Practice lesson theme in situ (robot video game).
The increased focus on practice lessons meant that we wanted to visually distinguish practice from core lessons in the block coding interactives.
For the core lessons, we used a Google maps-like, self driving delivery vehicle narrative. For the practice lesson, we updated the look of the MVP narrative of the robot video game.
Bespoke map backgrounds for in-lesson problems.
To make the core lesson feel like each problem takes place in a specific location, we designed several bespoke maps to work with specific in-lesson problems.
As an educational product, it’s important to support learners when they make mistakes and help them recover. To address this, I designed mocks to give the learner clear and concise feedback when they got a problem wrong.
For the practice lessons, we did a glow up on the MVP narrative. In order to keep a low scope, it was important to maintain as much parity with the core lesson theme in terms of iconography and motion design.
