BEREAL REDESIGN

iphone-mockup

Responsibilities

User interviews

Research synthesis

Personas

Sketches

Mobile design

Prototypes

Project Type

Mobile application redesign + case study

Timeline

3 weeks

About the Project

In 2022, the most popular social media app, BeReal paved the way for genuine and temporal portrayal of daily life. With the very simple premise of capturing a randomly timed moment each day, the apps general features were also very simple. With that I saw that there many grievances that should be addressed for a smoother user experience.

Problem

With the amount of good news BeReal has received over the past year and a half, the demand of the most popular mobile app of 2022 has increased ten fold and have overwhelmed the company as a whole. With this many corners have been cut; including their user interaction of the overal design. As the design is fairly straightforward and easy to use, there are many minute details that are in need of maintenance and also new additions that are eager to be implemented.

Solution

This redesign stays true to the overall aesthetic of BeReal, but adds minor enhancements and specific design choices to further improve a users experience such as implementing a new notifications tab and a comment thread system.

User Interviews

As stated previously, I am an avid user of this app, and I wanted to be as neutral as possible in terms of findings and specific grievances that may occur in other users experiences. Even before interviewing, I wanted to see if my personal grievances were even valid to begin with.

10 user interviews

Young adults that use BeReal daily

Young adults that use BeReal at least 3 times a week

Young adults that have recently deleted BeReal

USER-FRUSTRATIONS-5
USER-NEEDS-1
FEATURES-4

Persona

DSC09306

Victoria is a 24 year old social media coordinator and freelance fashion photographer. In her free time she enjoys going to coffee shops, takes day trips to museums, and goes out on the weekends to see her favorite musician. As there are many social media apps to capture daily life, Victoria uses BeReal to highlight, hopefully her favorite part of the day (if the timer is in her favor.) 


Goals

cc
1. Capture more moments of her daily life


2. Be able to share these moments with friends

3.  Look back at previous memories 


Frustrations


1. Notifications of reactions and comments get lost


2. I would like to add filters to my photos 

3. The addition of comment threads would be nice

Major Insights

The notifications get lost

Every user that interviewed, mentioned that whenever they received a notification from their phone and left the app, they could never find that notification again and had to manually search for where they were mentioned or what other action they had interacted with.

Comment threads get confusing

There is no identity or separation between comments of a BeReal. Most if not all users became frustrated with the original design when scrolling down a comment thread. 

User Flows

One major painpoint I noticed in multiple user's app experience was the lack of a notifications tab, where phone notifications would get lost after one click. In my redesign, I implemented a notifications tab for users to be able to keep track of previous notifications such as new comments, new followers, and new reacts.

The original profile tab lacked sense of information hierachy and wasted a lot of white space. I added four action buttons at the bottom so there would be one less tap for the user to interact with in the accessibility tab.

There is essentially no comment threads in BeReal, adding this feature would aid in readability and general flow of a better user experience.

Sketches

These are some of the initial thoughts I came up in regards to specific design changes and general notes on the current design with mentions of color palette and brand identity.

IMG_7432

As the overall app design was fairly simple with a monotone aesthetic, I wanted to keep the redesign true to the original with enhanced features and functionality.

IMG_7431

Usability Study

Two iterations of unmoderated usability studies were conducted for the original design and final redesign. The following charts are from the first iteration to discern certain design changes for the new iteration.

USABLITY-STUDY-GRAPH-1

After these findings, the main design change I wanted to implement was adding the notifications tab. With that I wanted to keep the friends tab as well, but condense it to where it would make sense to seamlessly switch back and forth.

Screens

Design Decisions

1. Addition of a notification tab

2. Harmony of overall color palette

3. Implement a comment thread system

4. Condense the profile tab

5. Unity of scroll and swipe animations

6. Size and spacing changes of specific elements




Enhances user experience in finding previous notifications

Certain buttons and @ links seem to be out of place, so adding the light blue/green highlight aids in unifying the identity of BeReal

A sea of comments with no hierarchy in the original design made comment sections of a BeReal confusing for users to look through

Right off the bat I noticed there was a lot of white space towards the bottom of the profile tab, which I thought could use some more functional buttons

The last two decisions were based on minor tweaks in elements getting cut off in a splash screen, or sizing of a specific element would be different than another with no specific correlation, makes the design unpolished with no regards to continuity across different screen sizes

Style Guide

STICKER-SHEET

The original design only opted for two colors; black and white. With buttons looking out of place and not unified with the rest of the design. I wanted to change #00000 to a slightly less harsh #101010. By adding the light green/blue into the mix, I felt as if the color choice unified the entire design and aids in the overall brand style.

Final Design

Future Direction

With mobile applications, the design process is fairly similar to a desktop app but with more mindfulness towards accessibility and ease of use. Taking advantage of mobile gestures and screen real estate is of top priority and looking into this redesign I noticed a lot of small things that I believe BeReal could benefit from.

 Things I Learned

It's Okay To Go Off The Rail

In the future, I definitely want to create a version of BeReal with more of stylistic choices and implement more advanced designs to put my own twist on things. As they were teased in this redesign, I wanted to stay true to the BeReal aesethic.

User Pain Points Drive Design Choices

As an avid user of BeReal, I could really see how a user interacts with an application and empathize with other users with similar feelings. This really aided in my design changes and additions to cater to user needs.

Auto Layout. That's All.

One of the main tools in figma, auto layout has helped me with creative responsive and fluid designs. I am still learning which way is the most efficient in creating layouts, but with this redesign I noticed certain tendencies their designer had used and kept everything fairly simple.

View