Reels + Stories for Facebook Lite

Two types of media, and one app that runs on little to no data. Problem solving and technical restrains, and user needs were huge driving factors for this project.

Role - Lead designer

Type - Feature parody

For - Meta (Facebook)

PROJECT SUMMARY

The context.

Facebook Lite is an app made with server-side magic. It’s specialty is using the least amount of data possible. It’s the preferred Facebook mobile app for countries without unlimited data plans.

The problem.

Reels were gaining in popularity and there was a demand for them on Facebook Lite. How they would coexist with Stories was a huge open question. Not to mention that Reels are of course short videos, which means heavy data usage.

The opportunity.

How could we deliver a joyful experience for Reels while maintaining the low data usage that Facebook Lite was known for? And (there always seems to be an and) make the Reels and Stories viewing experiences feel seamless.

The hurdles.

Technical restraints of course, given the app we were designing for this had to be top of mind. Interface consistency was the other hurdle, how close similar should the Stories and Reels viewers be?

STEP ONE

Run an audit to figure out what interactions we currently had. Because there were a lot 😅

AUDIT TAKEAWAYS

Adding another left/right swipe interaction could get really messy. Since we already had two different types users could easily navigate away from a story completely by accident.

Facebook lite has a user base that understands an interface better when there are explicit icons for each interaction. Which is why we were the lone app with back and forward navigation arrows in the story viewer.

STEP TWO

Ideation time😤

Ideate get feedback & repeat.

When sharing out ideas with fellow designers or cross functional teammates, I’ve found it helpful to start with the ideas closest to what we have today followed by more blue sky ideas. Each concept has a summary and a list of pros/cons to help guide the discussion.

Arrows that only show up when there are more items in that direction

Removing the left/right arrows and add a new user experience

Add a bottom arrow that replaces the comment box after a certain time interval

Stacking all the arrows on the right side 🤮

Add a message to go to Reels once they've viewed all the stories available.

STEP THREE

Time to get feedback, pick the favorites, and prototype.

1. Tabbed tray & auto vertical scroll

- Clear how to create new Reels and Stories
- The tabbed version on home was successful on the Facebook app
- Tab on homepage could be too subtle and get missed altogether
- Autoscroll behavior is a bit weird when navigating from story to story
- Reels would only have about 3 live previews

2. Split tray & peek of next story/reel

- Clear how to add new Reels and Stories
- Preview of next Reel/Story helps indicate that the next items are a vertical scroll away
- Both viewers match in style
- A lot of Facebook Lite users have small screens, the preview of the next story takes away some vertical space

3. Separate cards and floating +

- No horizontal scrolling, both entry points are in view
- Inline with the main Facebook app
- Extra tap to be able to browse stories
- Creating a new Story or Reel is easy to miss at first glance
- Might not be obvious that there are more than just that one Story or Reel to see

User research

Because the Lite app is primarily used in areas where English isn’t the main language we had to make sure that all of the placements for text worked even when things were internationalized. In addition the central questions we wanted to answer were:

Which visual treatment for the top of home unit made the most sense to users?

Should Reels interface be similar to Stories, or intentionally different?

Research findings

Bridge between content types

Adding in a screen when a user had viewed all of their friends stories aligned with user expectations. And it would serve as a less intrusive way to let people know that Reels were on Facebook Lite.

Users thought of these as two independent content types

Turns out that most of our user based thought of Reels as something that they would view and never create, while they would create stories to keep their friends and family up to date. So having two separate viewers and interaction patterns wasn’t a jarring since they were rarely switching between the two.

STEP FOUR

Review all the data, and pick the most promising solution for experimentation.

Experimment summary

In the end we chose to go with the split tray on the homepage since it performed the best in usability testing. And was the most technically feasible given the limited amount of data the users had to use on Facebook Lite.

For the Stories and Reels interfaces the main actions were kept in the same place and a vertical scroll was implemented on both. And there would be a preview of the next Reel or Story. The preview would allow the Lite users to see if they wanted to use their limited data on the next video or story.

The Metrics.

In order to tell the experiment was successful or not we needed the following changes in metrics.

The result

Reels on Facebook Lite even in low data mode! This was a huge win, especially because we were able to keep the user experience pretty content rich, even in data only mode, with some clever coding magic and keyframe animations.

What worked

Leveraging data and user research in the early phases of the design process. Since the user base for Facebook Lite is so different from that of the flagship app this was key for the projects success.

Hindsight is 20/20

As always with large companies there were a lot of small teams that had some overlap with the space that we were working in. Earlier collaboration and more consistent communication would have enabled us to move faster.