Design Challenge: Dashboard for Heroes

Do you ever watch a show and just wonder how the characters do it all? I’m a big fan of the globally acclaimed anime, My Hero Academia, set in a super hero society with quirks (similar to your Marvel and DC Comics “super powers”). Quirks are common to over 80% of the population, and so, super heroics are not limited to just casual vigilantes but full on heroes with agencies that employ up to 60 sidekicks. This means that being a super hero is about as common as being a medium to small business owner.

This got me thinking - wouldn’t the hero want to be able to have an easy-to-manage dashboard overview of all of the goings of their agency? Who’s nabbing the most villains? How many crimes are we solving? Exactly how many times has the sludge villain escaped from Tartarus (and how many times has he be subsequently re-captured)?

Cue my design challenge for the number one hero in my heart: Fatgum. See, Fatgum is the sort of hero who you’d want as your boss - friendly, boisterous, invested in your future. The amount of care he puts into his agency and slew of side-kicks and interns leaves me to think that between fueling up on snacks and saving citizens in the streets, he’s checking up on the success of his agency.

Persona - Who is using this?

Okay, let’s nerd out for a moment here and I’ll tell you about one of my favorite pro-heroes, Fatgum. Taishiro Toyomitsu, professionally known as Fatgum, is a hero with a BMI quirk that allows him store kinetic energy in his body tissue that can be converted to combat muscles. And he can store anything in his fat as a sort of passenger, hence his signature move, Fat Taxi. And yes, he is aptly nicknamed “Totoro.”

He can go from this…

To this fearsome fighter.

Fatgum (and most heroes with their own agencies) are our target user in this design scenario. At age 29, Fatgum is a young entrepreneur who is growing his hero work business, and so he’s got to keep an eye on every facet. We’re talking about an extremely busy business owner who is looking to solve crimes and still have time to mentor Team Self Esteem (or that’s at least how fans refer to his pair of interns, Suneater and Red Riot).

The Design

Based on what creator Kohei Horokoshi has shared on how hero work, well, works, our hero Fatgum will likely want to see his progress in crime-fighting and rescue, what times of problems his team is solving, and how everyone is doing (with a way to reach out). The default dashboard here tackles this with game-ified progress circles and status indicators for the agency.

Inspired by the likes of Salesforce and other dashboard tools, this design brings together data in a way that helps the user to scan and understand from a bird’s eye level with the ability to drill in and see more. In Edit Mode, the user can modify the criteria for each report, and manage the widgets’ size or add/remove individual ones. This allows proper flexibility for if he needs detailed, larger reports or needs to make room for more reports.

Multiple dashboards allow Fatgum to focus on specific campaigns (like say, the mission to take down the Yakuza and Chisaki).

Ideally, Fatgum can take his dashboard to the streets with an identical mobile app. What, heroes need to check their phones too!

In Conclusion

In short, it’s a fun approach to laying out data, especially when your data is inspired by a favorite fandom. How do you think heroes would run their agencies? Do you think dashboards may be the secret support item in their utility belt? Let me know what you think!

My Hero Academia belongs to creator Kohei Horokoshi. These designs were made purely as a form of fan art.