Project Summary
Redesign the mobile application for the Atlanta Hawks basketball team. Application provides customized and relevant team content (buying and viewing tickets, team schedule, team roster, statistics, etc); as well as a customized and relevant content for the Phillips Arena (concerts, navigation to arena, parking, concessions location and ordering, etc) where the team plays. We provided UX and visual design to an external development team that was the intermediary to the main client.
KPIs
Get people to buy tickets to games, get people to the newly rebuilt Arena for games or other events.
Project Stats
Role: UX Designer – research, low/medium fidelity wireframes, UI design, interaction design, information architecture, user testing
Team: 02 Designers, 01 UX Designer, 01 Producer, 04 Developers [external team], 01 Product Manager [external team]
User flow iterations: 15
Duration: 06 months
UX Challenges
- Creating a simple and understandable user flow and information architecture for an application with many diverse functions
- Employing gradual engagement to ensure users were not overwhelmed with permissions requests while trying to browse app content
- Designing innovative and ergonomic navigation interaction options
UX Research
The client and external development team had already decided the core feature set for the new application when our team was brought on to the project; so my research was focused on understanding current designs and flows for basketball/arena mobile applications. To that end, I mapped out the user flows for two other basketball apps and interviewed frequent app users to get an idea about their usual structure and what pain points could be lessened.
Existing Miami Heat Application Heuristic Review
- Disruptive and undefined permissions requests
- Before even getting to the landing page the user is presented with two requests for device permissions with no clear indication from the app as to why they are needed
- Inconsistent and duplicative navigation
- some sub-menus had an extra view where the apps’ usual omnipresent top bar navigation could be view in a floating card format
Existing Atlanta Hawks Current Application Heuristic Review
- Disruptive and undefined permissions requests
- Before even getting to the landing page the user is presented with a request for device permissions with no clear indication from the app as to why it is needed
- Redundant and confusing navigation menus
- Two unlabeled hamburger menus containing duplicated menu functions that are more easily accessed via the main app menu
“I want the app to feel like it’s tailored to me.”
“Give me an easy way to get game and player info.”
Some key quotes from my user interviews.
Redesigned Application User Flow
The new user flow prioritized gradual user engagement by explicitly calling out screens for permissions priming and limiting the requested permissions to the context where their value would be clearly apparent to the user. It also shows clear delineation of application content and much clearer information structure.
Application Design and Interesting Challenges
Visual Look-and-Feel
Normally, basketball applications are a riot of competing colors, CTAs, offers, and iconography. We wanted this app to be a contrast to all of that be creating something more streamlined, simple, and approachable. This was complicated by the fact that the color palette of the team and also the Arena sponsor was black, white, and red.
The answer: Black is primarily used as the top level information hierarchy to bound the app at the top of the screen and the middle being mainly shades and patterns of grey, with red accents to highlight important or actionable elements.
Navigation Menu Options
I initially presented many main menu navigation options to the client–over 15 in all, including: Omnipresent scrolling, collapsable drawer list, collapsable drawer grid, hamburger menu list, action button with radial menu, and action button with spooling list.
Four and more
It was finally decided by the client to go with a “4 and more” style bottom menu navigation. This allowed the users to focus on the four main actions of the app without being distracted by ancillary choices.
For the client, the KPIs for this app were encouraging ticket sales, and getting people to show up to their newly rebuilt arena.
With those KPIs defined, the 3 bottom menu items were settled upon: Tickets, Me, and Arena. Home was added to provide the users a quick way to navigate to the Homescreen of the application. The Me button gave users a way to see all the content that was related to their personal experience at the Arena. Everything else (Game Details, Statistics, Roster, Shopping, etc) was shunted away into the ever-trusty hamburger menu.
The Home screen
With such a huge application with so many diverse actions, how is a user supposed to find them all, and equally importantly, how can the client let them know about promotions and events in a central location? My answer was to the create the Homepage: a one-stop-shop that, based on context (users’ location, pre-or-post-season or game, team or arena side of the app), would give users quick links to what was important to them at that moment.
I was able to define 8 use-cases where the Home screen would change contextually: Pre-game not at the Arena, Pre-game at the Arena, During a game not at the Arena, During a game at the Arena, Post-game not at the Arena, Post-season not at the Arena, Pre-and-Post concert not at the Arena, and During a concert at the Arena.
The tiles would swap out and change order based on where a user was when they opened the app. For example, if the app knew a user had tickets for a game that day and that they were near the Arena, the first tile would change to “My Tickets”. The Home screen was also a change to help train the user on the iconography and functionality within the app. If users became familiar with icons and functions on the first screen of the app, then when they were several levels deep, they could open the hamburger menu and already be familiar with the majority of icons and functions they would find.
Game Details
How to do you convey all of the information a diehard basketball fan wants to know while a game is going on? Thankfully, a lot of these design issues have been solved by past apps.
The first section shows the “score card”, who played, where, and the final score. Next, is the quarter breakdown of the two teams’ scores. Then comes the shot chart. There are various ways to display this, from the half-court overhead view, to a frequency style intensity graph. We decided to use the overhead view, which we found through testing to be easier to read at a glance, and allowed us to add a new useful feature: detailed play information for a selected play right below the chart. Simply tapping on a made or missed shot now presents you with the quarter, game time, player info and headshot, and a detailed description of that play.
We also redesigned the Game Stats section. Broadly, you can now view it as opposing bar graphs or as a simplified list. The decision was made to have both bar graphs start on the left side of the screen (as opposed to the center) for visual consistency. During our testing this let users more easily visually compare each teams’ stats.
Get There
We wanted to provide users with all their transportation options at a glance, to reduce the friction of getting them out of the house and into the new Arena. When arriving at the Get There page, the user first sees and interactable map with the Arena already marked, as well as the current weather. This helps them decide if they want to drive, use a ride share, or public transportation.
If they choose to drive to the Arena, they can use the Parking and Directions screen. This screen begins with a map with all the parking lots highlighted as red polygons, as well as an external link to buy parking passes. Below that is listed each individual lot, which when tapped expand to show detailed directions and information, as well as a link to automatically navigate to the selected lot via Waze (client mandated navigation software of choice). Additionally, when a lot is expanded, its’ polygon is highlighted in red on the map at the top of the page.
However, if they choose public transit, the experience is different. Trains, schedules, and line directions are inherently confusing if you are not familiar with them. To simplify this, I broke down the public transit screens into simple steps: First, the user selects what station they are at, or near, or can easily get to (using the included station map to help them if needed). Once a station is selected, their next steps to get to the Arena are broken down for them to reduce transit stress. Depart the station they’re at using one of the next trains listed, then depending on which line their are on, they need to transfer at Five Points station or simply get off at the Arena stop. Thankfully there are only four transit lines in Atlanta, which meant that users would only consistently need to transfer if they started their trip on either the red or gold lines.
Visual Design Prototype
Tyler Wilson : Designer + Strategist 