Top
 

BonBids Website Redesign

Redesign of an online bidding website to improve its onboarding process and make the bidding game engaging

 
 
 

About the Project

The goal of this 5-week project is to redesign the website to help users learn the rules of how to bid for items or donate to causes online, make the website more engaging for users, and increase social and ramification aspects.

My Role

Teamed up with three other designers, I facilitated in user research and created information architecture, visual design, prototyping, and delivered presentations to the client.

 

Why redesign?

Bonbids current.png
 
 

Users find it difficult to understand the bidding rules.
 

Even if they understand how it works, they think it's not fun.

 
 

How did we understand the information architecture of the current website?

Postit.png
 
 

What is the problem?

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

 
 
 

Key takeaways

  1. User flows discourage users from staying on the site due to constantly taking them back to home.
     

  2. Users don't see the cause or fundraising as part of their flow.
     

  3. No one understood how the site worked and all were reluctant to input their credit card details because of this.

Bonbids user flow.png
 

Interviews

 

What people said...

“A lot of things that I bid are electronics. It has the price that I'm willing to pay.”

What we learned...

People donate or bid for items where they can get benefits.

“Mostly I am interested in causes that are kind of in line with things I care about, either personally or professionally.”

People donate to support a cause that is in line with their views and beliefs.

“I don’t find out where to donate…only if someone posts on Facebook or if you call me.”

Most people don’t seek donation or bidding information on their own initiatives.

“If my friends do it, I get motivated to do it, too.”

Donating is a social activity.

Competitive Analysis

In order to understand how other online bidding sites are working in the market, we selected five penny auction and bidding sites and compared them with Bonbids from different aspects. The five websites we chose were: Bidding for Good, Beezid, QuiBids, UBid, and HappyBidDay. The dimensions we took into consideration were: auction process, automatic bidder feature, onboarding process, homepage, navigation, "buy now" feature, and donation feature.

 
 
Competitors Copy.png
 

Key takeaways

  1. Use different media to explain “how it works”, including diagrams, images, texts, and videos.
     
  2. Microanimations (e.g, time flashing) with items that change upon bidding help users understand what happens.
     
  3. Splash pages force users to read at least some rules before they start interacting with the site.
     
  4. Tooltips and inline tips are used to explain rules for complex features.
     
  5. Add different social network icons for each auction.
 

Ideation


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:

 

1. Clarifying the rules of bidding and donating
2. Highlighting the charities users are helping with
3. Emphasizing the benefits users are receiving
4. Improving the social and gaming aspects on the site

 
 
 

Wireframing

Based on the sketches we had, we created some wireframes for our redesign. We noticed that users were not aware of when their credit cards were charged, so we would like to add another step to verify credit card charge after accepting the card information. In order to remove the "How it works" section requested by our client, we decided to add a quick tutorial window with animation to explain that 10 seconds will be increased with each bid. We also suggested to reorganize the user's bidding history to help them better understand their contributions.

 
Lo-Fi Wireframes.png

Prototyping

First, users can 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.

Second, 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.

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

 
Bonbids_1.gif
 

Integrating the bidding and donating rules by adding a tutorial page

The tutorial animation was a successful design through our user testing. We added simple text instruction which is easy to understand. It was also mentioned by our users that animation is clear to explain how the timer changes with bidding.

 
 

Add a confirmation page to remind users about payment information

On the current website, users do not know when their credit cards are charged due to lack of system feedback. This would cause great frustrations for everyone. Therefore, adding a confirmation page is extremely important so that it delivers a clear message to the users and also creates a strong credibility for the website.

Bonbids_2.gif
 
Bonbids_3.gif
 

Using tooltips to explain terms on the site can create a better interaction experience for users

Online bidding may not be a common activity to most of the people. Therefore, there are a lot of words used on the website are not well understood by users during our testing. After looking at other websites, we figure that using tooltip would be a simple and efficient way to help users explain how these words mean. By just hovering to read the explanation, users claimed that this was "easy and interesting".

 
 

Highlight charity and causes to motivate people to donate

From user research, we learned that many users do not only bid to win the item, they also want to donate to charity and causes that they support or are inline with their beliefs and views. Therefore, highlighting charity and causes on the website will be great motivations for users to stay with the site. And to complete this goal, we added a cause bar on the top of the page so that the cause information would be explicit to users. We added a cause's story section to help users understand the stories behind. And we also linked to other items to encourage users to donate more.

Bonbids_4.gif
 
Bonbids_5.gif
 

Focus on social and gaming aspects will make the process engaging and fun

In order to make the bidding and donating process interesting for the users, we added a section called "View other bidders in the game". From our user research, we heard a voice that some people donate just to follow people around them. Therefore, making each user a personal profile page and listing their profile images in this section will prompt other users to hover and check. In our user testing, it was proved that users feel more engaged and also competitive by seeing other bidders. They also thought that was a fun game to play.

 

Final Prototype

 

Back to homepage or view other work below