I participated in brainstorm sessions; performed competitive analysis; consolidated business and user requirements; and created and documented UX artifacts (sitemaps, userflows, wireframes, prototypes).
The Sacramento Kings were preparing to launch their new arena, Golden 1 Center (G1C), and needed a new app that would serve fans of the team as well as guests that come to the arena for games, concerts, and other events. The new app would give fans access to modern features of the arena, necessitating several third-party integrations into the app. Some of these integrations included real-time stats, experience upgrades for ticket holders, in-seat food ordering, merchandise browsing, and Uber integration.
- Design an app that lets users control all the tech features within new Golden 1 Center arena
- App needs to serve as comprehensive official Sacramento Kings team app for fans, guests, and season ticket holders
These goals were packed with troves of individual requirements that took into account all the features and considerations that was to be incorporated into the design of the app.
One App or Two?
The first step was to determine what made more sense for users: to have one app for both Kings fans and G1C? Or to have completely separate ones for each? My team and I identified our audience through high-level user segments and then created a list of features that applied to each segment. Using the list features, we defined the main experiential difference between a one and two app experience.
An informal polling amongst our colleagues, family, and friends revealed that a strong preference towards the one app experience which was ultimately the solution we proceeded with.
Defining Features and Information Architecture
After deciding on the single app approach, we revisited the features and requirements list to refine it. We conducted stakeholder interviews with key people from the Kings organization to ensure that we addressed all the business needs and concerns. I then mapped out the list of features which were informed by existing app analytics.
This mapping activity yielded a diagram that's part sitemap and part user flow expressing the relationship between the functional requirements, general app features/sections, and a third-party integrations on our list. This application flow diagram was only a first draft and would go on to be adjusted and refined throughout the course of the project, but served as our guide and checklist for tracking our work and progress on each aspect of the app.
With a basic structure of the app in place, we began defining the strategy behind the “context awareness” feature. Context awareness takes into account when the user is viewing the app (before a game and during a game) to customize the content presented, and it was one of the overarching pieces that affected a slew of other app features, and thus required a clear understanding upfront. We identified what the states were and the effects and changes in each meanwhile defining as much of the functionality details as possible.
I took this knowledge and began sketching and exploring how everything was to translate into a UI.
The design process was iterative from that point on. The sketches I created were used by our visual designer who created a style guide that we used as we designed the rest of the screens.
As a team, we juggled client feedback that affected both the product and user experience strategy as well as the style guide and UI visual design language. We met regularly to ensure that the overlapping changes and requests were accounted for consistently across UX and design.
Third-Party Integrations & Wearing Many Hats
The most complex aspect of this project was balancing the needs of a diverse set of users with vastly different requirements against a slew of third-party technologies at varying degrees of sophistication and documentation. The lean scope meant that our team was unable to supply tech resources and it was up to me and my team to become fluent in the technical documentation where it existed and work directly with the vendors' engineering teams where it did not.
At one point, it involved creating flow diagrams to document the back-end data flow for user registrations involving three different account platforms so that I could properly design the registration forms and process. At another: having regular calls with the engineers for an integration that wasn’t thoroughly documented to learn its capabilities, and then helping them design a custom UI for their own product so that it would meet our users' expectations when presented inside our app.
The app onboarding was one of the last features we addressed since it had integration dependencies. I worked closely with the tech team and third-party vendors to understand the ticketing and accounts infrastructure to determine the registration flow. I also designed the onboarding tutorial which guides users through key features of the app.
Prototyping & Interaction Design
I compiled screens as they were designed into a clickable prototype using Marvel App. This prototype was used for informal testing up until completion. More intricate interaction designs and behaviors of certain functional elements were designed and modeled using Principle that were handed off to the development team to use as reference.
Results and Closing Thoughts
The dual mode of the Sacramento Kings + Golden 1 Center App is the first of its kind as was awarded "Best In Show" by W3. Monthly user sessions of the app have increased 400% and dwell time has increased 80% YOY in 2016. We used what we'd created for the Kings app phone designs and translated it into iPad and Apple Watch experiences and launched those apps shortly after the mobile app went live.
The app launched with a more than adequate amount of features, but we were unable to incorporate all the client requests due to time and budget constraints. Despite this, the app continues to be maintained and updated with new features by the Kings team, building off the foundation we've established.