Streaks help learners come back and learn daily

Designing for learners’ success part 1

streak-profile
herostreak

Problem

Habit formation in learning is crucial 

Retention of information is a challenge across different types Codecademy learners

While learning, practicing, assessment constitute the basic learning cycle, continuity/habit formation is one of the key elements for successful learning. Thus, designing for learning continuity for all types of our learners is the key focus for the learner experience here.  

tempsamll
tempsmall2

Gamified learning elements have been proven effective in helping people continue to learn over an extended period

A daily/weekly basis learner activit(ies) was the initial design idea as the solution for learning continuity, with the notion of gamification, daily Streak was introduced to mobile learners as the pilot product several months earlier.

Project Goal

Add a powerful and playful tool to encourage learners to come back and learn more often - Streak

A need to retain the learned information is crucial in learning, a common challenge across different types of learners in Codecademy have the same problem. In this case, with some existing gamified element we already have, to add Streak that encourages learners to come back daily would not only help the information retention, but also the engagement rate in general.

Here are the success metric we’d like to track and measure for this project:

streakicon1

Track Web DAU / WAU and Trial DAU / WAU

steak-icon2

# of users active on both web AND mobile / total # of users active on web OR mobile

Aa a learner, you come back and complete one of the qualified learning materials daily, you would get a Streak as the proof of accomplishment.

Design

Integrate Streak into existing learning experience for Codecademy learners

A prior Streak product already existed on mobile as the pilot product, as a result of mobile engagement rate, Streak did make a powerful impact on the mobile learning experience. Thus, the team would like to replicate the success of the web.

MAIN LEARNING FLOW ON WEB
main111

Design Focus 1

Ensure a smooth new feature introduction to existing learning flow

The streak was first introduced on mobile as the primary feature for the mobile learners with a mobile-driven learning experience that didn’t allow learners to code on phone, and the learning materials were also different from the learning content and interaction compare with the web. Thus, introducing Streak to the web was pretty different and challenging within the existing learning experience.

a. Celebrate the first win after completing the first learning content in the flow works the best 

highlightedflow
GoalCompleted_3
f1
EXPLORATION

When and where to introduce Streak on the web was one of the critical design focus. I’ve explored different points throughout the whole learning journey with popovers, small animation and even explored new dashboard layout to see what makes the most sense for this UX. We finally settled with the first completion of a piece of learning module as the best timing. In this case, the Streak makes perfect sense to the learners without breaking their learning behavior.

b. Celebrate the learners accomplishment as explicitly as possible

tryoutst
EXPLORATION

Learning environment (LE) is where the learners make the progress on learning, thus, how to inform the learners about they’ve got the Streak as the reward yet not to add on too much complexity on technical end is the goal here.

notification1
FINALIZED

Leverage the existing notification design is the most effective and explicit way to inform the learner. However, there were still some challenges form a visual design perspective

Design Focus 2

Craft details for the best UX with minimum implementation adjustment, from visual to interaction design

Product design and development is always about speed and quality. The initial scope of this project was too broad to focus on one thing to measure or validate at a time. Thus, the team rescoped and decided to take the most efficient route without sacrificing the UX by crafting details bit by bit.

a. Refine the dashboard to ensure the crucial data is easy to follow for learners

test6
EXPLORATION

The previous learners’ dashboards contain much information that is not crucial to the learners, such as how many courses and paths they are taking, what’s the currently enrolled courses and even a starter kit. Also, the initial scope of how Streak works on the web is a weekly basis and different from mobile daily Streak. Those combinations added a lot of design complexity that includes setup flow for Streak on the web, and how information organization on top of the dashboard.

After rescoping the product, we settled with minium modification but removing non-crucial information from the top of the dashboard, and only leave all learning achievement in one place to encourage the learners.

b. Optimize the notification design for the most rewarding experience within the design and technical restrictions

toast111
EXPLORATION

Notification design in the released Codecademy product is outdated for a while. The major issue of that design was the cost of screen real estate and the visual design inconsistency. With no extra resources to redesign them all, my design exploration aims to balance the old and new together when they appear on the screen at the same time.

The final outcome works pretty well with reduced height and leverages the old/new graphic design elements together to provide a playful and delightful vibe.

dashfinal

Finalized Streak on dashboard

Learners could keep on track of how many Streaks already earned with other learning relate information.

Finalized Streak in learning environment

Learners receive the Streak update once when done qualified learning materials.

Daily Streak on web did have a positive impact on learning continuity by coming back to continue the learn, practice, and assessment cycle more often, no matter if it's on a daily or weekly basis.

Result

But what makes Streak impactful is not just about this feature itself, as one of the empirical study showed, “Codecademy supports competence in several ways” with well designed learning material, learning options, and other existing gamified learning elements such as achievement, or badges. Thus, the success of Streak can't stand on its own.

LEARNED

Being proactive is critical for great product design collaboration

retroimg1

This was the first project I designed when I first joined the team, while still not familiar with the working model and culture yet, I was given the project with initial scope to start with. The scope changed eventually, and the close constructive collaboration with the design and product team helps a lot from a product thinking perspective. However, if I can go back in time, I would be more proactive about sharing and exchange thoughts on what can we do to fulfill both learners and business need before jumping into design, sometimes, push back is not a bad thing to do.  

Also, understand the learners’ goal and explore the solutions to help them achieve the goal are the future work I’d like to work on more. A learner’s success could have various definitions based on their intention, need, and goal, to help them succeed, ensure the learning environment helps the learning continuity is just the starting point. Thus, we as a team decided to get to know more about how we can help our learners to succeed by conducting research and interviews with our learners, then build the product on top of it. The next project provides more details of it.