Bonbids Dashboard Design
Company Overview
Bonbids is an online fundraising platform that was created by Monique Giroux in 2016 for people who are passionate about social responsibility. Users raise money to support causes they care about in a way that’s rewarding and addictive while also winning cool things for themselves.
Problem Statement
The client wanted a dashboard to provide analysis for her users to see the status of their fundraising so they know how the fundraising is going and how to do better next time. We, as a team of four, were asked to create a simple and comprehensive dashboard that improved upon the existing one. The existing one was in a preliminary stage at the time.
Project Duration
Team
My Role
Key Skills
4 Months
2 UX Researchers
2 UX Designers
UX Designer
User Research
User Interface
User Interviews
Usability Testing
Persona
Journey Map
Visual Results
Goal
Our goal was to design a simple, user-friendly, and easy-to-look-at dashboard.
​
My role
I worked as a UX designer. I was able to do both research and design, but more important than that, my speciality for interaction and visual design could be helpful to the team.
​
What do users need?
Users need to be able to see the status of their fundraisings to analyze their data.
​
My takeaway
I learned how to be a good team player as a UX designer. Dashboard is a complicated design but together we learned how to tackle it. It was interesting figuring out how to present data efficiently to users. It also has a lot to do with data visualization. We were able to come up with a successful data visualization for Bonbids.
​
Main Tasks
We were responsible for user research, interaction design, creating persona, usability testing and prototyping. What I did to make it easier for users. I contributed with user research, interaction design and visual design skills.
Research
​
User Interviews
​
We decided to conduct the user interviews to understand what people thought about the overall Bonbids experience and both online and traditional fundraising processes. We were able to recruit three people provided by the CEO of Bonbids, Monique. All of them appreciated the convenience of the online fundraising experience compared to traditional fundraising. However, the participants wanted to be able to compare each fundraiser. They also requested to be notified about important events that occurred during fundraising events. Last of all, they wanted to be able to see and analyze data in an effective and simple way, so they could be more successful at fundraising next time.
Marie - School Teacher, using traditional
fund raising method
Peter - Traditional Fundraiser
Erin - School Teacher, current Bonbids user
Journey Map
​
After the interviews, we needed to organize the data we collected. so we illustrated a journey map. We identified the pain points and the aspects of Bonbids that are currently working well. Most users said that Bonbids online fundraising is easier than the traditional method. However, they also said that it might be a scam and it is difficult to set up.
Visual Results
​
We visualized the interview results of the interviews, so they are easier to understand. In general, people were worried about the learning curve. They wanted to see the information and data of the fundraising in a simple and understandable way, so they know how they did it and how they could be more successful to improve in the future.
Persona
​
To illustrate the data, we needed to organize it by making personas. The first persona, Grace is deeply involved in the fundraising, since she works for a non-profit organization. Joanna is a school teacher that occasionally raises money through fundraising. The fundraising is a must for Grace, but it is optional for Joanna.
User Flow
​
The Bonbids website didi not have a dashboard, so we needed to create a new one. The dashboard itself did not have many steps. We decided to put the dashboard in the setting page. From there, users can access the dashboard. In the dashboard, there are the five sub-componenets that are all important for fundraising, ‘Gift Card Ranking’, ‘Donor List’, ‘Create a Fundraiser’, ‘Upcoming Fundraiser’ and ‘Q&A’.
Interaction Design
​
Wireframes
These wireframes are in the initial stage. I was experimenting with several layouts and these are some of them. The first one was about putting everything down on one page. The other was more minimalistic approach. This got us ideas to move on to the next wireframes.
This idea approaches the problem of making an easily understandable dashboard in a more free way. The boxes are in different sizes, which resembles a print newspaper. Bigger boxes suggest that they are more important. This is flexible that users can easily remove or add a box into the dashboard. It is also possible to move the boxes to different spots.
This is the first wireframe that we made. Based on the user research and discussion with the client, we came up with these statistics to show to help users to visualize their fundraising. We decided not to keep ‘Busiest time section’, ‘Least and most popular card sections’ and so on, because they were secondary information that are not directly related to fundraising performance, but we needed to keep ‘Date and time section section’, ‘Money raised section’ as they were more related. Our job is to show the most relevant data only in a simple way. At the same time, We needed to keep graphs individually for each statistic.
We focused more on ‘How can users raise more money?’, and ‘What things are more popular?’, so the people who fundraise could better understand how to raise more funds in the future. The client wanted it to be very visual and simple to be able to understand the design easily. The left panel included information that was secondary to the users with most of the information hidden, so users can choose to see it when they want to. The client also asked the fundraising event section to be broken down into smaller sections, because it was hard to understand.
​
​
%2B-%2B4%2B%E2%80%93%2B1.png)
We decided to put the questions and answers of ‘Want to improve your next fundraiser?’ and answers to the question on the same page as with other data, since these two sections can be combined to eliminate unnecessary steps. At the same time, the users can clear away their curiosity as they scroll down the page. We divided the information into 6 boxes. The separated information can be easily understood. The graphs represent the different kinds of information, yet they are listed in the order of relevance.
Usability Testing​
Prototyping and Style Guide
Main Dashboard
We figured out that different users want different stats to see, so we made the dashboard customizable. We decided to make each graph individually for clarity purpose. The reason is that our users are mostly older generations who might not be tech-savvy. We did not want to confuse users by combining the graphs into a single graph. We also focused more on money collected and donors participated that are directly related to fundraising effectiveness. The goal is displayed for the productivity reason of users. Users need to compare graphically between new participants and existing participants to provide information on how to do better fundraising next time and to get an idea of how it is doing.
​
The upcoming fundraising is located at the top right corner with an icon. When you ‘HOVER’ over the icon, it shows when the event is planned.
Customized Dashboard
When you click the menu button on the top right corner of each graph box, it will show the options such as ‘Move’, ‘Add’ and ‘Delete’ in images.
Date Picker
​
When the date selection is clicked, the date picker pops up. The date picker is one of the most convenient ways to select a desired date.
FAQ Page​
​
Based on our research, the users were wondering how to do fundraising efficiently, so we made a FAQ questions on a separate page to answer any question users might have about how to do fundraising with Bonbids. This page is accessible through the setting icon on the top right corner.
Donor List Page​
​
This page will be available when clicked through the donor list box on the dashboard. There are other options to put another box on the dashboard. That includes other types of boxes, that are not shown in this portfolio, such as ‘gift card ranking’, ‘fundraisers’, ‘new donor signups’, ‘highest bid’, and ‘most popular gift card’.
Style Guide​
​
We created a style guide for future reference and consistency of our design. I organized the visual elements of the design and listed them on a page.
Takeaway​
​
It was interesting to see how it can be different from what we, as designers, think is important than from what information users need to see. The decision to make the dashboard customizable was a nice-to-have option since the priority of users can vary. I learned it is important to represent a practical set of data to increase efficiency of the whole experience of the dashboard to meet the needs of users, which will enable them to analyze their fundraising data for more effective fundraising. That data can also be used for their future fundraising.