Project Scope

Product design for an app that would service a special event and facilitate audience voting

R

Project Deliverables

An interactive XD prototype with a presentation booklet showing the research and design solution

}

Project Duration

6 hour sprint

Apps Used

Adobe XD
Adobe Illustrator
Adobe InDesign

Phase 1: Research

Step 1: User Interviews

Interview with Smitty

Volunteer Vote-Counter

Design Problem

The slow speed of counting paper ballots by hand creates a poor experience for the event’s volunteers and for the attendees waiting for the results to be announced.

Potential Solution

Create an app to collect participants’ votes and design an online dashboard to display live results to the event’s coordinators.

Outcome

A digital app wireframe and prototype are displayed to get a feel for how the app would perform in real world use before coding and the layout/design of a dashboard is also presented.

Interview with Diana

Team Member

Design Problem

The scores are not able to be referenced or revised once cast, and they must be submitted immediately after each performance, making comparison challenging.

Potential Solutions

Create a system that promps the user for a vote based on a rubric after each performance while it is fresh in the user’s mind but may be changed at any point in the process. The scores of previous performances must be kept in front of the user for comparison.

Outcomes

A button will be available to the user to change the score of each performance so it may be revised as the event progresses. Thin bars showing the user’s scores for each of the three components of the scoring rubric will be visible under each performance for easy visual comparison between bands.

Interview with Lauren

Team Member and Lead Singer of the Desk Monkeys

Design Problem

The voting system is too simplistic for a fair evaluation and could benefit from a scoring rubric incorporated into the voting system.

Potential solution

Incorporate a set of three sliders in the voting section of the app so that the user can easily score three aspects of the musical performance. Accepted standards for the three aspects of all music will be used as the basis for this rubric.

Outcome

The sliders were integrated into the wireframe and interactive prototype to demonstrate how they might appear in the final product.

Step 2: Brand Visual Style Moodboard 

The brand identity of an organization should inform the UX design process to provide brand cohesion, immediate recognition, and consistency among user experiences within a system. The Ramsey Solutions brand identity is applied to the Battle of the Bands Voting System to give those attending and participating in the event a familiar experience and lower the barrier of entry for new users. The Ramsey Solutions logo and related graphics are a sampling of various fonts and styles consistently used within the brand identity system. The colors shown on this page were pulled directly from the HTML/CSS of daveramsey.com to give the app the needed uniformity and to adhere to the established design system.

Section 2: Design Solution

Step 1: Event Logo Design

A custom logo for the event was designed for use in the app. This design was created in Adobe Illustrator.

Step 2: Wireframe Design

 

These wireframes were designed using Adobe XD and exported as PNGs for this presentation. The top row of screens shows the initial onboarding process of providing an email address and selecting a password. The onboarding screens then display two simple sets of instructions on how to vote to make the user experience as simple and quick to learn as possible. The last thing someone at a concert wants to do is try to figure out a confusing app experience to cast a vote! The voting process wireframes are shown below this, with each band featured on its own page along with controls for voting according to the three criteria. Thin bars are displayed under the band to give a visual indicator as to how the user voted and to give a chance to change before submission.

Step 3: Interactive App Prototype

Step 4: Event Coordinator Dashboard

The web-based dashboard view would be powered by a back-end content management system to receive the data posted to the database by the user submissions on the mobile app. The dashboard would then be able to display the results live, highlighing the overall winner in brighter blue along with individual highest scores within each category. Floating averages would be indicated by a horizontal line overlaid on the bar chart.