Friends With Benefits

Market platform for employee discounts

Role

Product Designer

Branding Designer

Teammate

Product manager

Engineer

Client

Friends with Benefits

Tools

Figma

Procreate

Illustrator

Friends with benefits is a platform that connects users with exclusive employee discounts on products they want. Employees can list and sell their unused discounts for extra income, while buyers gain access to affordable deals, creating a mutually beneficial marketplace. During my time as a UI/UX intern at j3c.io, I was given a chance to re-envision the future of the Friends With Benefit Platform.

Just to give you an idea of what I was working off of and what changes I wanted to focus on

Product
Analysis

We are starting off strong with "Booty Call for Bargains" and corporate memphis illustrations with hearts. For a buying and selling platform, the visual and written language is too romantic.

"Swipe right on savings, left for full price," a reference to tinder functions, we are not tinder. This doesn't do anything to clarify what these savings are for, where they're coming from, and how exactly they benefit our user.

Again, too much dating language, illustrations of people, and the page overall feels too busy. I don't understand what's going on, so will our users. We need to change that.

Identity Issues

Outdated Aesthetics

User Privacy

The Issues

How do we create an identity that doesn't give the wrong idea?

We are certainly not in the market for booty calls or for wingmen. How can we create a strong brand identity that's still playful with our name but not confuse our users on our platform purpose?

How to we clarify business purpose to our customers?

Home pages aren't scavenger hunts, and our users shouldn't have to be constantly searching for hints and clues to understand what our business is trying to do. How do we make it blantently obvious that our platform buying and selling employee discounts?

How do we grow the FWB community without risking our customers identities?

As a new platform, one of our main goals was to attract new users onto our platform. However, as employee discounts to have policies attached to them, we were worried that this would deter customers. As a result, we needed to implement features that would allow for a community to grow while protecting our users.

Brand Identity

"Benefriends" not friends with benefits

When creating the new brand identity, I decided to focus on the discount side of things rather than the friends. I incorporated the percent into the logo to indicate discounts and create a silly non-gendered person for the illustrations.

The Research

Because no design decisions happen in a vacuum and the reasons need to come from somewhere

So prior to designing these screens, I did two things to get more insight as to what changes I should be making. The first was talking to my project manager and asking him what prior research was conducted and the second was doing a competitive analysis of our following competitors: Honey, Capital One Shopping, and Karma.

Competitive Analysis

The Takeaways

The Design Process

A designer sisyphus with their design rock, the iteration process never ends

Over the course of the month, I created over 60+ screens for the initial website with an additional +30 for the mobile version.

Iteration Process

A lot of comments a lot of simplifying

After each iteration, I would get feedback from my client. While satisfied with my designs, he wanted met to trim down a lot as they were still pre-seed. This meant having to design for potentially close to empty states, or for businesses that didn't have a logo.

Wireframe

After Applying Design Styles

After Feedback + Final Designs

Hero Section

Marketplace

Discount Creation

Admin and Settings

Product Solutions

I revamped the home page with less people and more desirable items just to give the user a hint that FWB is a markeplace.

I included a step-by-step demonstration of how the sight works with quirky visuals to further clarify what FWB is for.

A sneak peak at what the platform has to offer in terms of discount to lure our users in.

"Bene-pal" instead of wingman or bootycall, our copy strays away from any unwanted misunderstandings

Originally, there were multiple small ads here for revenue. While efficient, the screen felt too crowded so I replaced it with a carousel. That way we could have multiple ads going, but still allow the user to focus on one thing at a time.

Previous discount displays would simply state a percentage and list the number of "discounts" available.

Bene-pal instead of friends or wingman to continue to distance ourselves from the unwanted definition of FWB and more to our original purpose.

The previous menu bar didn't have a button that directly led to the creation of a new group or discount. I thought this was confusing, so I swapped it out for a plus button

Clean layout allows is less overwhelming for our users overall. When choosing the company name, the form would auto-populate for user convenience.

Users can also share their discount individually or in mass, both forms are offered to the user.

To give the user the choice of anonymity, we have a randomizer that would randomly generate a user profile. Unless manually selected otherwise, users would move forward with this profile.

To continue allowing user to feel protected while growing their community, we introduced group admin settings where they can oversee group activity, group members, and overall growth.

Future Iterations

How would I continue to expand on this product?

The current designs are currently being implemented by developers, thus putting the design side of things on pause. However, if I were to continue with the design for this project, I'd like to proceed with creating a chrome plug-in similar to our competitors.