For Figma

Overview

Engaging students has never been so small yet so impactful. Learn how a widget won multiple awards and is in the process of getting shipped to millions of learners.

Role – Product Design, Visual Design
‍
Team – 1 iOS Engineer, 1 Android Engineer, 1 Data Scientist
‍
Timeline – Aug 1 - Aug 5

Coming soon to an Android and iOS phone near you.

Summary

During my summer internship with Quizlet, I was fortunate to participate in Quizlet’s annual Intern Hackathon. Hackathons are an essential part of Quizlet’s culture. They’re a time to come together to brainstorm new learning concepts, build products on new platforms, and experiment with the product potential of new technologies.

I worked with three interns across different fields to increase learners' motivation via study streaks¹.

1 - Study streaks, on a daily basis, are the number of consecutive days a learner has been studying using Quizlet. All it takes is to interact with a single flashcard to count as studying.

Empathize = Better Experience

Stories are often better to understand what learners really need and the context of interaction with the product.

Reasoning

Quizlet is investing more resources into motivation for growth. The User Growth team at Quizlet previously conducted a study to understand cultural differences in motivation to study, especially from non-US markets, to ensure that future designs around achievements, streaks, and badges are received well in diverse cultures.
‍
Across the board, students are familiar with streaks though they are not necessarily the best motivators for all students. Customization for streaks would be helpful, such as setting targets for oneself - they don’t work if the goal is unattainable.

How long can I keep my streak?

The Problem

Students are stressed and lack confidence, which decreases their motivation to study. For 2 out of 3 users, the longest daily streak earned was one day.

Quizlet's research team found that adding study streaks increased study sessions by 12+ million per year. However, the current study streak solution is proven to have friction with its placement in the product. Thus, out of sight, out of mind for learners 🤷.

You can access your profile from your profile avatar on the top right corner.

Ideating

Our guiding question:
‍
How can we expand motivation touch points to align with a student's study journey?

We decided on creating a widget for Quizlet's native apps. There's a heavy push for widgets as increasing functionality is coming to Android 12 and iOS 16. Quizlet has one widget, but it's only visible on iPhone's Today View and has minimal branding and personalization. Our goal was to motivate students throughout their study journey by creating an engaging widget that celebrates personal learning and accomplishment moments.

This widget can not be displayed on a standard page on iOS.

Competitor analysis

As the sole designer, I decided I would audited Kahoot!, Khan Academy, and Duolingo as competitors with existing widgets. We also looked at Headspace and some of Apple's native widgets as inspiration outside Quizlet's space.

How might I incorporate branding with utility?

Small

I jumped straight into Figma, so I could utilize Quizlet's design team's bi-weekly design critiques to get early feedback. At the moment, I thought it would be best to start designing the smallest widget first and creating as many solutions as I could in about a day, then scale up.

I utilized Human Interface Guidelines and Material Design 3 to understand and design for constraints and best practices around widgets.

Started with the most constraints first.

Medium

In order to create consistency throughout the different widget sizes, I used the left portion of the medium widget to have the same functionality as the small widget. We were yet again met with options to display crucial information on the right side of the widget.

What information is most beneficial?

Large

We decided that we wanted the large widget to have more of a list view and limit all the functions each widget can do. We continued with the trend of recent sets so the learner can go into any of their last three recently studied sets.

More options, but not too many more.

Final Designs

Tiny yet mighty

Results

Our engagement widget took home two awards: 'Ship it now' and 'Crowd favorite.' Due to its popularity and immediate buy-in, we expect this widget to be available to millions of users in the upcoming weeks.

"Job's not finished."

Metrics

Quizlet's Intern hack week occurred during my internship's second to last week, so I could not test the widget, let alone see the final product.
‍
Success metrics
A few metrics I would watch closely are time spent on app, time spent studying, and 1-day, 7-day, and 28-day retention.

Wishes

Study streaks are a proven tactic to increase engagement; however, it is not necessarily the best motivator. I would like to expand on study streaks by allowing learners to set goals for themselves and have a sense of ownership and accountability for their streaks.

Learnings

Priorities in check
Many young designers are taught to sketch some ideas first, which is a good thing. However, I was put in a situation in which I had a quick turnaround. I had an opportunity to get my designs critiqued thus, I wanted to make the most of it and get some hi-fi designs in so I can also get feedback on branding.

Designing widgets
This was my first experience designing widgets. There are many constraints surrounding widgets, especially on iOS. In such a small space, you must create something impactful to help not only drive traffic to your app, but make it useful to where the user will actually keep it on their page.