Thinking in Code

Designing an interactive CS/Programming course for young professionals who want to learn the basics.

Software: Figma, Photoshop, After Effects, Rive

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.  

Goal: The product vision was to introduce our first programming course for young professionals.
Strategy: An interactive block coding tool where the user builds and tests small apps to learn programming concepts.
Timeline: The course was produced in two main phases over the course of one year, the MVP launch and the updated version of the course that aligned with a brand refresh.
Team:
- Producers - Farita Team (lead), Ada Morse
- Developer - Jack Wojcik
- Designers - Maggie Pan (product), Brendan Milos (UI and motion design)
- Art - Brendan Milos (lead), Tou Yia Xiong

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, iconography, and animations for the course.
Designing and implementing the themed interactivity in collaboration with product design and engineering.

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.

User Research

Affinity Mapping

Clustered and prioritized ideas from the brainstorming session.

Ideation

Initial concepts visualizing the product feature requirements. This was one artifact used in the user interviews.

Testing

Moderated user interviews with Brilliant users who matched our target demographic.

Key Takeaways

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 users.

MVP Visual Design

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.

Iconography

Rough sketches exploring the robot and other interactive objects in each level.

MVP icons used in the interactive solvable puzzles.

Motion Design

The animation states of the robot and the success state feedback.

Illustrations

In-lesson scene setter illustrations focus on the core lesson topic and visualize the concept.

MVP Learnings

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 Design Updates

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. For the core lessons, we used a Google maps-inspired, self-driving delivery vehicle narrative.

Illustrations

The delivery truck would act like a main character for the illustrations that mirrors the user journey, improving throughout the course and encountering increasingly challenging situations to solve.