MARVEL WORLD OF HEROES

Marvel World of Heroes game UI design began as a research and development exercise for Niantic. Niantic is a San Francisco company that uses AR and mapping technology to blend the physical and digital worlds, guided by four pillars: draw people outdoors, inspire exploration, encourage exercise, and create connection. Best known for Pokémon GO, Niantic has since built other games, including Marvel World of Heroes.

Marvel World of Heroes was an augmented reality mobile game made with Marvel Entertainment. Players would become their own super hero, customize their look, and team up with Marvel characters in the real world. Niantic announced it on September 9, 2022, at Disney’s D23 Expo, with a global launch planned for 2023. Dreamspace worked on how the game would look, how it would be branded, and how its interface would work.

Niantic came to Dreamspace after the two teams built a working relationship on NBA All-World. The game was still a work in progress, and Niantic wanted research and development that would end with two potential visual styles.

The brief inspired the team, and Dreamspace delivered more than 15. That range exceeded expectations and changed the job: Niantic asked Dreamspace to redesign the entire game UI and handle key branding work.

Each direction is applied to the same kind of player screen: a hero, a level, a Go button, and the controls around them. What changes is the layout, the color, the type, how much of the interface shows at once, and where the commands live.

Across all of them, the interface had to stay simple and sleek so players could navigate complex game mechanics with ease. Ten of the styles are shown in detail below.

Two of the major screens Dreamspace reworked were Missions and Campaigns. Both are complex from a UX and UI point of view, and Niantic asked for a large amount of information to be distilled into a design that is attractive and easy to take in.

The team worked through five color directions, each with its own palette. In one of them, completed, active, and locked missions each get a color of their own.

Niantic directed that Marvel World of Heroes preserve its quintessential comic book aesthetic and structure. That was not a straightforward challenge. By analyzing and prioritizing the importance of each UI component, Dreamspace designed an interface that held all the essential information, met the requirements of the game mechanics, and kept the comic book style players love.

The solution was a layout built on a 5-degree angle.

The work began with a set of basic UI mockups provided by Niantic. The 5-degree layout created spatial challenges, so Dreamspace used a range of design strategies to compensate:

• A rotating menu at the top that showcases a range of campaigns
• A lateral slider that signals continuity
• A layered visual approach to the quest lines, improving differentiation and hierarchy
• A radial button at the base, aligned with the menu design that is a hallmark of other Niantic games

That last choice reflects the importance of a cohesive menu structure across the Niantic user experience.

Industry Italic is the primary typeface. Its 10-degree angle acts as an elegant counterbalance to the layout and strengthens the comic book look and feel. Teko, a clean and legible typeface, is the secondary choice and complements the same aesthetic.

The primary color is a deep red that echoes the iconic Marvel logo and anchors the game in the Marvel universe. Electric blue acts as a dynamic counterpoint, creating cohesion and adding excitement. Secondary colors, including yellows, greens, and a spectrum of grays, enrich the comic book aesthetic.

Dreamspace designed more than 100 custom icons for the game.

Over three weeks, in a series of four-hour work sessions with Niantic, Dreamspace crafted more than 200 distinct screens across a variety of styles. Along the way, the team addressed every facet of the UI and delivered a comprehensive style guide. That gave Niantic the flexibility to adjust and update design elements at its own discretion.

You become your own Marvel super hero, in the real world.

Marvel World of Heroes is the first game in the Marvel franchise where players can become their own Marvel superhero in the real world. Niantic also asked Dreamspace for the game’s logo, app icon, and brand identity.

The team moved from research and a mood board to sketches, then through rounds of review with Niantic and Marvel to refine the marks. The W takes its angle from the game’s UI and reads as a player and Marvel heroes teaming up to win battles: victory and unity. The O is drawn as a portal.

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

What began as a request for two visual styles grew into the full game UI redesign and key branding work for Marvel World of Heroes. In three weeks of focused sessions with Niantic, Dreamspace delivered more than 200 screens and a complete style guide, giving Niantic’s team the tools to keep refining the design on its own.

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, learn about our branding services, or see all of our work.