Overview
Our team was tasked with redesigning the Atlanta Hawks basketball mobile application. The app is a one-stop shop for Hawks fans to find customized team content, such as tickets and schedules, as well as customized content regarding the State Farm Arena, such as parking and food orders. Our team consisted of three designers (myself being the Lead UI Designer) and we provided the designs to an external development team.
Roles
My job as Lead UI Designer was, primarily, to tastefully implement the Hawks and State Farm Arena branding, maintain a consistent and intuitive look throughout the app, and guide users through various tasks they could use the app to complete.
The main purpose of the app was to bring fans into the newly rebranded State Farm Arena, whether it be for Hawks games or for various arena events. A key feature of the new app was a toggle between the Atlanta Hawks and State Farm Arena Events content. This leveled the two at equal importance and allowed users to keep track of both their basketball game tickets and concert tickets, all in one place.
Below, I've outlined the final IA and some key sections of the UI.
UX Summary
Our Lead UX Designer, Ty, did a great job of wrangling the chaos of all elements that had to go into the app into a useable and prioritized information architecture to base the rest of the project off of.
UI Design: Navigation
I went with a four-item bottom navigation bar to allow users to quickly access important screens. The Home Screens, Ticketmaster API, Profile, and Arena page are included as the primary elements, along with the hamburger menu that expands out. The items available in the hamburger menu change depending on which side of the main toggle the user is on (Hawks or Events).
UI Design: Home Screen & News Feed
The home screen is the first content-driven screen the users see upon opening the app. Due to the amount of content that needed to be presented, a clear information hierarchy was critical. At the very top is the Hawks/Events toggle that specifies the nature of the content on the screen. Below that on the Hawks side is the game card, which displays either upcoming or current game information. Below the the toggle on the Events side is a featured event. Both sides of the toggle then provide tiles that direct the user to various other parts of the app, such as the navigation screen to get the the arena, and the ticket management system. At the bottom of the home screen is a button to access the news feed, where users can find relevant media.
UI Design: Game Screens
The game screens, accessible from the hamburger menu, provide the most current game information. At the top is a four-item slider: Overview, Box Score, Plays, and Highlights. A significant part of the design of this app was dedicated to information design; we wanted users to be able to scan for what they wanted to find, while still providing enough detail.
UI Design: MARTA (Metropolitan Atlanta Rapid Transit Authority)
While designing the app, our team learned from the client that Atlanta's metro system is not typically used as a method of daily commuting, so users might need additional direction on how to use MARTA to get to the arena. I offered them two options in the form of another toggle: the Directions side provides plain text based on what direction the user is coming from. The Find A Station side provided customized, step-by-step directions based on what metro station the user is departing from.
UI Design: Wallet
To facilitate purchases for fans at the arena, we included an in-app wallet. The wallet allows fan to use both their own credit cards and their State Farm Arena card with pre-loaded value to purchase food and merchandise during games or events.
Closing
This was, by far, the most extensive mobile application I've designed, and the smallest design team I've made an app with. Overall, I'm extremely proud of what we created with the resources we had, and I look forward to further developing my mobile design skills in a wider range of industries.
Our app is now available on the App store and Google Play store!
Back to Top