INNER MONSTER |
Project OverviewCards Against Humanity "A party game for horrible people" is the #1 best selling card game on Amazon. To many fans dismay, there is no official mobile app version of the game. A mobile version could easily expand on its success with a useful and delightful experience that wouldn't be possible with an analog version.
|
Establishing a WorkflowWhen starting the project, we had a launch meeting to discuss some basic rules around how we would work together, what we wanted out of the project, determine an MVP, and begin delegating responsibility.
We decided to use Trello and to work in a variation of an agile process. Each of us could see what was on the backlog, what we were doing and what was done. That way, we could leave comments, post comps, etc. We also planned to meet regularly in person or over a video chat. |
Understanding the UsersI observed and immersed myself in games with different people in different group sizes and environments, keeping an eye out for the highs and lows in the experience. From there I created the game flow diagram above.
HOW TO PLAY
Then I synthesized what I found into the take-aways below.
|
WireframingA few major UX challenges presented themselves while putting together a low fidelity prototype:
|
Hi-Fidelity Designs
|
Design LanguageMy goal was to make a component-based modular design system using the principles of atomic design. This was intended to promote consistency in look and feel and interaction patterns. It also would produce efficiency in development.
Type and Color The boldness of the display type is coupled with the boldness of the pink. Roboto provides legible body copy and the black and white maintain a tie back to the analog game. |
SIGNIFYING INTERACTION
I chose to use multiple signifiers to clarify hierarchy and highlight interactive elements: color, depth, and motion. Many interactive elements such as icons and text buttons are pink and seams between background colors help to show depth. Also, shadows on elements create depth as well. |
INTEGRATING MOTION
I used motion to create clear transitions and prompt interaction during game play as seen on the first video. In the second, I used motion to produce delight with character animation. Initially I planned to have the first card say "Swipe left to view the cards in your hand," but with motion I can hint that more naturally. The left-right nudge on load also would occur if a player hasn't touched the screen for a while. |
|
|
BrandingBecause Cards Against Humanity is distributed under a Creative Commons BY-NC-SA 2.0 license. “Cards Against Humanity” and the CAH logos are trademarks of Cards Against Humanity LLC. So, we had to "call [our] crappy thing something else" (as Cards Against Humanity put it).
The new name, Inner Monster, plays on the idea of the game being "against humanity". Everyone who plays is essentially showing their own inner monster to their friends and acquaintances in the form of a darkly comedic response to a prompt. |