Mayhem: A Mobile App for Villains – Case Study

Project Summary

A mobile application for villains to let them plan, commit, manage, and succeed at various evil deeds around the world.

Project Stats

Role: UX Designer – research, low/medium fidelity wireframes, UI design, interaction design,  user testing

Team: 01 UX Designer

UX Challenges

  • Create an icon that made sense with the tone of the app and would appeal to its audience
  • Create unique iconography for various plan steps so they would be easily identifiable
  • Create a color palette and symbol library for the app to ensure consistency and appeal to its audience

Assumptions

Villains need to be able to plan, commit, and succeed at their particular brand of mayhem. To do that, they need simple, clear steps to help them organize their busy schedules.

Research

User Personas

Two user personas were created to this process, using extrapolated goals from universal super villain tropes.

persona01

Persona 01 is a global-type villain. They have no interest in material goals, instead focusing on dominating humanity as a whole. Domination allows them to convert humans into their personal cult in order to achieve their real endgame: rending our universe asunder to bring about what they perceive as the ultimate utopia.

persona02

Persona 02 exhibits a narrower scope. They focus on material wealth to sustain their identity, define their success, and improve their methodology. They are primarily based in one geographic area, and only work with others when absolutely necessary.

Design

Icon Exploration

The first part of the icon design was choosing how abstract to make it. I decided to use a design that focused on the M from the app name. Breaking the stroke border of the circle alluded to the chaos that the target audience is hoping to create with the app. The break in the stroke aligning with the central M provided more motion for the design, and has the added benefit of recalling the Anarchy symbol.

Color Palette

app colors

The colors used in the icon and application are mainly subdued blacks and grays; with secondary actions highlighted in a dark blue; and the primary actions denoted with the poison green. These colors were chosen to evoke both the serious plotting and demeanor of those using the app, as well as the vicious and harmful energy that the target demographic employs. The consistent use of only two colors for actionable UI helps with quick visual scanning of all screen UI.

Application Iconography

Flow and Overview

Application wire flow

After creating a new plan, villains are brought to the first of five plan creation screens. There is a pagination bar across the top of all screens that shows what step of the process the villains are currently on, as well as icons of the selections they’ve chosen in the previous steps.

The first screen allows them to choose the type of crime they want to commit: Robbery, kidnapping, murder, ripping open an alternative dimension, or creating a new type. The second screen allows them to specify the type of help they need with what they’re planning: Go it alone, using disposable henchmen, or teaming up with other powered villains. The third step is choosing where in the world this plan will take place using dropdown lists. Once the country is selected the available major cities from that country will automatically filter. The fourth screen allows them to select the date(s) and time(s) of their crime using a combination of dropdown lists and a familiar calendar interface.

plan-existing

Once all of the background information has been entered, they are brought to the fifth and final planning screen, where they can see an overview of every component of their proposed plan, complete with selected iconography and associated textual labels. On this screen they can edit any of the pieces of their plan. If they approve, they can hatch their plan, where their plan gets added to their aggregate list of current plans, which can be sorted by Date, Type, Crew, and Place.

The plan list focuses on an easy to scan card layout. The top of the cards have the date and time of the plan, with the three other main plan parts (Type, Crew, and Place) with their related icons. Once they Commit to their plan, it is moved into the Crimes section, where they can monitor progress and see detailed information.

 

Prototype

isometric
Click to view prototype

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s