With a new hockey team franchise and a re-built arena for Seattle on the horizon, the opportunity arose to build a mobile app to create a one-stop-shop for all events and an exclusive, one-of-a-kind fan experience. The ownership + management team decided to go one step further and build an in-house mobile app team, which didn't currently exist in sports.
Long story short, we've far exceeded all of our initial goals-- financially, user signups, user engagement, and more.
Quick Overview
Problem: From start to finish, game/concert/event attendees have a poor mobile app experience requiring them to download/log-in to multiple apps in order to purchase/manage/access their tickets, parking/public transit tickets, purchase food & beverages in the arena, purchase merchandise, and wayfinding around the arena. Ultimately, creating a deterring experience when a fan is considering attending a game, concert, or event.
Solution: Create a mobile app that will provide a seamless, all-encompassing, one-of-a-kind experience for game/concert/event attendees- eliminating the painpoint of having to use multiple apps just to attend a single game/concert/event.
Outcome: Counting from its very first opening night in October 2021, Climate Pledge Arena has now hosted over 4 million attendees across games, concerts, and other events as of March 2024. Designed and developed in-house, the mobile app is largely responsible for such a high attendance by providing an experience that is intuitive, engaging, and informative. Above all else, we created an experience that does not require users to use any other apps in order to attend a game/concert/event.
My Role:
As one of the two UX/UI Designers on this project, I was in charge of taking the research previously done by the product manager and to architect the informational hierarchy and functional foundation of the app from beginning stages to completion. This included collaborating and communicating with other designers, software engineers, and departments, building the design system from scratch, providing visual design, setting the standard for user testing with the existing fan base, creating issue tickets in Gitlab, and performing UAT.
Tools used:
Pen & Paper, Figma, Adobe After Effects, Adobe Photoshop, Miro, UserZoom, Webiny CMS, Lottie, Gitlab, Sourcetree, Monday
Skills used:
Competitive Analysis, User Research, UX Design, Design System, UI Design, Wireframing, Usability Testing/Beta Testing, Iterative Design, Prototyping, Agile Sprints
Opportunity:
The challenge was creating a one-stop-shop for the ultimate fan experience within a mobile app for two iconic brands, the Seattle Kraken and Climate Pledge Arena.
The first opportunity was solving the main pain point for fans that originated from the previous arena and attending events in the Seattle Center...Travel. Working directly with the city in revitalizing the Monorail and offering free transit passes for Kraken games, as well as offering the ability to book parking ahead of time, would allow fans to plan their evening with ease.
The second opportunity was to create a robust and visually striking app to showcase exclusive content for the Seattle Kraken hockey team and personalize the sport and the players so fans really felt connected.
Process
*Disclaimer: Unfortunately, I am unable to publically share the process designs/wireframes/user flows/structure maps of this project due to confidentiality. If you're interested to see these, I am able to share these in a private setting.*
The mobile app designers were brought onto the project after the user personas were created by our product manager and work began on the PRFAQ with the app's Tech Committee. Utilizing the PRFAQ and the User Personas, we had a list of feature requests and were educated about our fans. We took that information and began an initial competitive analysis looking at other sports apps as well as other apps that provided the same features we intended to provide as well. Without having any sense of UI library or style guide in place, we began mood boarding based on our brand guidelines and the look and feel we aimed to deliver. A unique challenge was that during the first 5 months, we started initial designs of components/features of the app without any insight into what the team brand or arena brand would be-- All we knew was that we would have to create this platform that could host two different brands, but that they needed to live in harmony, side by side. In order to test our features early in the design process, we created the "First Look" campaign that would advocate fans to sign up and user test for us. We allocated about 5,000 fans and utilized them all to design/test very agilely.
During this time, there was a lot of quick iteration and testing using both UserZoom, Zoom, and Formstack. Due to Covid, all user testing was done remotely.
Once we gained a solid foundation of features to design and confirmed our hypothesis of feature ideas with fans, we started to build the design system using the Atomic Design Methodology. Then working with our software engineers, we created naming conventions utilizing BEM methodology.
Every two months, we had to present our design progress which included defending the designs and collecting feedback from the Tech Committee-- comprised of tech-industry leaders in the Seattle area.
Throughout building the app, we worked with our Intersectionality Consultant to ensure we were covering all Accessibility requirements and needs of our users.
Exploring different high-fidelity design avenues of the app was the most exciting part for our stakeholders-- after 6 months, they finally could see the app come to life with colors, graphics, branding, and logos. We designed several different directions and presented our top 3 choices to gain feedback from stakeholders. Once a direction was chosen, we began testing it with fans to confirm all parties were enthused and excited about the direction of our visual design.
We designed several unique features, all in one app, such as: purchasing a parking space and searching for options on a map; a user flow for redeeming a free transit pass; a player roster, schedule, and stats feature; an e-commerce feature for Seattle Kraken merchandise; a full event calendar with individual event profiles that led to purchasing tickets using Ticketmaster's purchase SDK; a live game day digital program with live score ticker; and a Favorites section so that users can customize the app to have quick links to what they care about most.
Once we added the app to Testflight, we began Beta Testing and completed several rounds with different groups of testers, including a focused group of identified testers with accessibility needs.
Lastly, we built app brand guidelines, feature guidelines, and wrote the tutorial for our CMS so that content authors were educated on the best way to utilize content components and publish them in our CMS.
Once we launched, we had over 60,000 downloads in the first three weeks and maintained above a 4.0 rating in the Apple Store. Due to issues with Ticketmaster, we have a lower rating in the Google Play store but sadly there isn't much we can do about Ticketmaster issues besides requesting Ticketmaster to fix them.
App Logo Design
About 4 weeks to launch, myself and another designer were tasked with designing the app logo. The main challenge was creating an app logo that represented two brands without it being overwhelming. After several iterations, we presented our top choices to upper management and the Seattle Kraken board of directors.
The final logo comprises the 3 E's from Climate Pledge and the iconic Seattle Kraken S, overlapping to show collaboration.
For further context into understanding how the Kraken + Climate Pledge Mobile App is setting a new standard for the professional sports industry, see below for a visual comparison to other professional sports team.
