Client
The Batch Foundation / LaTasha & Charlie Batch
Role
Design Lead
Description
Our team created an extensive, multi-functional event management system (consisting of a pre-Registration website, event check-in system, and large-screen informational displays) for the Pittsburgh Steelers' largest charity event of the year, In the Pocket.

Project Background

For my Information Systems senior capstone project, our team “Steel Trek”, had about 2.5 months to design and build multiple systems and interfaces critical in the running of the Pittsburgh Steelers’ largest charity event, a game night called In the Pocket. Each year $300,000+ is raised to benefit literacy and computer skills in local schools by The Batch Foundation, a charity founded by Steelers player Charlie Batch and lead by his wife, Latasha Batch.

In total, the system consisted of three main components:

  1. Pre-Registration Website
  2. Event Check-In System
  3. Large-Screen Informational Displays

In addition, we managed the silent auction by creating slides and taking photos of the auction items. Finally, I created ticket inserts and created materials including a t-shirt and promotional ad in order to strengthen our project team’s identity and unity.

1. Pre-Registration Website

Here on the first page both guests and volunteers entered the two codes found on their ticket.

The Pre-Registration Website was released about one month before the event date and allowed those who had already purchased a ticket to save time at the door by providing the necessary information ahead of time. The responsive design ensured guests could also enjoy the convenience of pre-registering via their smartphone while waiting in the entry line at the event. Furthermore, the site provided a means for volunteers to be kept track of and to ensure they completed a waiver of appropriate conduct, which had posed a problem in past years.

Highlighting uncompleted required fields red and providing an error message next to the field handled errors in a "polite" manner. Guests were both notified of and helped to correct errors.

Highlighting uncompleted required fields red and providing an error message next to the field handled errors in a “polite” manner. Guests were both notified of and helped to correct errors.

Creatively Managing Complexity

As this was an annually-occurring event, our client wanted to collect as much personal information as possible from the guests for marketing purposes, such as sending “save the date” cards months before to advertise the event. However, it is well known the usability best practice in designing forms is to reduce the cognitive load on users as much as possible by minimizing the amount of information required to proceed. Therefore, I employed the following design principles and patterns to reduce a user’s perceived time spent filling out the form:

Single page form layout as opposed to using a progress bar with steps, which gives the user a visual to track the effort expended

Inline validation to allow users to instantly identify and correct errors

Delightful interactions such as the direct manipulation of game preference order by dragging and dropping

2. Event Check-In System

For the main check in screen shown above, special attention was paid to creating a hierarchy with varied element and type sizing and color grouping so as to allow volunteers to quickly distinguish screen by action and importance.

For the main check in screen shown above, special attention was paid to creating a hierarchy with varied element and type sizing and color grouping so as to allow volunteers to quickly distinguish screen by action and importance. In accordance with Fitt’s Law, the key functional elements (Search Bar and Add Participant Buttons) were sized largest key for quick access.

As there were around 1,000 guests to check in, it was crucial the interface was optimized for findability and quick information processing with the following features:

    • Color coding by ticket price level (VIP, Player, and general admission) corresponding to the actual color of the ticket reduced search time by automatically narrowing down section.
    • Auto-Suggest was implemented in the Search Bar so only a portion of someone’s name had to be typed
    • In-Line Editing for quick information changes and In-Line Adding of new participants at the door
    • The Automatically-filtered Table View ensured that once a guest was checked in, their corresponding row was removed from the list (yet was still available for look up via a Check-In Status Filter)
    • Sticky Table Header reduced vertical scrolling and ensured the Search Bar and Add Participant Button were always within near proximity for quick access.

3. Informational Displays

The informational displays, which were shown on varied size screens ranging from flat-screen LCD TV monitors to a cinema-size projection screen in the banquet room, were a crucial source of structure and direction during the hectic event. Content shown provided information about the order of gameplay, items available for sale at the auction, sponsors of the event, and included tweets and images guests could submit and see updated in real-time via the twitter feed on the event scoreboard.

Due to the large, varied amount of information that needed to be communicated to guests and volunteers alike, all within the hectic, noisy environment of the event, the following design principles were crucial to combat information overload and keep the event running smoothly:

Unity

Drawing on the gestalt principle of similarity, all colors and fonts of the screens were coordinated so as to create the appearance of a unified purpose.

Screens providing the similar sort of information (game queue order and scores) were placed nearby each other in accordance with the principle of proximity.

Simplicity

Limiting the color palette and interactions, except for the main interactive scoreboard, ensured the information was legible and always accessible, given the distracting environment.

Legibility

Ensuring a high contrast ratio between the text color and the background (which was either white text on a dark green background or black text on a white background) helped to maximize the distance to which text on the screens remained legible.

Typographic decisions included limiting the minimum text size to 32px (a number we found through user tests for legibility) and
choosing a sans-serif font known for its legibility on screen, Verdana, for areas of dense text.

Design Process

Our project timeline as a Gantt Chart.

Our team at the kickoff meeting before we boarded the Starship Enterprise...

Our team at the kickoff meeting before we boarded the Starship Enterprise…

Project Planning

Our department had worked with the client, LaTasha Batch– CEO of the Batch Foundation–for the past six years on this project, each time building a new system. However, this year the event was being expanded from 250 to 1,000 guests, and moving to its new location at Latitude 360, a 65,000 square foot sports bar and recreational center, so the team eagerly awaited our first meeting with Tasha, which was only two weeks away.

As the event was only 3 months away, we had no time to waste and had our kickoff meeting the first week of school without our client, who was very busy with the event details herself. Nonetheless, our team and advisors already began to set out a timeline for project implementation to share with Tasha at our first meeting.

Initial affinity diagram created to identify and organize the different stakeholders.

I created a stakeholder map so as to give the team a visual of the overall landscape of the stakeholders to keep in mind when designing the system, with a special highlight given to the actors who would be actually using the system.

I created a stakeholder map so as to give the team a visual of the overall landscape of the stakeholders to keep in mind when designing the system, with a special highlight given to the actors who would be actually using the system.

Identifying Stakeholders

It was clear there would be many new stakeholders and requirements due to the new venue and 4x larger guest list. Lead by our project advisors and our project manager, all of whom had been involved with the project in prior years, our team created an initial affinity diagram in order to identify and group all of the stakeholders who had been involved in last year’s project.

Our client Tasha, on the left, was the main source of new, explicit requirements.

Our client Tasha, on the left, was the main source of new, explicit requirements.


Volunteers from the Batch Foundation provided valuable input concerning improvements to the game management part of the system.

Volunteers from the Batch Foundation provided valuable input concerning improvements to the game management part of the system.


The A/V system administrator, Ryan Quinn, informed our team of how to connect our views with data from the venue's arcade and bowling systems to enable seamless integration of our scoreboard display.

The A/V system administrator, Ryan Quinn, informed our team of how to connect our views with data from the venue’s arcade and bowling systems to enable seamless integration of our scoreboard display.

Interviewing Stakeholders

All in all, we ended up conducting in-depth interviews with our client, three past event volunteers from the Batch Foundation, three past event volunteers from the CMU information systems program, our advisors, the event venue’s A/V system administrator, and three  past project team members, one of whom who was also our team’s project manager. Questions focused on participants identifying their role, involvement, and likes and dislikes of last year’s system, other problems they remembered from the night of the event, and improvements they would like to see for this year. As many guests were going to be returning this year, and so as to not take too much of their time, our client did not wish for us to interview past guests.

image1 image2

Site Visit

Shortly after our initial client meeting, we visited Latitude 40, the site of the event. The goal was to gather more information concerning the layout of the venue and technical specifications of the A/V system.

image7 image6

Modeling the System

Various models were created to provide internal sources of reference for the team.

The floorplan of the event venue from a screenshot of the media control system used by A/V techs at the venue provided an important physical model for deciding on the placement of our various informational display types throughout the venue.

The floorplan of the event venue from a screenshot of the media control system used by A/V techs at the venue provided an important physical model for deciding on the placement of our various informational display types throughout the venue.


An entity-relationship diagram used by the development team for structuring the system's database.

An entity-relationship diagram used by the development team for structuring the system’s database.


System Flowchart

System Flowchart

Sketching

Sketch of scoreboard

Sketch of scoreboard

Low-Fidelity Wireframes

Wireframe of pre-registration website.

Wireframe of pre-registration website.


Wireframe for the second site of the page, where both guests (left) and volunteers (right) entered their personal information in order to register.

Wireframe for the second site of the page, where both guests (left) and volunteers (right) entered their personal information in order to register.


Waiver volunteers were required to read before completing preregistration.

Waiver volunteers were required to read before completing preregistration.


Confirmation page informing guests & volunteers they are now Pre-Registered. Important information about arriving to the event is also included.

Confirmation page informing guests & volunteers they are now Pre-Registered. Important information about arriving to the event is also included.

Wireframe for main event scoreboard

Wireframe for main event scoreboard

Mid & Hi-Fi Wireframes

Wireframes for main screens

Wireframes for main screens

Iterative Testing

Throughout the design & development process a top priority was user and system testing. Specifically the following tests were conducted:

  • Think alouds on paper prototypes of pre-registration wireframes
  • A/B Testing of the pre-registration website in an introductory lecture class of 200 students
  • Cross-browser and device compatibility checks for responsiveness were run of all system components at each milestone defined on our project timeline
  • On-site dry run of informational display screens on venue’s LCD screens and projection system
The project process poster used by our team at the senior projects fair. Who better to draw inspiration from than Massimo Vignelli's iconic subway maps when telling the story of our project?

The project process poster used by our team at the senior projects fair. Who better to draw inspiration from than Massimo Vignelli’s iconic subway maps when telling the story of our project?

Project Planning

As this was such a large-scale project, following a structured design process for each phase was crucial. The largest challenge faced was definitely coordinating communications with all stakeholders. Leading both user experience and visual design efforts, I was required to do the following to keep everyone on the same page and the project running smoothy:

  • 3x per week – team meeting to present alternative designs and facilitate collaboration at initial brainstorm meetings.
  • 1x per week – advisor meeting to present agreed upon design direction
  • 1x per week – client meeting to present completed design work and gather requirements for further milestones
  • As needed – coordinating direction of visual design and gathering needed assets from the cartoonist, external design firm which designed the invitations and decorations, and printer.