MOBILE APP

Facebook Quizzes

One of my projects at Facebook was to design a quiz platform for our learning groups, a feature that many admins were requesting. For our MVP, we decided to build simple multiple-choice quizzes.

WHAT IS SOCIAL LEARNING ON FB?

Social learning is a feature available in Facebook groups which allows group admins to organize Facebook posts into units, for example to create a course. Many admins of these groups were requesting the ability to create a quiz that group members can take.

my role

Lead product designer

year

2019

THE FOUR FLOWS

Our MVP quiz platform was made up of four flows:

In this document, I'm going to focus on the student flows, starting with the take a quiz flow.

step 1: audit

The first thing I did was to audit existing quiz platforms. I like to do design audits to see what’s out there and how other designers tackled common problems.

STEP 2: EXPLORATION

Next I sketched out some possible flows for our quiz platform, using Facebook design standards. These were the top three options I came up with:

STEP 3: HI-FI

After various design iterations, we decided to go with the second option because this option was the most flexible. For the MVP, I mocked up all the flows for taking a quiz and made a prototype in Origami:

Ok, so I took a quiz. How can I see my results?

Next, I dove into student view my quiz results flow.

A graph of the different flows I needed to create for the quiz features. Admins can create a quiz or view students' results, and students can take a quiz or view their own results.

STEP 4: VIEWING QUIZ RESULTS

Designing the view my quiz results flow is tricky when multiple choice questions have more than one correct answer. Consider these four possible outcomes for a “choose all that apply” question:

OUTCOME 1

The user answered all of the correct answers and nothing more.

The correct answers:

What the user answered:

A multiple choice question where the student answered correctly.

OUTCOME 2

The user answered all of the correct answers, but also answered an incorrect option.

The correct answers:

What the user answered:

A multiple choice question where the student selected every answer, but one of them was incorrect.

OUTCOME 3

The user answered one of the correct answers, but not all of them.

The correct answers:

What the user answered:

A multiple choice question where the student answered two of the three correct answer options.

OUTCOME 4

The user answered none of the correct answers.

The correct answers:

What the user answered:

A multiple choice question where the student did not answer any of the correct answers.

For each of these outcomes, we have to show the user:

What they answered

What the correct answer(s) was/were

An explanation that the quiz author gives for that question

I did a design exploration and came up with tons of different options for how to show a user his/her results for a single question, playing with colors, layout, and text:

TESTING, FEEDBACK, & DECISION

After feedback from other designers and users, we decided to go with the last option because:

At a glance, the user can quickly see which questions they answered correctly or incorrectly.

The user can also easily see what they answered for each question.

It is clear what the correct answer(s) to each question was/were.

The final hi-fi mockup of what viewing quiz results looks like.

LAUNCH

Quizzes launched in social learning groups in September 2019 and thousands are using quizzes today.
‍
You can try it out by creating a Facebook group and make sure the group type is “Social Learning.” On a computer (quiz creation is still Desktop only, mobile coming soon), go to the units tab, create a unit, and then enter that unit. You will see a “Create Quiz” button.