MOBILE APP CASE STUDY

Social Learning on Facebook

How I redesigned Facebook’s Social Learning feature for a better user experience.

An iphone mockup of Facebook's Social Learning feature.

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, the admin of a group for Nikon camera users wants to add some units to the group that help people set up their camera and learn the fundamentals of photography.

my role

Lead product designer

year

2019
My project was to redesign the units tab on the Facebook mobile app to 1) improve the design and 2) update to Facebook’s new design library.

THE OLD DESIGN

The Social Learning feature is split into two main screens:
‍
1. The Unit List: What you see when you enter the units tab in a group: a list of all the units.
2. Inside a Unit: What you see when you tap into one of the units: a list of all the posts in that unit.
‍
This is what the Units tab looked like before my redesign:
Mock up of the old design of social learningMock up of the old design of social learning

IDENTIFYING PROBLEMS

There were many design problems, but here were some of the main ones I identified:
Circle with the number 1 in it
Information Hierarchy
Almost all of the content is the same font/size so you can’t tell how the information is organized. “Unit 1,” the unit title, and post titles are all the same size.
Mockup of a social learning unit list where multiple headings have the same font size.
Mockup of the old unit list, where you can only see the first unit.
Circle with the number 2 in it
No Context on First Glance
In the unit list, the first unit contains so many posts that you only see the first unit! This page is supposed to be a list, yet at a glance you're only seeing the first unit.
Circle with the number 3 in it
Where am I?
The navigation bar title does not change when you enter a unit – again, there’s no context for where I am.
A mockup of the old unit list screen and an individual unit screen, which both have the same nav bar title
A mockup of the old unit list and inside a unit
Circle with the number 4 in it
Visual Design Issues
•
The spacing between components is inconsistent.
•
Inside a unit, the post titles are detached from the posts themselves.
•
The done button is a very light font – looks almost like a disabled button.
•
User content is not differentiated from system content. For example, the unit description that the admin wrote is the exact same font as the header “Description.”
Circle with the number 1 in it
Information Hierarchy
Almost all of the content is the same font/size so you can’t tell how the information is organized. “Unit 1,” the unit title, and post titles are all the same size.
Mockup of a social learning unit list where multiple headings have the same font size.
Circle with the number 2 in it
No Context on First Glance
In the unit list, if the first unit contains so many posts that you only see the first unit! This page is supposed to be a list, yet at a glance I’m only seeing the first unit.
Mockup of the old unit list, where you can only see the first unit.
Circle with the number 3 in it
Where am I?
The navigation bar title does not change when you enter a unit – again, there’s no context for where I am.
A mockup of the old unit list screen and an individual unit screen, which both have the same nav bar title
Circle with the number 4 in it
Visual Design Issues
•
The spacing between components is inconsistent
•
Inside a unit, the post titles are detached from the posts themselves.
•
The done button is a very light font – looks almost like a disabled button.
•
User content is not differentiated from system content. For example, the unit description that the admin wrote is the exact same font as the header “Description.”
A mockup of the old unit list and inside a unit

THE REDESIGN

I started by doing a design exploration of the unit list. Here were three of the options in that exploration:
A bunch of different mockups of what the unit list could look like

USING DATA TO DECIDE

Two data points helped me narrow down the options:
IMAGES
Over 65% of posts in units have images or videos. I think this number justifies using image thumbnails next to the post to make the design more engaging. For posts that do not have images, we can keep the text icon. +1 for option 2 or 3.
# OF UNITS
The average learning group has four units. Many groups have fewer than four units. Option 2 might look very blank with four or fewer units. +1 for option 1 or 3.
Option 3 also does the best job with using font hierarchy to differentiate different levels of the design. We decided to go with option 3.

HI-FI DESIGN

I put together hi-fi designs and a prototype in Origami.
For the “inside a unit” view, I kept it consistent with Newsfeed design, but added a header with a larger unit title and description to add hierarchy. I also made the done button more prominent.

RESULTS

•
User level completion (marking posts as done): +17-25%
•
Daily active users: +1-4%
We also received great feedback during user research:
“It used to be confusing, but I like it now.”
GET IN TOUCH
rachgrau@gmail.com
Design and content © 2021 Rachel Grau
connect