From player cards to the full game UI: designing NBA All-World for Niantic

Niantic, the studio behind Pokémon GO, built NBA All-World with the NBA and the NBPA. As Executive Creative Director and partner at Dreamspace, I led the design that began with one feature, the player card, and grew into the game’s interface, its map and its icon system.

A basketball game played on the real map.

NBA All-World is an officially licensed, location-based basketball game from Niantic, the studio behind Pokémon GO, made with the NBA and the NBPA. Players collect and customize NBA stars, and compete against them. Niantic builds its games around four ideas: draw people outdoors, inspire exploration, encourage exercise and create connection.

The game launched worldwide on January 24, 2023. Hyp Games developed it with Niantic and designed the game mechanics. Dreamspace designed the interface: the player card, the map and its points of interest, the icons, and the screens that tie them together.

It started with one feature: the player card.

Our work on NBA All-World began with the player card, a feature that John Hanke, Niantic’s founder and then CEO, had a clear vision for. We delivered on that vision. The result was that Niantic hired us to design the interface for the whole game.

Most player cards look like game assets. We went another direction. Each card is a highly stylized frame with the look of a high-end magazine, so it connects with hoop culture instead of game culture. Behind the frame sits a landing page for each player: game stats, news and lifestyle content, including fashion, social impact and favorite music. The cards give NBA players a place to share what matters to them beyond the game.

We designed the UX and the UI of the player cards ourselves. Navigation is split into three categories, stats, news and lifestyle, each with sub-categories, so fans can get to know their favorite players on a new level.

We delivered on his vision. Then Niantic asked for more.

With the cards in place, Niantic hired Dreamspace to design the interface for the whole game. Hyp Games was developing the game and designing its mechanics, and we joined them as the design partner. For the main game UI, we worked from Hyp’s UX documents and designed the UI. For the player cards and for the map and points of interest, we designed both the UX and the UI. I led a team of more than 15 people.

We started with one feature and ended up designing the interface for the whole game.

Over two months, we explored every layout and color combination we could and presented them to Niantic. We ran work sessions of four to five hours, twice a week, with publishers and developers in different time zones. We designed, revised and approved everything together, as one team.

One visual system for more than 100 screens.

The player is the coach. They manage many players and make even more choices. They level up and boost, recruit one player and bench another, leave some on the courts to hold their place on the leaderboards, and travel through countless arenas. With detailed skill parameters and a steady stream of decisions, the UI had to stay simple and sleek so players could move through complex mechanics without fighting the interface.

We united more than 100 game screens in one visual system.

Black and dark gray, with a vibrant yellow, form the core palette. The contrast alludes to the feeling of night. Bold secondary colors add the spirited energy of the game, and they carry meaning: blue, green and magenta mark states and create hierarchy. Team color combinations appear in player selection and management, and each player card takes its team’s colors.

For type, we chose Rajdhani as the primary typeface and Roboto as the secondary. Both are condensed Google Fonts, which gave us more room for information-rich screens and long text, and the best compatibility across languages.

More than 700 icons that work as a language.

We designed more than 700 custom icons as a universal language, built to be used well beyond the game: in an outside product like Campfire, or in features introduced later, like Quests. The icons mix and match, convert to 3D and merge into new assets, so one set can cover an endless range of uses.

A map where real places become game places.

For the map and its points of interest, we designed both the UX and the UI. We explored distinct silhouettes and characteristics for each POI over a simple map, so real places became the focal points. A holographic dot marks the POIs within a player’s range, which makes them pop and strengthens the link between the game and the real world.

A three-level visual system shows a player’s rarity on the map at a glance, supported by unique visuals for each level.

A one-page guide for meeting the stars.

As Niantic planned to meet the NBA players featured in the game, we created a one-page interactive guide with parallax animation. It let Niantic show the highlights of the game to its stars quickly and engagingly.

The interface was the first of three phases.

Niantic then asked Dreamspace to brand NBA All-World and to lead its global marketing, with approvals from the NBA and the NBPA. I was the Executive Creative Director for all three phases. Branding and global marketing, the second and third phases, are their own story.

The game closed in 2023. The system is the work.

NBA All-World went live on January 24, 2023. On June 29, 2023, Niantic announced it would close the game as it scaled back its in-house development, less than a year after launch. There are no player numbers to report here, so this case study is about the design.