Press Play: Designing Game Menus that Captivate and Convert
How to design intuitive, immersive game menus that engage players.
The Essence of Engagement
Just as 'Hamilton' combined heart and energy to redefine musical theater, so can we redefine gaming experiences.
How?
Through immersive & intuitive experience that captures the gamer from the start.
The Power of Details
From Apple's meticulous designs to Disney's animated masterpieces, the details define success in pop culture. Every touchpoint matters, and for AAA games, the first touch is the MENU.
Steve jobs
From the design of the iPhone to the layout of Apple stores, Jobs' insistence on perfection played a significant role in the brand's success.
Walt Disney
Classic animations like "Snow White and the Seven Dwarfs" and "Pinocchio" were praised for their detailed art and animation, which was groundbreaking for their time.
Success in the Details
Breaking Bad' succeeded not just on its story, but on the intricate details that kept viewers hooked episode after episode.
In AAA games, our 'episodes' start from the menu.
Get it right, and you've got them hooked.
The Positive Impact of Great UX
1 2 3 4 5
Draw gamers in with simple, beautiful menu designs
Prioritize ease of navigation and intuitive controls & interactions
Surface key features/modes right away - don't hide the goods!
Provide clear progress indicators and skill/achievement tracking
Enable quick access to community features like friend invites and lobbies
Inviting the Reluctant Gamer
Not all gamers dive into AAA games with ease.
With heart, energy and attention to detail, we open our world to ALL players.
LESS CHURN, MORE CONVERSION, MORE PLAY
INVITE MORE PLAYERS IN WITH SIMPLE IMMERSION
A Call to Detail-Oriented Design
Heart, energy and attention to detail created cultural phenomenons.
Let's harness this power to level up the gaming experience.
Apple
A brand whose attention to detail transformed technology.
Hamilton
A Broadway musical whose heart and energy redefined musical theater.
Breaking Bad
A TV phenom defined by nailing the details in storytelling.
From Feedback to Function
Failing Forward to Success
Conducted surveys, interviews, and playtests to understand gamer needs and pain points.
Organized and structured menu options and flows based on research insights.
Created low-fidelity wireframes to map out initial menu and navigation designs.
Developed high-fidelity visual designs, focused on usability and aesthetic.
User Research
Information Architecture
Sketching, Testing, Wireframing
Visual Design & Feedback
Prototyping
Usability Testing
Design Iteration
Built interactive prototypes for usability testing and design iteration.
Conducted tests with target users to identify issues and optimize designs.
Refined designs and prototypes based on usability test feedback.
Understanding the Gamer
Survey responses
Hours of Interviews
Three Personas Emerged
Three distinct personas
The team conducted in-depth research to understand the target users - gamers.
By surveying and interviewing real gamers, key insights into their needs and motivations surfaced.
Persona 1
Janey is a "casual" gamer and plays to have experiences with friends
Persona 2
AJ is a "hardcore" gamer and plays to fulfill the need for competency
Persona 3
Alex is a "committed" gamer and plays to fulfill the need for autonomy
Diving Deeper
Research What's Working in the Industry
Hours of Interviews
Three Needs Emerged
What Gamers Want
Gamers DON'T want to access menu systems, they want to experience:
Simple Immersion
Experiences should be intuitive and provide escapism
(for Alex)
Game progress
Menus should connect players to their progress and skills development
(for AJ)
Social connections
Easy connections with friends in-game (for Janey)
By focusing on simplicity, progress, and connections game menus better fulfill needs for autonomy, competency and belonging.
From Feedback to Function
Failing Forward to Success
Conducted surveys, interviews, and playtests to understand gamer needs and pain points.
Organized and structured menu options and flows based on research insights.
Created low-fidelity wireframes to map out initial menu and navigation designs.
Developed high-fidelity visual designs, focused on usability and aesthetics. 3 iterations based on mentor feedback.
User Research
Information Architecture
Visual Design & Feedback
Prototyping
Usability Testing
Design Iteration
Built interactive prototypes for usability testing and design iteration.
Conducted tests with target users to identify issues and optimize designs.
Refined designs and prototypes based on usability test feedback.
Designs Refined
Sketches to wireframes to mockups to iteration, iteration, iteration
EARLY SKETCH
PAPER PROTOTYPE
WIRE FRAME
HIGH FIDELITY MOCKUP V.1 "90'S VIBE"
HIGH FIDELITY MOCKUP V.2 "MINI BUTTONS"
MVP AFTER 2 ROUNDS OF USABILITY TESTING
Simplicity with Heart and Energy
The MVP menu: Built on gamer insights. Three pathways, mirroring three core needs. The energy of innovative, radial design with
gamers' needs at heart
From Feedback to Function
Failing Forward to Success
Conducted surveys, interviews, and playtests to understand gamer needs and pain points.
Organized and structured menu options and flows based on research insights.
Created low-fidelity wireframes to map out initial menu and navigation designs.
Developed high-fidelity visual designs, focused on usability and aesthetic.
User Research
Information Architecture
Sketching, Testing, Wireframing
Visual Design & Feedback
Prototyping
Usability Testing
Design Iteration
Built interactive prototypes for usability testing and design iteration.
Conducted tests with target users to identify issues and optimize designs.
Refined designs and prototypes based on usability test feedback.
Putting It to the Test
Two rounds of usability testing, real gamers, honest feedback.
Each click, each navigation, refined to perfection.
Home screen, Testing Round 1
The intricate animation initially confused users
Home screen, Testing Round 2
Users praise the "rolling wheel" animation saying, "this is satisfying."
The Devil in the Details
Learning the "Less is More" Lesson to Level Up Immersion
Mission Details screen, Testing Round 1
Poor visual hierarchy caused users to struggle to find the cutscene
Mission Details screen, Testing Round 2
Autoplaying the cutscene & highlighting active areas made finding & playing it simple!
An "Unfriendly" Form vs. Function Finding
When is "new and innovative" a bad thing?
When it complicates a familiar, simple task.
Friend Invitation screen, Testing Round 1
Forcing a solution into the visual design style overcomplicated the user flow and frustrated users
Friend Invitiation screen, Testing Round 2
A simple series of modals meet the user's by displaying exactly when they need in each step of the user flow, and nothing more
Simplicity & Intuition Combined
Our MVP menu: Built on gamer insights. Three pathways, mirroring three core needs. Multiple rounds of usability testing delivered
the details.
Combining them with heart and energy
delivered success.
Success through Detail & Dedication
Positive Feedback, "I want to play it!", "Satisfying"
Reduced Churn
Increased Conversions
Higher Engagement
Heart, Energy & Details
The menu is the first impression AND beating heart in a gaming experience.
Like 'Hamilton' transformed theater,
we're transforming the gaming
experience
Heart, energy, and detail:
the keys to our success
The Future of Gaming UX
This is just the beginning. Our commitment to the gamer drives us forward.
Gaming continues to evolve with new technologies that enable more immersive experiences.
Investing in user-centered design will shape intuitive interfaces that feel almost invisible to the player.
Appendix
Click each section to discover the artifacts from the journey
Refined designs and prototypes based on usability test feedback.