Batnet: a mobile app designed for Batman to save Gotham City
Individual Design Challenge for Fun
Overview
Goal
Mobile app designed for Batman to stay in touch and collaborate
with other superheroes to capture the Joker as soon as he strike
Expectation
Receiving and accept missions
Calling for backup
Work with other superheroes in real-time
Getting info about criminals
Research
Interviewing a Super Fan of Batman
Batman is a superhero, and as a designer, I need to understand Batman's personality and background before I start designing. Luckily, I have a friend who is a super fan of Batman. I got the chance to talk with him and understand Batman better. Then I create a user persona.
Age: 40
(Justice League Movie)
Location: Gotham City
About
Batman: The Dark Knight. Alias of billionaire Bruce Wayne. Detective, martial artist, and one of the most intelligent human beings in the world
Batman’s Everyday Activities
Patrol the city
Coordinate with the police official
Receive mission, prepare to handle it
Fight against criminals
Goals and Needs
Know the mission accurately: who, where, what, how many
Check other superheroes real time status
Formulate a quick plan with the team
Tool accessible both pre-fight & mid-fight
Frustrations
Lack of effective real time communication
Unclear about the other superheroes availability and actions
Difficulty assessing danger level, planning take longer
User Journey: Batman
Research Focus Points
I divided the user research into two research focus points
Detailed & Instance Notice
Batman
Nightwing
Batgirl
Batwoman
Collaboration & Team Management
Research - Competitor Analysis Takeaways
Focus Point 1: Detailed & Instant Notice
What to display and how to notify on real-time crime and safety news app?
Wait! Batman is a superhero, he needs more!
I need to know
Criminals info: name & how many
Last seen location
Estimate arrival time
What happened if possible
What are other superheroes doing
who & how many
what
where
Focus Point 2: Collaboration & Team Management
Takeaways from competitor analysis
Key info: task name & description, people, priority level
Highlight key info for quick user attention
Use color to differentiate tags in one category
Ideate
Design Theme Study
“Batman: Arkham Knight 2015” Game Case Study
Takeaways
Theme: Dark and Cold
Home page: Immersive with Gotham city map, minimized displayed info
Good features for references: mission tag, compass, distance(range)
Batman Movie Colors Palette Case Study & Batnet's Moodboard
Define
Design Challenge
Design a low-key mobile app that helps Batman receive missions instantly with detailed information and collaborate with other superheroes real time in Gotham City.
Design Scope
Getting criminals info details
Receiving and accepting mission
Real time collaboration with other superheroes
Calling for backup pre-fight and mid-fight
Low-key app access and theme
Success Metrics
Mission Completion Rate - quant
Batman’s Satisfaction Rating - quant/qual
Backup Response Time: pre-fight & mid fight - quant
Assumption
Batman knows how to use mobile app
Other superheroes use the mobile app and will response
Mission information provided by the system (from police or citizens in Gotham City)
Experience Pillars
Collaborative
Effective
Accessible
The product’s feature need to fulfill these user needs:
Effective
To user’s life, his needs and situations
Collaborative
Must allow for real-time collaboration with team management helps
Accessible
Provide accessible controls adapted to different situations
Design
Brainstorming Features
Ideate the features based on design scope
Design Scope
Getting criminals info details
Receiving and accepting mission
Real time collaboration with other superheroes
Calling for backup pre-fight and mid-fight
Low-key app access and theme
Ideated Features
Feature 1 - Map: with & without mission
Feature 2 - Mission: pre-fight & during-fight
Feature 3 - Contact
Wireframe
Iterate ideated feature: replace chat with live voice channel
Trace Immersive Gotham City Map
I live in Gotham City
Solution
Batman's User Flow
Pre-fight
During-fight
Post-fight
Status Preview
I’m available!
I’m busy!
I’m in fight!
I’m be back soon!
Low
Medium
High
Experience Pillar
Accessible
Mission & status priority
with color distinction
Only show key display info
Collaborative
Voice input
Ability to view other superheroes’s status
Effective
Straightforward real-time
status & mission update
Map without missions
Map with missions
Now, Batman knows what happened, who was involved,
how many criminals there were, where the incidents occurred,
and what other superheroes are doing.
View Mission
Accept Mission
Pre-fight
During-fight
Post-fight
Effective
Mission collaboration
status in timeline
Accessible
Big backup button
for mid-fight
Collaborative
Real-time collaboration
with other superheroes
Voice input, team voice
channel
“The timeline is clear”
On the way
During-fight
Pre-fight
During-fight
Post-fight
Effective
Updates for different
individuals and groups
Accessible
Filter based on
Batman’s need
Collaborative
Group chat formation
& Individual chat available
Design System
Reflection
What if I have more time & What I learned
If I have more time
With more time, I would conduct quantitative research and usability tests with superheroes, tailor user interfaces to their needs, and develop a discreet, welcoming access method. I would measure success metrics, iterate on designs, and create an AI system tailored to Batman’s historical performance. Collaboration with engineers would also be essential to address technical constraints.
If I have more time
I learned that user-centered design is essential for understanding user needs even for Batman's, and involves starting with broad ideas and narrowing down to viable solutions. As a designer, my role is to connect products with users to create value. It’s important to start with assumptions, validate them through user feedback, and aim to design for delight, ensuring the final product truly resonates with users.
Mission Complete!