UI Design

Giving BeReal the colorful touch it deserves

Re-design of an app

Challenge

Re-design the UI of an existing app

Deliverables

Heuristic evaluation, Visual competitive analysis, Moodboard, Brand personality, Interactive Hi-fi prototype, Microinteractions.

Timeline

3 days

Existing Design Clone

First, I had to replicate and audit the existing app. I inspected all of the elements on the screens and replicated them in Figma.

Due to time constraints, I’ve chosen to reproduce the following screens: Loading screen, Home screen, Profile screen, Friends screen.

Heuristic Analysis

For the heuristic analysis, I’ve followed the 10 general principles from Jakob Nielson for interaction design. They provide a foundational framework for creating intuitive user-friendly interfaces that meet the needs of the users.

Key findings:

Inconsistencies in typography, font size and colors.
Dark background with weakly highlighted sections create readability issues.
Accent colors and a navigation bar are absent.
Certain elements are counter-intuitive positioned.

Visual Competitive Analysis

After conducting a visual competitive analysis of Instagram, Tiktok, and Snapchat, I’ve discovered the following findings:

Bright background with strong colors and brand identity
Similar usage of accent colors
Simple typography, that lets space for content
Playful colors for engaging user experience

Brand Personality

I believe, such a fun and social app should have vibrant, fresh, and happy colors.

Brand Attributes:

Authentic
Connected
Exciting
Friendly
Fun

Before - After

Watch the prototype in action

Design critique

I’ve presented the final prototype during a Design Critique in our course. The color combination and micro interactions received the most positive feedback.

My colleagues who were already familiar with BeReal enjoyed the integration of the navigation bar, better highlighted sections, and profile improvements.

“Small, but extremely powerful and meaningful animation.” - Vince

“I like the new vibe of the color and the gradient in the brand name.” - Magda

“I hate the way BeReal displays friends and friends request right now. I think you did an amazing job with this page, you solved that problem. I’d use BeReal if it looked like this.” - Diego

“Amazing addition of the navigation bar, without it I fee lots in the app.” - Diego

“I really like the profile page, it is more personalized.” - Zuzanna