headericon

Project Streak 

A web project aims to help learners to establish a learning routine in a daily basis.

nude
summaryS1
01

The Comany_

Codecademy committed to building the best learning experience inside and out by taking advantage of web technology, to build the education the world needs.

slignmrny
clogo

An online code learning platform with a user base that is more than 45M learners.

p2S
chart6
slignmrny

Rescope to focus on providing the best UX to our users in the learning journey

The predefined scope was leaning toward a more personalized way to set up users' learning goals. But the inconsistent logic compares with our prior Streak experience on mobile native app added on too much complexity and that's why we decided to rescope and focus on what's the most intuitive way to introduce the feature to our users.

waveS
p3S

How can we persuade learners to come back and  learn daily? 

arrowS
oppoS
p4s

Project Goal_


Design to increase the short term learning engagement, potential long term learning habit formation, and collect user data.

slignmrny
tempsamll

Competitive Research_

 

Streak and goal setting are the most common approaches for habit formation in learning.

Habit formation is the core to evey types of learning.     

For all the popular learning services you can see below, design the incentives to create the behaviors for habit formation is the key to successful learning.

Gamification is the most common approach for behavior change design.

The majority of the popular learning services apply gamification in their learning experience, and now this approach became pretty common in learning.

comp
waveS
p6ss

Designing for behavior change in learning.

slignmrny

To form the learning habit is the core  for this product.

Thus, research on behavior change and apply the best practice to the design is the goal when in the ideation stage.

slignmrny
ezgif.com-video-to-gif-6

Streak is the best practice to motivate the users as the "reward" in the learning habit formation loop. The questions are when to introduce it and where to show the accomplishment the users achieved.

We've thought about to introduce it in the onboarding flow to the first time users, and celebrate the first win on the dashboard when the return users just come back to continue the learning. But we eventually decided to make the introduction more natural and fit into the context as I shared below.

arrowS

Design_

Integrate Streak into the existing learning experience to help users to form the loop of learning behavior.

A non-interruptive approach to introduce Streak is the main focus in this user experience design, no pause for coach mark and tooltips to "showcase" this new feature, instead, we ensure it shows up at the correct time and space with the right context.

highlightedflow

Design Focus 1_

Ensure a smooth new feature introduction to existing learning flow


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

Artboard

After users complete the first learning material of the day, we celebrate the first win they've got in their daily learning with a toast.

b. Showcase the accomplishmen in the most explicit way as the encouragement ausdsia

Few other design options are not as explicit as the toast notification with the ease-in animation. The movement stimulates the excitement.

Design Focus 2_

 

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

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

test6

I've tried numerous designs just to display the Streak without distracting users when they check their learning progress in the dashboard, it turns out the simplicity is the best choice

b. Optimize the notification design for the best rewarding experience with design and technical restrictions

newvideo1

There is an existing badge design in notification/toast that can't be changed, so I have to accommodate the old visual style when I design the Streak toast for the cases that more than one toasts show up in the same time.

arrowS
waveS
p7s

Result_

Laid the foundation of learning habit formation on Codecademy learning experience.

slignmrny

The best result of this project was that we were able to track more user data than code submission times, and to encourage users to come back and learn daily.

The next project is another critical piece for learning habit formation as the "cue", and we were able to dive into the reason behind the learning behavior, and to help the users achieve their goal.

slignmrny
futurestep-1-1