Achievement system

About

Quizlet Achievement system is to build to motivate students throughout their study journey by creating engaging experiences that celebrate moments of personal learning and accomplishment. We attempts to harness the power of gamification to drive engagement and retention with Quizlet products.

Project Description

Quizlet achievement system launch in 2022. We build a “Motivation Machine” across Quizlet to supercharge 18+ student study activity, increased MAU engagement and retention to drive +76M incremental active sessions by the end of 2022 year.

My Role

Product design and Brand design

Responsibilities

Concept development, UI design, Graphic design, Product design.

Timeline

2022-2023

Core drivers for motivation

Our strategy is centered around adding game mechanics to the learning experience to increase engagement and enjoyment.

Ownership

Users are motivated because they feel they own something. When you take ownership of your learning, you learn way better.

Delightful experiences

We seek to build delightful product experiences that help students stay motivated throughout their studying.

Accomplishment

The internal drive of making progress, developing skills, and eventually overcoming challenges.

Motivation info structure

Study streaks user research

We conducted remote 30-minute moderated interviews with 6 college crammers who were current Quizlet users

More streaks

User across the board showed a strong preference for more comprehensive streaks and achievements UI.

Need education

How to achieve weekly streaks will require some soft education as it is not as common a pattern as daily streaks.

More study time

Several users expressed a preference for minutes studied as a more motivational study metric.

Persona

Zake, 24 years old, Spanish and Psychology Major

Problem statement

Zake is a senior TCNJ student in Spanish and Psychology. He has to study a lot of Spanish flashcards for his Spanish final exam. He always feels frustrated when he has to learn all those cards. He also feels frustrated because he has to go through a lot of lecture material which he has to take a lot of time to learn.

Goals

He wants to be motivated so he can keep studying and achieve his study goal. He also wants to feel achievement after he finishes his studies.

Frustrations

Keep study hard study material for a long time without feeling any achievement. He have hard time to keep study everyday.

Motivation deeply embedded in study experience

Motivation deeply embedded in study experience

Many users will drop out of a study mode before fully experiencing its value or using up their free trial. We believe motivational features can help students stay engaged until they fully experience the study mode. So we implement badges into study experience, when user finish a round of learn, we will show round complete animation and show the badges they earned to motivates them to keep studying.

Introducing study streak into the product

We are introducing study streak into study. When users study on Quizlet they will earn study streak and badges to motivates them to keep studying by holding them accountable and providing a sense of accomplishment. After user research we build a streak system to allow user receiving rewards for achieve a certain number of streaks to have more incentive to study each week.

Mockups

Here is the achievement on user profile page.

Achievement page

Toast size for Native and mWeb

Keep fixed toast width size for 343px. if there are more content, we can expend the height of the toast. Center the badge+ content.

Motion token and guidlines

Motion helps make a UI expressive and easy to use. We are working on our Motion library to support our achievement design. Here are two cases from our motion token library that we used for the achievement project.

Easing and duration

Since transition are the most common type of motion and closely ties to usability, design and implementation should be a top priority in product. Easing is meant to be expressive, use Emphasized easing as default. Choosing the right combination of easing and duration can be complicated. As a simple starting point, these are sensible defaults that will work for most transitions.

When to use

Here are some examples show what duration and easing we should choose.
This transition covers a large area with a long 500ms duration
This transition covers a small area with a short 200ms duration
An Enter transition has a long duration of 500ms; An Exit transition has a long duration of 200ms

Confetti

When to use:
We use confetti to celebrate process, an action or earn an achievement,

How to use:
Confetti layer should be the last layer, do not cover any contents.

Shapes:
We have 4 shapes, combined with confetti colors below.

Colors

Standard Confetti works on white background (Grey 100) and other color than Mint, Lilac, Sky blue, Sherbert. Using Twillight 700 in light mode, using Twillight 100 in dark mode.

Standard Confetti

Standard Confetti works on white background (Grey 100) and other colors than Mint, Lilac, Sky blue, and Sherbert. Using Twilight 700 in light mode, using Twilight 100 in dark mode.
Light mode
Dark mode

Single Color Confetti

Using single color confetti in the same color theme background. We using the #100 color for background. Choose the confetti color basic on the icon or badges color theme.

Colors

We are using Lilac, Mint, Sky blue, Sherbert color theme for the Confetti.  For the Confetti colors we are using the #500, #400, #300, #200. We using the #100 color for background color.
Back to Product page
All works © DuoXu, 2024