Mercedes-Benz Stadium
Making it easier to order food using a web app
Mercedes-Benz Stadium wanted to streamline and enhance the food ordering experience in their facility by updating their native mobile app. However, the optimal solution was to customize Global Payment's white-label web app. As product design manager, my job was to adapt an existing web app design to meet the client's particular needs, leveraging three designers of which two were direct reports to me.
Research
The project kicked off with an assessment of three apps used by visitors to the stadium: the official apps for Mercedes-Benz Stadium, Atlanta Falcons, and Atlanta United FC. Feedback from visitors surveyed aligned with our observations: the app experience was frustrating and more of a hassle than walking up to a vendor and swiping a credit card.
Another designer on the team, Janelle Weiwei, was assigned to research competitors. Her visit to Vivint Smart Home Arena in Salt Lake City pointed to use of a web app to circumvent the friction that comes with downloading a native mobile app.
Experience Design
Given the wide ranging motivations individuals have for visiting the stadium—watch an NFL game, see a traveling performance group, perhaps attend a graduation—personas were too specific to be useful. Instead, we created cohorts, which assembled personas within broader behavioral groups. While parents of a toddler and a teenage vegan seemingly have nothing in common, their need to filter restaurants by type of food is shared. With our cohorts in mind, we charted how each feature in the app should ideally be experienced via feature flows and developed a site map.
Interface Design
Providing users the ability to schedule orders in advance and access ordering on-site meant delivering a completely responsive design. Keeping the design as consistent as possible across three breakpoints—desktop, tablet, and mobile—was important for unifying the user experience across devices, but also for the sake of minimizing production complexity.
Keeping layout as consistent
Despite variation in viewport dimensions, it was possible to maintain a sense of consistency in the Checkout screen among devices by adjusting the size of margins, interactive components such as buttons, and typography.
Tailored navigation for each breakpoint
There's no avoiding some customization for the sake of usability and that was certainly true of navigation, which is presented as a spacious nav bar with drop-down menus on desktop, but condensed to a side bar that behaves like a modal on tablet and mobile.
Deliverables
While my work on the project focused on the creation of white-label comps, another designer working on the project, Janelle Weiwei, produced comps with Mercedes-Benz Stadium brand styles applied.
