NBA ALL-WORLD

NBA All-World game UI design is the story of how one feature, the player card, grew into the interface for a whole game. 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.

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, and 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.

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 Games’ 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. A Dreamspace team of more than 15 people took it on.

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.

In NBA All-World, 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.

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.

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.

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.

Niantic then asked Dreamspace to brand NBA All-World and to lead its global marketing, with approvals from the NBA and the NBPA. Branding and global marketing, the second and third phases, are their own story.

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.

Games ask a lot of an interface. Dreamspace designs UI and brand systems that stay clear under complexity and still feel true to the world they belong to. Explore more game design work or see all of our work.