Facebook memories

Conducting a UX/UI excercise for a UX Showcase

Overview

In context of a UX Showcase, I had the challenge to perform a quick UX/UI excercise for a hypothetical case that Facebook needed to implement improvements on its Memories section.

My role

UX/UI Designer defining & executing the steps for a section redesign.

October 2021.

Background

In the context of a UX Showcase for my actual company Globant, I was in charge of conducting and presenting a UX/UI Excercise on one hypothetical case that Facebook needed to implement improvements on its Memories section according to user needs.

This excercise had a demonstration purpose and it was pretty fun to take because of the UI work and the result that came up with it.

Diving in

Unlike Instagram, Facebook has a more robust platform in its web version, however, as it is a social network, its use would be greater on mobile devices. That was my hypothesis but I needed to validate it anyway so I looked up some numbers.


Almost all Facebook users access the social network from their mobile devices. For this reason, every design initiative revolves around the application.

On the other hand, only 1.7% of users start their session from the desktop. With the redesign in 2020, Facebook's strategy was to unify experiences, standardizing the design to make it more like the app.




One look at Facebook Design Principles and a deep understanding of the user flow towards the Memories sectiongave me some directions on what to consider when I reach the design phase.


Then, I analyzed the rest of the menu sections to map structures, components, graphic elements and interactions of each one and understand how they are structured depending on their context and function.


With this information, I had an idea of a possible structure to apply in a design and some components that could serve me for that purpose.

Designing

With the help of the current contents the Memories section had, I drew a list of contents to consider when designing the page.

Zone 1: Context

  • Section header
  • Section Settings

Zone 2: Memories

1. Main memory of the day (1 year ago) Card

  • 1.1 Main memory of the day (1 year ago) Card
  • 1.2 Introductory message
  • 1.3 Main image or post
  • 1.4 Memory Sharing

2. Memories of the same day cards (other years)

  • 2.1 Author of the publication
  • 2.2 Place of publication
  • 2.3 Tagged friends
  • 2.4 Date
  • 2.5 City
  • 2.6 Image or publication
  • 2.7 Original reactions to the post
  • 2.8 Memory Sharing

3. Memories cards from previous days of the same week

  • 3.1 date
  • 3.2 Image or publication
  • 3.3 Original reactions to the post
  • 3.4 Memory Sharing


Main components to use