Motion Reel

exquisite corpse club

An online collaborative drawing app.

  • Branding,
  • UX,
  • Web Design,
  • Vue + Nuxt

Timeline

8 weeks

Draw me like one of your french… corpses

An exquisite corpse is a collaborative drawing made up of three sections. Each section is drawn by a different artist who can’t see the other sections. The results are sometimes strange but always entertaining. I decided to make a web app to make drawing exquisite corpses with friends (and strangers 🤠) easier and more fun!

The exquisite corpse club™ is the result of my desire to always be learning and pushing myself as a digital designer. What started as my first exploration of Vue.js, Nuxt.js, and Google Firebase became a full blown interactive branded experience that I am proud of—stop by and draw a corpse!

home
gallery
draw
section

You gotta think before you can fun

What exactly is involved in social corpse drawing? A quick task analysis revealed there were a few more moving parts than I had originally anticipated:

Drawing a corpse

  • Pick which section you want to draw
  • Get your canvas ready
  • Make your mark
  • Customize your mark (color, size, fill?)
  • Erase your mark
  • Undo your mistakes, redo your undos
  • Start over or save your work!

Viewing corpses made by others

  • Browse a gallery or library of drawings
  • Filter by completed corpses or by sections
  • Sort your selection by date or by most popular
  • View a single corpse or section
  • View other corpses this section is in
  • View more artwork done by this artist
  • “Like” it, save it, or share it!

With a general idea of the steps involved I excitedly sketched out a rough wireframe of how they might flow together. The sketches were then adapted into a functioning Figma prototype to *ahem* make them a bit more legible.

Early wireframe sketches.
Early wireframe sketches.
Early prototype.

The development process

The task analysis, wireframes, and prototype were not only extremely helpful in making quick and cheap design decisions, they also saved me endless amounts of time in the development process. By having a solid understanding of the site’s architecture and the required data I would need to store I knew exactly what components to build and how I should organize and shape my data.

Speaking of staying organized: I set up a kanban of impact vs. effort tasks I needed to take care of in development. You can check it out below—it’s live, the work continues! You can also check out the code on the GitHub repo.

Trello board used for development with each task assigned a level of difficulty and impact.

The brand & UI

The traditional exquisite corpse game played with pencil and paper appeals to a wide audience. You don’t even have to be that great at drawing. Really, the only prerequisite is that you’re bored! I felt it necessary that the brand maintained an accessible look and feel that would engage folks of any age and/or skill set.

I was inspired by the drawing programs of my youth. I remembered how their simple layouts and somewhat limited tools allowed me to easily express myself. I decided to follow a rule the creator of Kid Pix described as his Prime Directive: no manual should be needed and program features should “explain themselves” through use. Simple enough!

MacPaint.
MacPaint.
Kid Pix.
Kid Pix.

I adapted the use of panels to organize related tools and menus. The panels, dressed in simple colors and a peppering of pixelated patterns, gave the website an app-like feel. I designed a suite of icons to use inplace of text wherever possible and a custom cursor to complete the experience.

Type, color, patterns, and panels.
Type, color, patterns, and panels.
The icon suite.
The icon suite.

Some promo to create FOMO

To promote all this hard work, I made a short Instagram animation. It’s set to Trio’s quirky track Da Da Da—be sure to unmute the video below for the full experience.

& don’t forget to stop by and draw a corpse!