Beehive

A mobile application that facilitates the organic formation of authentic friendships
OVERVIEW

This project was completed as a part of the coursework for a three month immersive UX design program.

In a team of three, we were tasked with examining BumbleBFF's current state, and modify it in any ways we saw fit in order to suit the needs of our users.

ROLE

UX/UI Designer on a team of three

Principle UI/Visual Designer
User Research and Research Synthesis
Sketching, Wireframing, and Prototyping

Problem: Rethink BumbleBFF

Key initial questions
WHAT IS A FRIEND?
What qualities are sought out in them, and how do they differ from qualities sought out in romantic partners?
FRIENDSHIP VS. ROMANCE
Are there different social norms when it comes to pursuing and managing friendships, as opposed to a romantic relationship? What does rejection look/feel like?
AWKWARDNESS AND STRESS?
What is inherently stressful/awkward about pursuing friendships? How can Bumble manage those aspects to minimize their negative effects?
WHAT IS SUCCESS?
How do we determine success in the friend search?

RESEARCH AND DISCOVERY

User Interviews

Conducted 13 user interviews with the goal of understanding how they make friends online.

ACTIONABLE INSIGHTS
Users need finding friends on the app to feel organic
Users don't trust others to authentically portray themselves online
Users cited Twitter and Hinge as two platforms that they felt able to make authentic and organic connections on

Persona

PROBLEM STATEMENT
"Danielle needs new/better/real friends so that she can feel nurtured in this new phase of her life."

SKETCHING AND IDEATION

Taking Stock

In order to solve this problem, we have to understand how Danielle experiences the app in its current state.

When and where do things go wrong? Why?
TAKEAWAYS
Leverage brand familiarity in the UI and visual design
Users feel vulnerable and insecure when looking for friends on an app because they're too "in their heads"
Our app must be a stand-alone entity (BumbleBFF is nested within Bumble the dating app), and we need to find a way to simultaneously leverage brand familiarity and create distinction
CORRESPONDING ACTION
Bumble as a company and brand has earned users' trust through their dating app
Users are largely skeptical of making friends on an app due to a stigma they seem to hold towards it
Our app's functionality needs to pop our users out of their own heads and get them to be into the moment
Bumble lose their users' trust almost immediately upon opening BumbleBFF because the UI and functionality are virtually identical to the dating app
Our app needs to utilize "acceptable" interaction models that our users like and are familiar with

Our users liked Twitter, and had made friends using it

Below is a common interaction that led to a friendship being made

They also liked Hinge

This illustrates its core functionality that is unique among dating apps

After conducting a design studio, we settled on using my sketches to base our wireframes on

They visualize the layouts for three core functionalities we wanted to test with our users

NARROWING SCOPE AND STRUCTURE

Usability Testing

After running a series of usability tests, we uncovered the following insights:
"Binary" core functionality is not viable: experience was just average for our users.
"Non-Binary" core functionality intrigued users, but multiple rounds of testing revealed it was too limiting for users.
"Hinge-Style" prevailed as the most effective core functionality.

I used these insights to refine our layouts and develop our messaging interface

Branding and UI

In the research phase, our users revealed that they really trusted Bumble as a company. It was my job to leverage that trust in the branding of our app, while simultaneously creating distinctions between our app and standard Bumble.

This approach led us to deciding that the app would be named "Beehive"; a name that references Bumble's use of bees in their brand, while sending the message of interpersonal closeness and encourages "finding your hive".

COLOR PALETTE

The primary color was created by modifying BumbleBFF's existing primary color. My goal was to make it more youthful, engaging, and vibrant to inject a sense of excitement and energy into the experience of the app.

The secondary colors were meant to be easily distinguished from the primary color, while also complementing it. Additionally, I wanted to make sure the palette integrated well with Bumble's primary color as seen on the far right side of the palette image.

TYPOGRAPHY

When approaching the app's typography, I saw it as an opportunity to invoke a sense of familiarity with our users, and to create a sense of continuity between Bumble's brand and Beehive's. Therefore, I matched the typefaces used in Bumble's UI as closely as possible.

LOGO

The honeycomb shape is meant to represent community, while simultaneously creating a visual connection with Bumble's hexagonal logo.

What do these changes mean for Danielle?

Here's how Danielle's journey has improved as a result of our design choices:

PROTOTYPE AND TESTING

Now that we've answered many of our large questions, it's time to answer many small questions. With a high fidelity prototype, we are able to test our design with users without being held back by the looks of earlier iterations, and get more subtle and detail oriented feedback.
HIGH-FIDELITY PROTOTYPE

This video demonstrates the flow that our primary persona, Danielle, would take when matching with a potential friend.

Since she is an avid Twitter user, Danielle chooses to send Anne a message about the Tweet that is displayed on her profile.

Try Danielle's flow yourself with the clickable prototype below