Triumph Visual Strategy
Triumph is a mobile character collection game with a modern aesthetic that doesn't take itself too seriously. Early in development, the team was struggling with UI Design. They were trying to skip steps by hiring a contractor to design art assets without defining the visual principles and applying a strategic design approach. The game was visually inconsistent, there was constant thrash, and they were moving too slowly.
Lean in and accelerate
The creative director and I rolled up our sleeves and restarted the visual process. Over the course of a few weeks, we got together for a series of multi-hour working sessions. We jammed on ideas real-time, captured insights along the way, and had a great time. This yielded a set of principles that solidified the design direction for UI, as well as the overall Triumph brand.
UI doesn’t need to carry the fiction
A key insight surfaced early in the process. It was time for us to move beyond the dark ages of fictionalized user interfaces made of stone and metal. A modern mobile game doesn’t benefit from making the UI part of the world. Instead, it's a window into the world—framing the characters and environments without competing visually. The UI is critical for establishing the style, vibe, and tone of the brand. They make our games easier to adopt and more rewarding to master. Our visual interfaces allow our users to build upon knowledge acquired from using dozens of apps on their devices. And they utilize storytelling cues and transitions from the movies and shows our users watch daily.
Typography is the foundation
Once we established the right tone, I took some time to find appropriate typefaces. We wanted a clean, modern sans-serif that was lightly stylized. Ideally, it would add some sci-fi tone to the visuals. It needed to work well as a display face as well as for paragraph text. We landed on Gilroy and it stuck. Just the right balance.
UI
To master our games, users must embrace depth and complexity. Our UI needs to remove obstacles to understanding that depth.
Tone
What's the emotional content? Clean, friendly and fun. To reach a wide audience at a low cost of acquisition. High quality and carefully crafted. Unique, not a copy of anything else. Feels like the next generation of mobile games. Natively mobile—looks and feels amazing on the phone.
Visual Principles
Bold and decisive. We know what we're going for and we're committing to it. Everything is essential, it has a purpose. There isn't a lot extra ornamation and noise. Feels vibrant, colorful, saturated, alive—makes it inviting and touchable. It's fun to just look at things and interact with them. Motion design as a means of driving that. Crisp vectors and typography over bitmaps, blurs, shadows.
Mixtape storytelling
Infusing the brand and the world with direct or indirect references to popular culture. We're leveraging the familiarity of popular genres, archetypes, tropes, but with a new twist.
Triumph is a vibrant postmodern epic fantasy adventure that doesn't take itself too seriously and welcomes everyone. We're going for a broadly appealing tone, similar to Overwatch or Marvel (specifically the playful side of Marvel, like Thor Ragnarok + Guardians of the Galaxy). The content needs to be cool enough to compel adults, sincere enough to please RPG fans, but playful and fun enough to appeal to a broader audience.
The aesthetic vision for the game has 4 main pillars:
1) Approachable + Inclusive
Inviting: We’re creating a vibrant world that’s welcoming to everyone.
Graspable + Memorable: Every component of the Triumph universe should be easy to understand, relate to, and remember.
Familiar Yet Fresh: We’re leveraging the familiarity of universal archetypes and popular tropes, but creating with authenticity to keep it interesting and unique.
2) Epic Fantasy + Heroic Adventure
Marvel
Overwatch
Zelda
Chrono Trigger
Final Fantasy
LoTR
3) Retro Futurism
He-Man, Thundercats
Thor Ragnarok
Nintendo, Sega
Nostaligia can add warmth and appeal
4) Mixtape Storytelling
By mixtape storytelling, we mean infusing the brand and the world with direct or indirect references to popular culture. We're leveraging the familiarity of popular genres, archetypes, tropes, but with a new twist.
During my time as UX Director at N3TWORK, the game team for Triumph was struggling with UI Design. They were trying to skip steps by designing assets for the game without defining the visual principles and strategic design approach. The game was visually inconsistent, there was constant thrash, and they were moving too slowly.
The creative director and I decided to roll up our sleeves and reboot the visual process. Through a series of multi-hour working sessions, we defined a direction that solidified the tone and overall brand for Triumph going forward. The direction also reflected my vision for a studio-wide approach for creating next-generation game mobile game UI.
We created a set of representative mockups. Mostly high-fidelity wireframes, lacking final character art, icons, etc. But, it was enough to get the team aligned on an exciting vision. The direction invited deeper strategic thinking, prototyping, and a unified approach.
At N3TWORK, we are making the next generation of mobile experiences. Triumph is at the forefront of our second generation of games. We are applying lessons learned from Legendary, Donuts, and Ultimate League.
We are moving beyond the dark ages of fictionalized user interfaces made of stone and metal. Instead we are establishing interfaces that are clean, light, and elegant.
They make our games easier to adopt and more rewarding to master.
Visually, our interface establishes the tone of the game without being burdened by carrying the fiction. They provide clear windows into the fiction—characters, environments, objects, and emotions.
Our visual interfaces allow our users to build upon knowledge acquired from using hundreds of apps on their devices. And they utilize storytelling cues and transitions from the movies and shows our users watch daily.
To master our games, users must embrace depth and complexity. Our UI needs to remove obstacles to understanding that depth.
Our UI reveals the underlying game design, so we can make better design decisions.
Our UI never tricks users into making bad decisions they will regret. It's honest and dependable.
At N3TWORK, we believe the next generation of games bridge the old world of gamers playing alone in the dark on a computer with the new world of socially-connected experiences on all your devices. We believe game experiences can be integrated into all experiences to make everyday life more fun and rewarding, deepen connections with others, and build mastery and depth of understanding in your deepest interests.
Often it's unclear whether a N3TWORK experience is a game or not. And we like it that way. Games for everyday life.
With Julie's help, we've designed a set of mock-ups that communicate this direction. They are not fully-designed interfaces, rather a broad summation of the proposed look and feel.
The three of us our extremely excited and proud of this design work. As Adam was driving this process, Blake and Julie found time on the side of their grueling first playable schedule to give feedback and direction to ensure we stayed true to the vision.
These mocks reflect:
Blake's vision for what Triumph should look like
Julie's vision for how the user experience should feel
Adam's vision for the next generation of N3TWORK mobile games
At N3TWORK, we are making the next generation of mobile experiences. Triumph is at the forefront of our second generation of games. We are applying lessons learned from Legendary, Donuts, and Ultimate League.
We are moving beyond the dark ages of fictionalized user interfaces made of stone and metal. Instead we are establishing interfaces that are clean, light, and elegant.
They make our games easier to adopt and more rewarding to master.
Visually, our interface establishes the tone of the game without being burdened by carrying the fiction. They provide clear windows into the fiction—characters, environments, objects, and emotions.
Our visual interfaces allow our users to build upon knowledge acquired from using hundreds of apps on their devices. And they utilize storytelling cues and transitions from the movies and shows our users watch daily.
To master our games, users must embrace depth and complexity. Our UI needs to remove obstacles to understanding that depth.
Our UI reveals the underlying game design, so we can make better design decisions.
Our UI never tricks users into making bad decisions they will regret. It's honest and dependable.
At N3TWORK, we believe the next generation of games bridge the old world of gamers playing alone in the dark on a computer with the new world of socially-connected experiences on all your devices. We believe game experiences can be integrated into all experiences to make everyday life more fun and rewarding, deepen connections with others, and build mastery and depth of understanding in your deepest interests.
Often it's unclear whether a N3TWORK experience is a game or not. And we like it that way. Games for everyday life.
Adam has taken the lead on designing the look and feel of the UI. The user interface pervades the entire game and has a pivotal role in conveying the identify and tone of the game.
Blake and Adam have rebooted the Product Design process, starting with first principles.
Adam started by creating 2 additional visual concepts spanning the spectrum of genres—Brawl Stars to ....
Given our timeframe and existing progress in the game, we must find a direction with the right tone that can be quickly and easily implemented, maintained, and extended.
We are not starting by designing the actual UI for specific screens. We are doing what we intended from the beginning—defining the right look and feel for the Triumph brand.
Long-term, we design a look and feel that is approachable, extensible, and modern—setting up the business for low cost of acquisition and fast iteration.
Short-term, we are able to lock in the UI direction and start designing and developing final elements in preparation for soft-launch.
Mobile platforms have moved video games out of the dark ages.
Goals
Quickly explore different genres
Choose the right tone for Triumph
Establish visual UI style for the brand
Create set of principles to guide UI Design
UI doesn't need to carry the fiction
UI isn't part of the world
It's a window into the world
It frames the characters and environments
Helps establish the tone of the brand
Intuitive and enjoyable guide on their journey
Tone
Clean, friendly, fun
Approachable for a wide audience
High-quality and carefully crafted
Unique, next generation of mobile games
Natively mobile—looks amazing on a phone
Visual Principles
Bold
Essential
Vibrant
Inviting and tactile
Motion
Crisp—vectors over bitmaps