Goals

24G, a digital experience agency located in Metro Detroit, plans to engineer a recycling system, as a part of an advertising campaign, that can leverage the high foot traffic around Little Caesars Arena (and other stadiums) on the game day and the massive amount of recyclable waste they produce, such as aluminum cans. 

Requirements

Onboarded on the team as both UX and graphic designer, the initial requirements included:

1. A set of graphic and typographic logo

2. Mobile interface where scoreboard and statistics are updated

As the scope of the project expanded to make the system cross-platform, following requirements were added:

3. Desktop interface

4. Large screen interface including TV and billboard

Logo Design

ReVote, is a compound of ‘recycle’ and ‘vote’, two essences of the product. The graphic logo is a straightforward take on such a theme by combining the corresponding symbols: a bin and a poll. The typographic logo incorporates the recycling symbol to match the concept.

While the branding could be customized based on potential clients’ branding kit, the beta build used the typeface and color palette of 24G’s.

The logos were narrowed down from 3 color variations to 1 for conciseness and business needs, to communicate the eco-friendly concept of the product in the sales pitch. 

Users

The debrief with business department identified two groups of target users:

1. General public visiting sports stadium on a game day

2. Office workers passing lounge and kitchen area (since we were beta-testing the product in several offices for wider client base)

Unlike many projects that targets specific demographics, the user base for this product was based on venues. Considering the variety of user demographics, the product has been tested against 30+ random users from 10s-60s.

Wireframe

Our MVP was a mobile interface that includes the following features:

• Landing page: Poll question, 2 voting options, result visualized as a bar chart, navigation to ‘About’ and ‘Statistics’ pages

• About: Customized rules and/or instructions for voting, link to the landing page

• Statistics: Timeline of voting history, proportion of recycled items, link to the landing page

Considering the small real estate of mobile screens and fast-paced environment (e.g., stadium entrance right before the game, office cafeteria at its peak time) where users can’t focus deeply on the content, the screen components are optimized based on Fitts’ law.

Development

After reviewing the first draft (above) with the business department, we decided to make the following changes:

• Reducing the number of accent colors (from 3 to 2, removing orange) for visual simplicity 

• Changing the entry point to the statistics page from a button to scroll; less button targeting for users

• Removing the recycling proportion chart due to the engineering challenge; the feature for classifying recycled items took longer to develop and couldn’t ship on time. As a result, the MVP will only count aluminum cans as polls

• Splitting the timeline chart to display the voting result of each option 

The scope of the project also expanded to make the product cross-platform. Therefore, desktop and large screen interfaces were added as additional requirements with the following adjustments:

Desktop interface:

1. Screen proportion and element size have been revisited.

2. The ‘About’ page has been translated into modal dialogue. Modal dialogue was not an ideal option for a mobile environment as it would often lead to misclicks (due to a small target). In a desktop environment, however, users have better precision; hence, it would less likely be a barrier

Large screen interface:

1. Considering that the scoreboard is non-interactive, all content should fit on one slide. ‘About’ page may be excluded as users have access to the page through personal devices

2. Some scoreboards may come with the voting station while others may not, requiring 2 versions of the interface

Final Product

Presented in the order of mobile, desktop, and large screen interface.