Gotham's Got Them
How to help batman to find other superheroes to help him capture the Joker?
Project
Background
In Spring 2022, I had a chance to interview for Intuit's Summer Product Design Internship. During one of the rounds, I was asked to participate in a design challenge to help Batman collaborate with other superheroes and efficiently capture the Joker. I had a lot of fun in the designing process.
​
As a result, I received the summer internship offer.
ROLE
Product Designer
METHODS & TOOL
Customer Profile, Stakeholder Analysis, Sequence Flow, Sketch & Principle, User Journey, Proto.io, FigJam
DATE
March 4th, 2022
PRACTICES
Elevator Pitch, Product Design
EVENT
Intuit Design Challenge
Challenge
I have 3-5 hours to design a mobile app that allows Batman to find another superhero to help him capture the Joker before the Joker takes over! The design must include (but is not limited to):
-
Receiving and accepting missions
-
Calling for backup
-
Work with other superheroes in real-time
-
Getting information on criminals ​
Process
Build something from nothing in 5 hours
Given the time limits, I made a tight schedule to include problem space identification, customer profile, stakeholder & sequence flow, user journey, Mid-Fi Prototype, and presentation preparation. Due to the time limitation, I did not get the chance to conduct the high-fidelity, interactive design, the usability testing & iterate, but I would definitely include these processes in the future steps.
​​
Problem Space
Goal
Find a way for Batman to keep in touch and collaborate with other superheroes as soon as there’s a crime
Target Customer
Batman is a crime-fighting superhero looking to efficiently capture bad guys
Mission
Design a mobile app that allows Batman to find another superhero to help him capture the Joker.
-
Receiving and accepting missions
-
Calling for backup
-
Work with other superheroes in real-time
-
Getting info on criminals
Insights
There are groups of superheroes in every city.
All superheroes work with a city official that calls on them for help.
Customer Profile
Gotham Profile 101
WHO
Batman, the Protector of the Gotham City
WHAT
Using lifelong trainings to fight crimes
WHY
Lack ”superpower,” instead use equipment to fight crime
HOW
Info on mission & Crime, Calling for backup, Real time collaborations
WHERE
Any situation in presence of public criminals (gliding, swimming, car-racing)
Stakeholders
&Sequence Flow
I continued the design process by identifying related stakeholders, including other heroes, city officials, civilians, and the Joker. Based on the identified stakeholders, I further examined into their interactions with each other as well as listed out the actions & needs from these stakeholders.
Interaction Map Among Stakeholders
Action & Needs Identification for Stakeholders
User Journey
The Prototype
From Sketches to Mid-Fi in 4 hours
Once the user journey is identified, I quickly mocked up the product from sketches all the way into a mid-fidelity prototype in three hours. Due to the time limitation, I only highlighted the major features and flows within the product, but they are sufficient for the presentation and usability studies. If time allowed, I will design an end-to-end flow for sure and personalize the product based on different stakeholders, to gain a holistic understanding of the user experience.
Receive Alert
Batman received his first alert from city officials as a pop-up notification with an image of the villain and corresponding phone vibrations. The color schema is designed to curate the vive of Gotham city and raise a sense of urgency, and the button is designed for Batman to click on ease, especially during a mission.
Main Page
Provide real-time footprint information of both superheroes and the villain. The criminal witness information will include time, witness identity (official/public), a brief description of the incidence, location, as well as the level of crime.
Mission in Detail
The mission page showcases a list of missions with both the time, location, description, and priority level. To further view the mission, the Batman will see detailed profile information of the villain, such as:
-
Name, nickname
-
Gender, Weight, Height, and Ethinicity
-
Profile Shoots
-
Known Partners in Crime
-
Key Identifier
-
Past criminal Files
Meanwhile, Batman will be provided with a mission specs and an option to reject/accept the mission.
Gotham's Got Them
Once the mission is accepted, it will turn into an active mission that supports superhero additions and team communications.
​
Team Members
-
Unique avatar for each superhero for easy identification
-
Enable both search & filter options for both team members
-
Provide intelligent suggestions on nearby superheroes
​
Communication
-
Message Center supports both text & voice communications
-
Allow real-time file sharing from city officials
​
Setting
A conscice setting page that allow the Batman to edit his profile, view his missions, as well as turn on dark and silent mode.
Reflection
Design Challenges was painful but rewarding
This is my first design challenge and creating a product within five hours. Despite the tight schedule, I went through the customer identification, ideation, and prototyping phases, which really helped me rapidly gain a whole picture of how a product is designed in the real-world industry given a limited time span.
Mapoing Out matters
In a limited time span, it is easy to fall into panic and decided to approach the problem immediately from prototyping. However, it is critical to take a step back and look at the larger picture. Brainstorming and mapping out the need & actions of all stakeholders provide me a bigger picture and inspire me to think about creative details.
If I have more time...
I would conduct some competitor analysis on the existing process by which city officials receive and provide alerts to the public/police. I would also like to create a high-fidelity prototype of this challenge, followed by user testing and iterations. ​