Battle of the Bands Voting App

  • Product Design
  • UX/UI Design
BotB Voting App

Project Overview

As part of a design sprint, I was asked to improve the voting experience at a Battle of the Bands event. The existing voting system consisted of a paper ballots voting system which wasn't scalable with the expected crowd size expectation.

My Role & Responsibilities

  • Lead Designer
  • Research
  • Wireframe and high fidelity mockups
  • Interactive Prototyping

Problems

Based on user interviews conducted with band participants, event volunteers, and event attendees; the following pain points were identified with the current event voting structure:

  • People vote based on preference instead on a variety of skillsets.
  • People vote before they have heard all of the bands performing.
  • Current voting method (paper ballots) takes too long and is hard to count properly.
  • Rating bands can be hard because you have no comparison on bands that have yet to play.
  • No way to reference your previous ratings for earlier bands.

Proposed Solution

To create a more seamless user experience for this event, the digital solution we propose should include the following:

  • Have the Battle of the Bands schedule and band bios accessible for better understanding of each performer.
  • Allow users to rate bands on multiple types of criteria (music, performance, audience participation) to give a final overall rating per user vote.
  • Allow users to reference/change previous band ratings to better vote on all performers in the Battle of the Bands.


Audience Research

Research was conducted based on user interviews of those in attendance. Based on their insights, I was able to extract specific frustrations that they encountered in the voting process. This allowed me to develop ideas that may help solve the problems these users were facing. I also conducted research on other BotB events to get a better idea for the voting criteria to include in our app.


User Interviews

The interviews provided were a representative sample of the feedback from the event attendees and participants.

"Every years for the past ten years I have played in the battle of the bands. This year, I was in one of the four bands. We play funk music and it seems like the rock bands always win. I wish we were evaluated on more than just everyone's overall ranking. Also, we had to play first, which doesn't seem fair because people turned in their paper ballots to vote on us before comparing us to the other bands. Feels like we got the short end of the stick."
Zach, Lead Singer

"We have to do something different with voting next year, It isn't working. Counting 900 ballots while everyone is waiting on the results is too hard. If we use paper again next year, I'm not volunteering. I really want to, though! It is my favorite event."
Smitty, Volunteer Vote-Counter

"I absolutely love this event. It was a little hard to vote, though...we had to submit our ballots after each band played, but I wish I could have referenced the score for the first band because by the time the last one played, I had totally forgotten."
Diana, Team Member


Research for voting app
Research conducted using FigJam

Information Architecture & Userflow

By utilizing the goals, constraints, and frustrations collected during research, I was able to create a userflow that would ensure a seamless and improved user experience. This process allowed me to critically think through the flow of the app and identify the types of screens that would be needed in the experience.


Userflow created for voting app
User flowchart for voting app

Low-Fidelity Wireframes

Rapid sketching allowed me to explore different design patterns quickly while helping me understand which ones needed to carry over into the voting app design to ensure simplicity and ease-of-use.


ONBOARDING

Onboarding wireframes for voting app
Exploring login and instructional screens as part of the onboarding process.

EVENT SCREEN

Event screen wireframes for voting app
Different event screen layouts to best optimize the experience for those voting in the Battle of the Bands.

BAND VOTING PAGE

Voting screen wireframes for voting app
Layout and voting method exploration to create an easy and intuitive voting experience for the user.

Visual Design Mockups

By utilizing a style that would enhance the users experience, I was able to create a simple and functional app design for this event. I used different UI features to better inform/engage the user such as: interactive voting sliders, disabling buttons until conditions were met, and success screen popups.


ONBOARDING

Onboarding visual mockups for voting app
I wanted an onboarding process that would not only capture data for voting and analytical purposes, but also inform the user on their role in this journey. I also made sure that the user would have clear direction in navigating this process using error prompts, buttons (inactive & active), as well as navigational markers to indicate what step they were on.

EVENT/VOTING SCREENS

Voting screen visual mockups for voting app
It was important that the journey was clear to the user. I used tabs to differentiate between the two rounds of the battle. The user would have clear indicators showing which bands they had voted for and which still needed rating. Success indicators and error prompts played an important role in the design to help communicate next steps to the user.
BotB voting app

Deliverables

Design and interactive prototype of a mobile app that solves the problem of the paper voting system for the Battle of the Bands competition.


Improvement Roadmap

  • More event data including food vendors, event map, entire event schedule.
  • Ability to customize profile page.
  • In-app voting result screens.