Darkguard
Preface
Full disclosure: Darkguard is not a "serious" project. The project exists within the fictional DC Universe's Gotham City. If you're up for some fun, this is the place for you.
Darkguard was a fun project I worked on for over two days.
I enjoy working on projects based on fictional worlds because it allows me to experiment with different methodologies or thought processes with no consequence. It's a reminder that there is a lot of enjoyment and child-like exploration under the serious-looking face of UX.
Without further ado, I present to you: Darkguard.
Darkguard is an application that will help Bruce Wayne with some of his more peculiar nighttime activities.
This news might come as a shock to you, but Bruce Wayne is Batman.
The billionaire playboy has kept this part of his life hidden from plain sight. Our goal is to create an app that will help him fight crime effectively by leveraging different technologies and databases to ensure he's always in the right place and at the right time.
Due Diligence
Technical Requirements
After meeting with Bruce, he introduced us to Commissioner Gordon from the Gotham Police Department. Gordon has given us access to the GothamAPI.
GothamAPI will give us access to all incoming/outgoing calls to police stations across Gotham. By leveraging this technology, we can analyze calls, their source, location, and the caller's identity.
Bruce wants us to integrate GothamAPI with BatAI, an artificial intelligence system that can collect data via GothamAPI. BatAI can assess the severity of a crime and possible suspects. It will allow us to keep Bruce informed with the latest updates on a case.
I was quick to arrive at an effective solution.
Solution #1: Call Superman
All-Star Superman is based in Metropolis and can reach speeds of 186,000 miles per second. Gotham and Metropolis are only 180 miles apart and exist within the same universe.
Time to press a button
Time for superman to arrive
Last I checked, Batman and Superman were on good terms. If we connect Batman to Superman, we would get a response time that's far less than a second, give or take server response time.
What happens if Superman gets fed up with Batman's constant calls? Or if Batman is in a place that has no signal? What if Batman gets stubborn because his ego won't allow him to ask Superman for help?
It looks like it's back to the drawing board.
The User
You might think this section is unnecessary, considering we already know our user is Batman.
If we dig deeper, we will find that Bruce has three different personas. Each persona surfaces depending on the circumstances, each serving a specific purpose. To help Bruce (or Batman), we need to understand the different masks he wears to find where we fit in the equation.
Public Bruce
Public Bruce is the public face of Bruce Wayne (surprise!). He is an outlandish billionaire playboy that can charm the socks off of you. This persona is the public face of Wayne Enterprises, with the spotlight constantly shining on him, giving him nary a moment to cover any slip-ups or mishaps.
Batcave Bruce
Private Bruce is more reserved than Public Bruce. He does not want the spotlight on him and would prefer to be left alone with his thoughts as he ponders over how he can make the world a better place. If you watch his interactions with Alfred, you begin to see a much more intimate and approachable person with a lot of weight on his shoulders.
Batman
Batman encompasses both the worst and best aspects of the Bruces. He follows a stringent moral code when it comes to justice. Batman wants to instil fear in the heart of the corrupt individuals living in Gotham. The differences between the Bruces and Batman aren't as vast as you might think they are. Batman is charitable (except his charity tends to leave people with a fat lip), caring, and just like the other Bruces: Driven by vengeance.
Public facing Bruce might be where we are best able to help Batman. Out of the three personas, he is the one that needs to be kept in the loop while keeping up an act and his bizarre antics.
The Design Process
GothamAPI
As you recall, GothamAPI allows us to listen in on outgoing/incoming calls and source them. BatAI can process information incoming from GothamAPI to assess and categorize the severity of each call based on multiple factors.
Below is a diagram showcasing how these two systems interact with one another.
Crime Report Flow
When a call comes into a police station, we need BatAI to rank crimes by severity. We need to filter out petty theft or crimes that Gotham PD can handle themselves. Ultimately, we need to alert Batman to situations where his intervention is necessary.
After all, we can't always send Batman to save a cat stuck on a tree.
Creating an action plan
When BatAI identifies an incident, it adds it to a database. BatAI carefully analyses incidents and sorts them by severity.
Notifying Bruce
Below is a diagram that describes what happens when BatAI decides to inform Bruce about an incident.
Information Architecture
A look at how the application is structured and how different information interacts with one another.
Wireframes
Now that we know how our pieces will fit together for the first iteration, it's time to begin to create wireframes to see how they translate from flows and diagrams into usable interfaces.
These wireframes have been hand-drawn and refined over several iterations before reaching this level of clarity.
Design Library
I'll be skimming through this section since it's not the focus of this project. Long story short, UI wasn't the focus of this project, but rather the underlying systems and flows and how they interact.
I duplicated and repurposed a design system I had previously created to save time. I then adjusted the colours, typography choices, and icons used to conform with the art direction I had in mind.
The result? A fully fleshed-out library that has been customized according to the "Batman brand" while remaining accessible and in line with WCAG2.0's AAA rating for colour contrast ratios.
Prototype
Dashboard
Batman can view the latest updates and incidents as they come in from GothamAPI. BatAI parses the information to assign priority/severity levels to incidents.
Low-priority incidents are not listed in the dashboard as they're typically cases that do not require Batman's attention.
BatAI generates updates on a case-by-case basis, prioritizing cases Batman is actively tracking. The registration process gives users two different flows. Users can either register through OTP or via social media.
Incident List
BatAI sorts the incidents in a manner that allows Batman to fight crime efficiently by factoring in priority, severity, and proximity.
Incident Map
Batman can view incidents in map mode. The app marks incidents on the map and colour codes them based on severity.
Situation Report
The situation report (SitRep) gives Batman an overview of an incident. It offers information on suspect identity (if available), suggested course of action, and case-specific updates. Batman can also manually change the status of a case or share a report with his contacts.
None of the changes or actions will affect the record as present within Gotham PD's databases.
Suspect Record
Batman can access the Suspect Record screen when a suspect's involvement with an incident is confirmed.
The record is pulled from the Gotham police department's archives to give Batman detailed information about the suspects, their motives, and their last known location. This screen will allow Batman to understand who he's up against and what precautions he might need to take.
Vehicles
With just a click of a button, Batman can deploy one of his vehicles to his location or get the engine started if he needs to make a fast getaway. He'll also be able to check his vehicle's system status to ensure it won't fail him. Nothing is as anti-climatic as giving up a chase because you've got a flat tire.
Bonus points for making Batman drive an electric vehicle. He might be wreaking havoc on his adversaries, but not at the cost of the environment.
Contacts
The app can also connect Batman with his team and help them coordinate their efforts.
The best part? The messaging will take place in an end-to-end, non-encryptable, and non-traceable messaging server. It's like Whatsapp, minus the big social tech company listening in on your conversations.
Designing for Bruce and Batman
Near the end of the project, I was toying with the idea of introducing a private/public mode that would allow Bruce to mask the app's true purpose.
The public mode would allow Bruce to mask/skin the phone with what looks more like a Wayne Enterprise company application.
Multiple Touch Points
Primary Function
I didn't think the mobile application would be enough. I wanted to add multiple touchpoints to help Bruce on different fronts.
The first front is tactical preparation. We've covered this front with the mobile application by arming Bruce with insights about situations so that he is not going in blind.
The second front is operations. I wanted to introduce non-intrusive and primarily passive devices that we can integrate with our application. These could be wearables like a smartwatch or other devices that do not emit too much light since Batman operates in the shadows.
Future Thinking: New Tech
Smart Lens
If you thought I was crazy earlier because I took this entire project seriously - You'd best skip this section.
I was toying around with the idea of leveraging Smart Lens. WayneTech is a few years ahead of us in the technology department, so it's not too farfetched to think they'd have fully developed it.
Fun fact: Mojo Vision is a real-world company that is working on Smart Lens.
What if this technology could give Batman an edge if we embrace the more radical ideas it can enable? We might be able to give Batman an actual HUD view to monitor his health. We can link the Smart Lens to our system to help Batman identify suspects or victims. Batman could also have motion detection, low-light vision, and other visual augmentation tools that enhance Batman's natural abilities.
Distress Signals
This idea is a bit more grounded in reality than the Smart Lens. We could use wearables to detect Batman's vitals. It's not hard to believe that there is a wearable that can detect heartbeats, blood pressure, and other factors.
This device can then be hooked up to the app and send distress signals to trusted contacts the second it detects Batman is in grave danger.
Final Thoughts
User experience has real-world implications and real business implications. There's a lot at stake in UX: The business' and the users' time, money, and wellbeing. The high stakes might make it too easy to put on a serious face when goals, deadlines, KPIs, and OKRs keep taunting us.
The seriousness of designing experiences causes many UX designers to end up with an Atlas Complex as they attempt to (unnecessarily) carry the weight of the world on their shoulders.
As UX specialists, we are privileged. We can explore, have fun, create, break, take apart, glue, and prod things until we've created something special.
We have to make time and space for our imagination to run wild. Designing for unrealistic situations allows us to create a safe space for our imagination simply because the concept of failure need not exist in that space.
Just like our muscles, if we neglect to train our imagination, we'll find it gasping for air when we need it to innovate on a real-world product.