Rapid prototyping and development – and timely delivery – of high-profile client support application.
Problem: As an official sponsor of Super Bowl 50, Visa was planning to host hundreds of high-profile partners and clients, as well as key NFL representatives for a series of events. Visa needed an event management app for the January, 2016 event.
Visa was to coordinate a wide variety of events in numerous locations around the city of San Francisco. We needed a simple, comprehensive application that would enable Visa event staff to track, communicate with, and identify event guests and participants.
Solution: We created an event tracking, management and communication application. We called it the “Backstage App” and we deployed it for testing in December 2015 before launching it to staff and guests at the official, Visa-sponsored Superbowl related events.
My Role: Sole designer on a team with a product manager and five developers.
Outcome: We made it! The multi-day, multi-location Superbowl 50 partner / investor appreciation event went smoothly thanks to the success of the Tracker App and its tight integration with Visa’s Agenda application.
Unlike other projects, the delivery timeline on this application was extremely tight, and we needed to apply best-practices knowledge and move with higher-than-usual velocity toward developing and deploying a live, fully functional application. This meant we needed to anticipate UX issues from the first sketch.
Agenda item in SB50 app
Approach: Consult, Gather Requirements, and Ideate
Product Consultations + Explorative Discussions
I sat down with a lead product owner for several informational discussions. With his help, I pulled together requirements and established critical must-haves for an MVP, along with several stretch goals that might improve the experience for both guests and staff.
My first move was to determine the needed taxonomy (information architecture) of the application. By developing the architectural structure for the app, we would be able to determine critical task flows necessary to develop a Minimum Viable Product.
Once we agreed on the intended Information Architecture / app flows, this allowed me to finalize the structure of the application and share it with other stakeholders, including our Creative Director, who would provide critical input on the direction, and including our Development Manager, who was critical in determining both feasibility and cost in terms of person-hours.
Create and Share, then Create and Share Again.
Next, we needed some sketches of how the app might look and interact. Pencil and paper are always a good idea at the start.
Build + Create: Establish Content Hierarchy, Design Wireframes, and Iterate
The Rubber Hits the Road
I developed a comprehensive set of wireframes to specify features and behavior for each product area.
Several features were needed for this effort:
- A Dashboard View of Available Actions
- A list view of attendees
- A one-way communication system
- A Tabbed Event Agenda View
- An Event Check-in System
- Basic Data Visualization for Guest Check-ins
- A Basic User Search Component
- Basic Device-Camera Integration
Articulate the Brand: Propose High-Fidelity Mockups and Polish the Design
Prepare for Handoff
I explored a few different directions for design aesthetics, starting with the dashboard.
After deciding on a direction, I designed high-resolution mockups against each of the wireframes to deliver to developers.