Atlanta Hawks – Mobile Application Redesign

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
FLOWw NOTES

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
HAWKS flow

“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.

FLOW 07
Iteration 01
APP FLOW
Iteration 15, the final app flow
HAWKS me and Brian pic.JPG
We used physical print outs of all the application screens to look for UI inconsistencies

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.

app colors

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.

Screen Shot 2018-10-09 at 10.34.17 AM

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

homescreens-all
The 8 Home screens developed from exploring user contexts

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.

Whiteboarding possible Game Details sections.

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.

325e04f2-d0ad-4fb6-ba1e-31588dbd373c.png

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

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.

Google Play Store link 

Apple Store link

Visual Design Prototype

Screenshot_2018-10-08-12-40-38
Link to clickable prototype

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s