The team and my role
- Julia - VP Strategy
- Eric - UI Designer
- Gal - Development Project Manager
- Built.io - Development Team
- Jessica - Account Manager
- Shawn - Producer
- Andrew - Product Manager, Sac Kings App
I took on the role of product designer tasked with overseeing the strategy and user experience components of the project through to completion. My responsibilities included planning and conceptualization; documentation (sitemaps, userflows, wireframes, prototypes); and general troubleshooting and problem solving as issues arose.
The Sacramento Kings were preparing to launch their new sports and entertainment center, Golden 1 Center (G1C) and needed an app that would not only serve fans of the team, but all the guests that come to the arena. G1C was built with an abundance of technological innovations, and the app, according to the project’s stakeholders, “needs to deliver a truly connected experience.”
The Kings team needed the ability to continuously update the app and deliver new features like realtime stats, experience upgrades, 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.
Breaking It Down:The Approach & Process
Julia and I started work on listing and compiling all the features that would address the two goals. Our working session yielded features that were suggested by the client as well as incidental features like an audio player interface per the client's podcast suggestion. We conducted our stakeholder interviews after compiling the features list to ensure all the client’s considerations and expectations were taken into account, and presented our list to double-check that it aligned with the stakeholders’ expectations.
We then had a comprehensive set of features addressing two different entities-- the Sacramento Kings and G1C arena-- and needed a way to unify them. The decision to combine the G1C features into the Kings app rather than creating a separate app for the arena was largely attributed to the substantial number of shared in-arena features and the desire to create the most seamless experience for local fans and residents.
The difference between the two hypothetical apps would have only been in the content, and therefore didn’t justify a completely separate app. The solution to create a toggle switch to change between Kings “mode” and G1C “mode” was proposed, giving users unique app experiences for both brands in one comprehensive place.
I then mapped out the list of features; 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.
Details regarding third-party integrations were not finalized when the project began, affecting the order in which we tackled the numerous components and sections. We held off work on integrations and instead jumped straight into the fundamentals of the app, first 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. Julia and I identified what the states were and the effects and changes in each while defining as much of the functionality details as possible.
We took this knowledge and split up the next steps: Julia took on the responsibility of documenting our discussed approach and I began sketching and exploring how everything was to translate into a UI.
The design process was iterative from that point on. The sketches Julia and I created were used by our visual designer Eric, who created a style guide that we used to design the rest of the screens. Eric used the sketches and wireframes that Julia and I documented and created high-fidelity comps and continuously refined the style guide based on new screens and sections. 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.
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.
As we continued designing and constructing the app section by section, we diligently cross-checked each section and its set of features against the application flow, ensuring that all the dependencies and functionalities were accounted for and consistent across the app as a whole including the onboarding and account signup processes. Any discrepancies that arose from this exercise were immediately fixed. The fixes ranged from tweaks and changes to the UI, to reconsidering the functionality and specs of features, and adjustments to the application flow.
After a few sections were designed, I used Marvel App to create a clickable prototype. We used this prototype to internally test the user flow between screens and our decisions made on the layout and hierarchy of information presented on each screen. I worked closely with Eric to define the interactions and behaviors of certain functional elements, and created more interactive prototypes in Principle to give the development team as reference.
Results and Closing Thoughts
The dual mode of the Sacramento Kings + Golden 1 Center App is the first of its kind. The design of the app accommodated a wide range of microservices that enable a fan to do things like buy parking or find seats in the venue with an interactive map I designed. 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.