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.
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.
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:
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.
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.
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.
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.
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
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.
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.
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.
Learners could keep on track of how many Streaks already earned with other learning relate information.
Learners receive the Streak update once when done qualified learning materials.
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.
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.