NBA Top Shot

NBA Top Shot | 2019

Role | Lead UX UI IxD iA VisD

In late 2018, I joined Dapper Labs' internal “skunkworks” style team. Our overarching goal was to discover new experiences on the blockchain, generally centered around NFT's (non fungible tokens).

With a personal interest in Crypto I was able to ramp up quickly and adapt my skills to the environment. While we went through many iterations, the PM’s of the project saw a new and exciting opportunity in the world of sports.

While we worked on a variety of projects, our largest was an NBA focused NFT project which eventually became known as “NBA Top Shot” (You'll see lots of work-in-progress names throughout these images).

Goals

  • Put the user and their experience first in all aspects of the process & experience
  • Deliver Key Performance Indicators provided by leadership on an ongoing basis
  • Create a platform for minting, distributing, exchanging, showcasing, sharing NBA related NFT’s
  • Create an NFT that leverages the unique elements of the NBA and basketball as a sport
  • Find an aesthetic that supports the product goals, audience that can be built upon
  • Work with PM, leadership to discover and build a platform offers value and joy to users
  • Provide streamers with unique tools to engage with their audience
  • Work with UXR team members & vendor AlphaHQ (now Feedback Loop)
  • Consider & ease barriers to entry for first time users
  • Create a strong discovery & ownership experience
  • Find a name!

Approach

  • Visbility to leadership through regular syncs
  • Visbility by regularly representing out work to team through weekly team meetings
  • Welcoming feedback from team through public and private channels (for example Slack, email, Google forms)
  • Covering the fundamental elements of a crypto product (community, vision, exchanging and interactions) - while seeking to expand the lifecycle experience of purchasing, ownership, scale
  • Immerse the team in NBA related media, content, and gain a sense of a compatible aesthetic
  • Assemble moodboards, integrate key visual elements of NBA & basketball visual design cues
  • Work through a variety of names, aesthetics, and visual directions for the NFT and product where significant iteration took place in all aspects
  • Work closely with the NBPA in order to ensure product aligns with their vision

You can find press coverage on Forbes, The Verge, and NFT Now.

Architecture overview

NFT design

TopShot Logo

UI | Discovery

UI | Browse & Search

UI | NFT page

UI | User page

UI | Notifications

UI | Settings

Wireframes | Landing page

Wireframes | Browse & discover

Wireframes | User profile

Wireframes | User profile (owner view)

Wireframes | Home (signed in)

Wireframes | Home (not signed in)

Wireframes | Build team

Wireframes | Buy packs

Wireframes | Leaderboards

Wireframes | Notifications

Wireframes | Ellipses menu

Wireframes | FAQ

Wireframes | Search

Wireframes | Onboarding

Wireframes | Account settings

Wireframes | NFT page

NBA Top Shot game

I had proposed a game alongside the NBA Top Shot NFT collection. The goal was to leverage the NFT's for a card game that would be analagous to a basketball match. Limited turns counting down would act as the timer of a basket ball game, and the characteristics of different NFT's would contribute to stats such as "Team Chemistry" to improve the performance of team members, and the team as a whole.

Players individually or whole teams could play against one another to score points. The success of players would be determined by the stats on each NFT. Additionally, the team proposed accessories as part of the NFT experience which could be used to improve players and teams as a whole.

Outcome

We came up with a robust product, with strong discovery, browsing, and ownership features. Additionally, we innovated on the concept of an NFT to capture a specific moment in time and space -- enabling NBA fans to engage in a whole new way, and afford a new dimension to the collectibles.

Ultimately, we achieved our goals of creating a product that would pass Dapper's stringent internal standards and enable the team to bring it into reality. Furthermore, we created something that we thought would bring joy to NFT and NBA fans around the world.

While I joined Google before the final launch of NBA TopShot, the foundation & direction of the product were in place. The purpose, direction and functionality of the NFT had been defined. Additionally, there was intended to be a game to be tied into the product -- which had been planned at this point - though not yet to scoped or scheduled for release. We had achieved suppot and buy in from the greater team, leadership, and earned TopShot's place among Dapper Labs' portfolio of products. At this point, we had a clear vision for the product's user experience, lifecycle, and continued gameplay.

Complete information architecture, wireframes, and UI were handed off to the team that would bring the project to completion.

The visual direction of Top Shot grew immensely with the team after my departure. Yet, the interaction deisgn, structure, and fundamental design decisions carry through to the final product. The Dapper Labs team did an excellent job finalizing Top Shot!