LearnStorm
Context: Back-to-school marketing campaign
In 2015 and 2016, Khan Academy ran a spring marketing campaign called "LearnStorm" that had significant in-person elements, was limited to a few geographic locations, and was outside of the main product experience. It did contain activity leaderboards, but these only updated weekly.
In preparation for the 2017 back-to-school season (August-October), our marketing team decided to transform LearnStorm into a nationwide, in-product experience for classrooms.
I was the lead product designer for the 1 month design project, pairing with visual designer Natalie Fitzgerald. We also contracted with Moving Brands to drive concept development and create the LearnStorm brand and our marketing site.
Mia Mellon was the overall marketing project lead for LearnStorm, working closely with Eric Li. Harsha Dronamraju was the product manager, with devs Sean Driedger (lead), Riley Shaw, Sarah Lim, and others.
Initial concept
In the previous versions of LearnStorm, our leaderboards were focused around "mastery" and "hustle". "Mastery" was measured by the number of math skills mastered by students. "Hustle" was measured by a secret formula that rewarded students who were having to work hard but were making real progress.
However, for back-to-school 2017, we were launching a new product, teacher-created assignments, that was completely separate from the older skill mastery product. When I came on the project, the team initially wanted to have some kind of leaderboard/progress mechanic that could apply to any of our products, perhaps using our "energy points," which students receive for all kinds of activities.
I persuaded the team that we should instead focus the campaign around our new primary product, assignments, for several reasons:
-
Assignments, not skill mastery, were the product we had specifically developed for 2017 classrooms. The skill mastery product was not being actively promoted or improved.
-
Energy points were very game-able by students, and our system also sometimes awarded a large bounty of points for achieving a milestone, making energy points a very difficult currency to control.
-
Assignments were specifically under the control of teachers, so they could ensure that what students were working on to earn progress would be appropriate for that student.
-
Through assignments, teachers would also be able to throttle student activity so that one student doesn't go totally wild on their own and achieve all of the milestones for the whole class.
Tree rings as a progress bar
The main theme of LearnStorm is helping students build a "growth mindset," the recognition that you can learn anything if you persist; your intelligence can grow, it's not a fixed quantity.
Moving Brands developed several brand concepts around the idea of growth mindset. In this concept about tree rings, which they combined with an idea of zooming in to greater levels of detail, I recognized that the idea of a tree growing new rings of learning would be a fantastic foundation for the learning progress system I would develop in-product.
The Moving Brands team then worked on initial visual explorations in this direction:
Here are some of my initial product explorations inspired by the Moving Brands visual direction:
Keep going, keep growing.
At the same time that the Moving Brands team was developing the visual branding for LearnStorm, they were also driving the development of a tagline.
In a pitch session with our two teams, I was thinking about what I would want the message to be on our progress dashboard to inspire students to achieve ever-higher levels. There, I coined the phrase that we chose as our tagline: "Keep going, keep growing."
Developing the game mechanics
I'd already decided that the basic currency for earning levels would be completing the assignments from your teacher. But there were many open questions about how the whole system should work.
In the MDA game design framework (Mechanics, Dynamics, Aesthetics), the designer determines the feelings they want the players to experience (Aesthetics), then they define the rules (Mechanics) that create the emergent behavior (Dynamics) that then actually drive how the players feel (again, the Aesthetics).
I developed key principles for how the system should make students feel (Aesthetics):
-
Students should feel primarily that they're part of a team, rather than individual players.
-
Students should not feel strongly singled out for holding back class progress.
-
Students should feel good about any new learning they achieve, and be excited to "Keep going, keep growing."
-
Students should have a collective, highly anticipated, and exciting reveal at the end of their practice session.
-
Students should be able to enjoy the competition of trying to outdo other classes at their school.
I developed the following rules (Mechanics), with their emergent behaviors (Dynamics) listed below each, which ultimately drive the desired feelings and experiences (Aesthetics):
-
Earning a new level is based on the class completing an average of three assignments per student (~30 minutes/week, our goal for usage). Specifically who completed the assignments is not surfaced in the tracker.
-
If a student is absent or doesn't complete their work, they don't become a blocker for the class.
-
Additionally, the classmates of a struggling student encourage and help them. "You can do it! Growth mindset!"
-
Even if a struggling student only completes one assignment, that's still a point earned for the team.
-
Instead of competing with each other within a class for status (e.g. "I completed more assignments than you."), students focus on completing their learning assignments to reach the class goal.
-
-
The class qualifies for a chance to win a prize box if they earn 6 levels (1 per week of the campaign), but there is no limit to the number of levels they can earn together.
-
Rather than completing their three assignments and then doing something else, motivated students request more work from their teachers (and the teachers are astounded by this happening).
-
Whole classes ask for more and more assignments and try to see how many levels they can earn.
-
-
At the end of the class session, the teacher projects the progress tracker for the class, and it adds up the assignments that students have completed, very slowly. It stops when the level is completed or all the assignments have been added in. Before this moment, the system does not give students any collective sense of whether their class is on track to achieve their goal.
-
As the tracker slowly counts up, excitement rises in the room, the anticipation reaching a crescendo as the tracker comes close to filling the level.
-
As a bonus, when a class completes a level, they typically have more leftover progress—the teacher clicks the button to start counting up the next level, and the anticipation of possibly achieving two levels amplifies the excitement.
-
-
Assignments created by the teacher are appropriate for each student such that they can achieve progress in similar amounts of time despite varying ages or current skill levels.
-
Teachers who have multiple class periods show the different classes' trackers to each other, inspiring them to learn more and earn more levels, even if the classes are across different grades or learning tracks.
-
Students talk to each other on the playground about how many levels their classes have earned, motivating them to earn more.
-
Student leaders in the class marshal their peers to complete more assignments in order to compete with the other classes.
-
The end result of LearnStorm is that the whole class comes together as a team, working and motivated by something bigger than themselves. It's a positive experience for every student, and the success they have in pushing through difficult assignments is the experience that actually helps them develop a real growth mindset—through the incentives of LearnStorm, they have learned that they, in fact, can learn.
Final design
Many small features were cut from the final design because of engineering constraints, including sound effects, launching prize videos, etc. Fortunately, the core elements of LearnStorm held the magic necessary to make the experience a huge success.
A key feature that intern Sarah Lim invested a lot of development time in was making the progress tracker count up slowly and steadily. Each level is designed to take a full 20 seconds of time to fill from 0% to 100%. This extended stretch of time is where the anticipation and excitement builds, not dissimilar from the wheels on a slot machine spinning.
Here's a look at what the class would see after their first session of completing assignments for LearnStorm. The teacher displays the tracker with their class projector and then presses the "Check for progress" button:
As the bar slowly fills and the percentage rises, the excitement in the room builds.
If the bar stops before reaching 100%, there's a sigh of disappointment at not earning the level today, but with the knowledge that they can earn the level next time.
But if the bar fills all the way to 100%, the class celebrates!
The class earns new levels, each a different texture created by visual designer Natalie Fitzgerald.
Here are some links to more teacher videos of their students participating in LearnStorm:
