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 worked on other games, including Marvel World of Heroes.
Niantic approached the Dreamspace team after building a working relationship through NBA All-World, asking us to do some research and development before coming up with two potential visual styles for the WIP Marvel World of Heroes game. The prompt inspired our team so much that we delivered over 15, far exceeding expectations and landing us the tasks of redesigning the entire game’s UI and handling key branding work.
In-Game UI & Visual Styles Explorations
R&D
GAME UI
BRANDING

Design Insights

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.

Mission and Campaign Screens

Two major screens that we reworked were the Mission and Campaign screens. As they are quite complex from a UX/UI perspective, the Niantic team tasked us with distilling a large amount of information into a visually appealing and easily digestible design.

UX to UI Transformation

COLOR
TYPOGRAPHY

15+ Visual Styles

Magazine

The Magazine look and feel features a black and white typography background supported with serif fonts.

Graphics

This style contains colorful backgrounds with graphic design assets developed in sync with character development (i.e., skills, items, health, etc.)The equipment is hidden under the equipment button or tab to save space and keep the overall design simple.

Comic Book

We approached the Comic Book style with amorphous graphic design elements, script fonts, outlines and halftone patterns.

Bound

This style explores the 2D grid layout in depth. The essential commands are designed as 3D buttons and located on the top of the screen. We placed the UI contents in the infinity space behind it. It is a playful and unique 2D and 3D space combination that transports the user into their imagination of the Marvel universe.

Display

Display is our intelligent approach to a clean layout, infusing a bold color palette into the theme.The three-color system — Blue, Yellow, and Orange (as shown) —indicates the level of the user, and it's also fully customizable.

Mixed Styles

Mixed Styles combines styles from different design genres — BauHaus, Retro Arcade, Geometric Art, etc.

MCU

This style takes elements from a traditional MCU UI design and pushes it further. We utilized transparency and hexagons to the fullest for this design.

Art Deco

We designed these frames with Art Deco stylings in mind, creating a more elegant layout while retaining and featuring iconic Art Deco shapes.

Combat Load-Out

Combat Load-Out is the most in line with traditional game inventory layouts. We spaced everything within a grid-like fashion—a place for everything and everything in its place.

Stan Lee

This style derives inspiration from comic books of old. Varying line thickness, comic book panels, and halftones give it the classic "Golden Age of Comics" feel.

5° Layout

Per the client's directive, Marvel World of Heroes was to preserve its quintessential comic book aesthetic and structure—a challenge that was anything but straightforward. However, through  analysis and prioritization of each UI component's significance, we designed an interface that accommodated all the essential information while adhering to the game mechanics' requirements. This was achieved by skillfully integrating everything into a design that employs a 5-degree angle, ensuring both functionality and the beloved comic book style.

UX to UI Transformation

The journey began with an array of basic UI mockups provided by the client. Despite the spatial challenges posed by the 5-degree layout, we used a variety of design strategies to compensate. These included a rotating menu at the top, showcasing an array of campaigns; a lateral slider to signify continuity; and a layered visual approach to the quest lines, enhancing differentiation and hierarchy. We also integrated a radial  button at the base, aligning with the menu design that is a hallmark of other Niantic games, underscoring the importance of a cohesive menu structure within the Niantic user experience.

Typography

We selected Industry Italic as our primary font, finding its 10-degree angle served as an elegant counterbalance to the layout design, enhancing the overall comic book look and feel. For our secondary, we chose Teko, a clean and legible font, further complementing the comic book aesthetic.

Usage of Color

For our primary color, we opted for a deep red that echoes the iconic Marvel logo, anchoring the game firmly within the Marvel universe. We decided on an electric blue as a dynamic counterpoint, to create a sense of cohesion and inject excitement into the design. Our palette of secondary colors—encompassing yellows, greens, and a spectrum of grays—was carefully chosen to enrich the overall comic book aesthetic.

Icons & Buttons

We designed over 100 custom icons

Phases of Design

Over a span of three weeks, through a series of four-hour work sessions with the client, we crafted more than 200 distinct screens across a variety of styles. In the process, we addressed every facet of the UI and furnished a comprehensive style guide. This empowered the client with the flexibility to adjust and update design elements at their discretion.

Brand Vision

Marvel World of Heroes is the first game in the Marvel franchise where you can become your own Marvel superhero--in the real world.

Color Treatments

We applied a wide range of color treatments within the logo design, paying homage to the multiverse feature of the game — and the iconic Marvel Studios introduction video. Our original R&D work influenced and informed many of the color palettes and graphical elements within the logos.

Color Treatments

App Icon

Merchandise Mock-Ups

NEXT PROJECT
NBA All World Marketing
PREVIOUS PROJECT
NBA All World Branding
Work
Services
Insights
IMPACT
About
Contact
2023 © Copyright - Dreamspace LLC. Privacy Policy