Battle of the Bands Voting App

Creating a Better Voting Experience

  • Product Designer

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 for the coming event.

Problem

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.

Solution

I was able to create a seamless digital solution which included the following:

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

Lead Analysis App
Research for voting app
Research cards created 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.

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.