Bonbids Bidder Redesign

Overview

Timeline: 5 weeks

Client objective: Improve bidder’s experience through a one-cause auction by improving the user flow and helping users understand the rules; making the game more engaging, and increasing social and gamification aspects.

Team: Reign, Monica, Ava, and me

My role: Project Manager, Information Architecture, UI/Visual Design. I also mentored the team in user research and UX design.

Invision Prototype

Case Study

We looked at the problem from multiple angles.

It was clear that Monique, our client, had a vested interest in the rules of her donation game and has had previous success with them in person, so we wanted to see what we could do to make them a reality online. Keeping this in mind, we jumped right in to do research so that we could understand where Bonbids fit into the market and user's donating lives.

Comparative Analysis

Compared 5 penny auction and bidding sites.

Key Takeaways:

Microanimations (.e.g, time flashing) with items that change upon bidding help user understand what happens.
Splash pages force users to read at least some rules before they start interacting with the site.
Tooltips and inline tips are used to explain rules for complex features.

User Research

Surveyed 39 people and interviewed 5.

Key Takeaways:

The majority of donators donate money (vs time or items) at least once a year.
Donators value specific causes they or a friend have a personal connection to.
The social aspect is key in reminding donators to give and to enjoy giving.

Site Analysis

Analyzed 2 flows and tested them with 5 users.

Key Takeaways:

User flows discourage users from staying on the site due to constantly taking them back to home.
Users don't see the cause or fundraising as part of their flow.
No one understood how the site worked and all were reluctant to input their credit card details because of this.

And then we synthesized that information to understand our next steps.

We had a lot of research to dig through and not a lot of time to digest it. The research was also split between different team members and we needed to quickly combine our research together. We decided that pulling our thoughts together into two empathy maps would help us understand who our user is and how to match their experience with donating in the real world to donating on Bonbids.

Donating in Real Life Empathy Map

Donating in Real Life Key Takeaways:

- Really social

- Focus on cause

- More constraints

- Different methods

- More understand rules

- Not gambling/no feeling of loss

Donating on Bonbids Empathy Map

Donating on Bonbids Key Takeaways:

- Chance for social aspects

- Focus on items first (personal benefits)

- Easier access

- Bidding process constraints

- Less understand rules

- Gambling/feeling of loss

The site provided none of the benefits of donating, yet most of the frustrations.

Key Site Problem

We focused on iterative design.

With only two weeks to really work out a solution, we wanted to whip out many designs fast. We wanted to focus on improving the sign-in flow as well as the item page. On the item page, we wanted to focus on:

- clarifying the rules

- highlighting the charities

- emphasizing the benefits

- improving the social/gaming aspects

Information Architecture

Updated site map and sign-up during bidding user flow.

Key Changes:

Simplified the navigation to two main tasks: see fundraisers or create fundraisers.
Placed sign up flow into a modal to keep user grounded as they fill in information.
Followed sign up directly with credit card entry to save user from repeating steps.

Paper Prototype

Created 4 paper prototypes, tested, and discussed a combined design.

Key Decisions:

Call the CTA "Donate $1 to Bid" to emphasize that users need to give a dollar up to play.
Change language of "auction" to "fundraiser," helping users relate to the cause they're supporting.
Create a social section with those watching the page.to help users feel exited to bid or buy.

Wireframe and Test

Wireframed flow and tested two iterations.

Key Changes:

Add another step to verify credit card charge after accepting credit card information.
Add a splash page to explain the time will be increased with each bid.
Reorganize bidding history to help user better understand their contribution.

We started by simplifying the navigation.

One of the biggest problems was the use of 3 very distinct users on the site, creating a complexity of who was using the site and which actions different users could take.

Old Site Map

New Site Map

In the old site map, there was a lot of confusion over who could do what, what causes the items were supporting, and who was even hosting the auction. There wasn't much clarity into the purpose of the site - donating to causes users are passionate about.

During testing, all users (5) questioned how the site worked in supporting charities. None could tell the difference between a sponsored item or one from a fundraiser.

In our redesign, users can do two things - see fundraisers and the items on those fundraisers, or create their own fundraisers. In this, the fundraiser and the cause comes first, emphasizing that this site first and foremost serves the causes that need the donated money.

During testing, users understood where their money was going, and one even expressed excitement over the possibility of them creating their own fundraiser.

Then improved Paula's experience in placing her first bid.

After talking to users and really understanding that they typically only donate to their personal causes or to the causes their friends share on social media, we focused on the user flow that a user would take if they clicked on a particular item in a fundraiser shared by their friend on Facebook.

Old User Flow

New User Flow

In the old flow, users would have to find their item of choice 3 times before being able to actually place a bid. We predicted this would greatly lower conversion rates as users give up on trying to keep finding their item and leave the site.

During testing, users were really annoyed (unsurprisingly). 3 users actually thought they had placed a bid on that item after entering their credit card information, even though they actually hadn't.

In our redesign, users who wanted to place a bid on an item would be taken through the signup flow right on that page, including creating an account and inputting their credit card details, so they would never lose sight of the timer going down on their item of interest.

During testing, we learned we needed to add an additional confirm page after entering credit card information, but no one felt annoyed or mistaken in whether they were charged or not.

To keep her enticed, we made the item page great.

Because the item page is where users would be spending most of their time, we wanted to spend a lot of time making sure it was helping them understand what was going on and enjoy their bidding experience.

Old Item Page

New Item Page

On the old item page, the page made use of specific site terminology and unclear icons that allowed it to be sparse in content, but also sparse in understanding. We predicted users might not understand everything.

During testing, users completely misunderstood the rules of the game, assuming incorrectly that they should bid the highest amount to win the item. They also wanted more information about the item, or else they really weren't all that interested in winning it. As a constant theme, users also had no idea how this was helping charities.

In our redesign, we provided more information about the item and taught them the rules through language at the time they needed to hear it. We also learned through testing to add a quick splash page showing that the last person to donate wins.

During testing, users felt overwhelmingly positive about their experience. There was plenty on the page to keep them informed, and they really felt like they were giving to charity rather than gambling on an item. One user even exclaimed, "I can probably spend a lot of time on this."

Key Lesson Learned

Making the page less about the game made users enjoy the game.