NBA App on visionOS
Spatial Design, Human Interface Design, Interaction Design, and Creative Direction
The NBA needed to design a visionOS app, set to debut on the Vision Pro launch day.
Awards & Recognition
A dream come true and a personal career highlight
Apple Design Awards: Spatial Computing category Finalist
Apple App Store: App Spotlight
Apple Newsroom: Among the 600 new apps for Vision Pro, we were featured as a headliner.
WWDC24 Keynote: Headliner under Vision Pro category
Youtuber Brian Tong raved about the NBA app on Vision Pro, calling a dream for sports fans
Hollywood Reporter: Article feature
On the morning of Feb 2nd, Vision Pro's launch day, our team presented to Tim Cook @ NBA HQ
Overview
Role
Lead Spatial Designer
Technical UX
Visual UI
Design Systems
Creative Direction
Team
Steering Committee: Chad E, Michelle L, etc
Product Management: Essem H, Chris B
Engineering: Matt P, Lauren M
Design: Carolyn C, Matt K
Duration
August 2023 - Feb 2024 (6 Months)
Background
Apple unveiled the Vision Pro at WWDC23, revolutionizing Spatial Computing forever. The NBA seized this opportunity to develop a native experience on visionOS, offering fans an immersive way to engage with the game like never before. The NBA app would harness the immersive potential of visionOS, providing fans with a groundbreaking way to experience basketball. Featuring advanced interactivity and unparalleled viewing options, the NBA visionOS app aims push the standard and set the tone for immersive design.
Game Schedule
The "Home" tab on the NBA App for visionOS prioritizes instant streaming of NBA games.
Game Card
Displays all past, present, and future games with each game’s status as well as calendar date picker.
Highlight Teams and Players
Highlighting teams and favorite players dynamically builds excitement for upcoming games, creating an engaging and personalized experience that encourages user engagement.
Scrolled
Day to Day
Game Detail
Stay Connected
For NBA fans, the Game Detail serves as a hub to follow live games and stay connected to the action.
Essential Information
Provides key details for upcoming and scheduled games, including: Date, Location, Local tip-off time, Ticket CTA, Broadcast and Stream Information, Home and Away Team Records, Previous Matchups, Projected Starters & Team Leaders, Top Performers, Team Comparison, Injury Reports, How to Tune in: Options to Follow, Watch, or Listen to the Game, and relevant highlights.
Scoreboard
Features a dynamic scoreboard on the top toolbar, offering a clear information hierarchy for quick understanding of game state, schedules, and real-time statuses.
Live
Scrolled
Upcoming
Post
Stats Overlay Streaming
When watching a game, users can select tabs on the top toolbar for real-time performance data. The Stats tab displays an overlay with team performance data, enhancing the viewing experience by comparing both teams' performances.
Player Stats Ornament (R)
Detailed player performance stats, showing who’s on court and who’s off. You can toggle between both teams to see individual player stats. Clicking on a specific player opens a detailed player profile, showing their performance in the current game.
Teams Stats Ornament (L)
How both teams are performing in relation to each other.
Box Score
Player Profile
Multiview Streaming
Upon selecting the Games tab on the top toolbar, The Game Switcher appears on as a bottom ornament displaying all the games happening today, including live, finished, and upcoming games, along with the game status and team performance.
Switching and Adding Games
Users can swap a game into the Main window or add it to Multiview, placing additional games in smaller windows on the left and right.
Multiview Experience
IIn Multiview, all team and player stats disappear, allowing the user to focus on multiple games simultaneously. Audio originates from the primary window, highlighted with a white outline. Users can swap the primary and side games to customize their viewing experience. An "Exit Multiview" button below efficiently closes all windows at once.
Add to Multivew
2-Up
5-Up
A Personal Note
“I want to put a ding in the universe.”
– Steve Jobs
That has been my mantra and my motivation in life. In life, you can be a thermostat or a thermometer. You can set the temperature or feel like you’re constantly playing catch-up. My story is about setting a precedent where none existed before, much like the Vision Pro has done so for spatial computing.
Just as Apple revolutionized the world through the power of design, I believe in setting the tone for design in unexpected places. This project is about making history and inspiring others to see that they, too, can make a significant difference and shape the future through design.
Thank you to the NBA, Apple, and the visionOS team for giving me the opportunity to be a vessel for your vision and show all the world the power of design.