0

12

56

88

100

%

Niantic is a San Francisco-based company using AR and mapping technology to blend the physical and digital worlds. Niantic follows four main pillars: draw people outdoors, inspire exploration, encourage exercise and create connection. Made famous by Pokémon Go, they have since released other games, including NBA All World: a revolutionary way to play basketball.
The Dreamspace team was given numerous tasks on the digital end of NBA All World, from redesigning the whole UI and creating the map and POIs to rethinking a new type of player card that infuses hoop culture. We worked closely with the internal teams at Niantic Labs on our creative approach, visual treatment, UI/UX demonstration and motion behavior.
Services: In-Game UI/UX — Map/POI — Player Card — Game Icon — Loading Screen — Interactive Player’s Guide

Visual Identity

United 100+ game screens through a sophisticated yet easy-to-navigate visual system
The gamer, positioned as the coach, manages many players and makes even more choices. They level up, boost, recruit one player and bench another, leave some on the courts to stay and compete on the leaderboards, and travel through countless arenas. With the detailed skill parameters and seemingly endless decisions, the UI had to remain simple and sleek to let gamers easily navigate complex game mechanics.

UX to UI Transformation

Typography & Color

We combined black and dark grey with vibrant yellow to form the primary colors of this palette, creating a striking contrast and alluding to the feeling of nighttime.

The other colors in the palette are also bold and eye-catching, contributing to the spirited energy of the game.

We also introduced team color combinations into the player selection and management screens for a more customized feel.
COLOR
ACCENT
FFC700
POSITIVE
25BF63
DANGER
D8244E
INFO
42A4E0
FOCUS
6242E0
%100
1C1C1C
%90
1C1C1C
%80
1C1C1C
%70
1C1C1C
%60
1C1C1C
%50
1C1C1C
TYPOGRAPHY
Download from Google Fonts
Download from Google Fonts
Our typography choices created clarity and harmony across communications—and emphasized the sporty boldness of NBA All-World
We chose Rajdhani as our primary font and Roboto as our secondary. They are both condensed and Google Fonts, which gave us more room when designing information-rich UI and long texts, and the best compatibility for different languages.

Usage of Colors

We color coded vibrant blue, green and magenta to indicate states and create a hierarchy.

Player cards are colored accordingly to their team colors to create distinction and a customized feel for each player.

Icons & Buttons

Designed over 700 custom icons
We created a universal language of icons to be utilized in any outside needs, such as an external product like Campfire, or for later-introduced features like Quests. The icons easily mix and match, convert to 3D and merge to create infinite assets for infinite uses.

Interactive Player’s Guide

As the Niantic team planned to meet with the NBA players featured in the game, we created this one-page guide with appealing parallax animations so that Niantic could quickly and engagingly showcase the game's highlights to its stars.

Early Explorations

Over two months, we explored every possible layout and color combination and presented them to the client to provide a better understanding of the UI design. We coordinated 4-5 hours of twice-weekly work sessions with publishers and developers in various time zones. We designed, revised and approved everything together—as one team.
2 months

Creative Overview

We explored distinct POI silhouettes and characteristics over a simple map to make real POIs the focal points, emphasizing the connection between the game and the IRL world. The POIs further pop thanks to a visual cue of holographic dots indicating POIs in the user's interactivity range.

Arena

Arena locations that are tied to the real locations of NBA arenas. Players will compete against each other on 1⁄2 court 1 on 1 style play. Invite only tournaments will be held here for maxed out players that will allow a player to reach “Legendary” status through Tournament Rings. These will be located at Points of Interest (Official NBA Arenas).

Court

Court locations where players compete against each other on 1⁄2 court 1 on 1 style play. Ruler of the Court mini-game will be available to dominate the location and earn rewards. These will be located at Points of Interest (Existing Basketball courts).

Player Point

Player Point locations where NBA players can be found. Play them in drills to earn shards of that player. Players can be encountered all around the world.

Dropzone

Designated locations where players can obtain consumables and other game items, no players & no XP. These will be located at Points of Interest (i.e: Convenience and clothing stores).

Drop Zone items - Energy & Power Ups, Game Currency, and XP Wildcards,... etc.

Three-Level System for Player Point POI

The three-level visual system indicates the rarity of a player, supported by unique visuals that allow users to determine a player on the map's rarity level at a glance.
Drop Zone UX
Motion Flow
MAP SKIN DESIGN EVOLUTION

Early Internal Explorations

Montage

An exclusive glimpse into NBA players’ lives beyond the All World court
These are much more than your typical player cards. They are a creative journey into NBA players’ lives through unique landing pages, game statistics, lifestyle and fashion content, their social impact, favorite music and more.

Design Approach

Instead of approaching the player cards with a gaming-style treatment, we designed highly stylized frames to connect more with hoop culture. With the look of a high-end magazine, these cards set the tone for lifestyle content--giving NBA players a unique platform to share what matters to them beyond the game.

UX Navigation

The player cards are broken up into three main categories: stats, news and lifestyle. Each contain a number of sub-categories that allow fans to get to know their favorite NBA players on a new level.
Player Card Design
NEXT PROJECT
NBA All World Marketing
PREVIOUS PROJECT
NBA All World Branding