ClientThe Batch Foundation / LaTasha & Charlie Batch
DescriptionOur 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.
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:
- Pre-Registration Website
- Event Check-In System
- 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
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.
1) Ticket Codes
2a) Personal Information
2b) Order Game Preferences
3) Confirmation Page
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
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:
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.
Limiting the color palette and interactions, except for the main interactive scoreboard, ensured the information was legible and always accessible, given the distracting environment.
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.
- Project Planning
- Identifying Stakeholders
- Interviewing Stakeholders
- Site Visit
- Modeling the System
- Iterative Testing
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.
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.
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.
Modeling the System
Various models were created to provide internal sources of reference for the team.
Mid & Hi-Fi Wireframes
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
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.