Dark Patterns

A logic game designed for the Playdate console. Help Spirit uncover the patterns of Evil.

Role

Concept

Interaction Design

Prototype

Time

Nov - Dec 2023

(4 Weeks)

Team

Solo

Tools

Figma

Adobe Illustrator

Adobe Photoshop

Project Summary

Situation

A class project being conducted as part of the requirements for IAD 4200: Prototyping II at Kennesaw State University, and supervised by Prof. Ellen Guo.

Task

Utilize the Figma’s advanced prototyping features (Auto Layout, Component Properties, Variables, and Conditional Logic) to design a digital product in the form of an interactive prototype.

Action

I conceptualized, designed, and prototyped a functional pixel art logic game in Figma.

Result

Successfully designed and built Dark Patterns as an interactive high-fidelity prototype game, fulfilling the class project requirements.

Concept

Learning Trough Play

Since I was given free range in choosing the domain, theme, and platform for the prototyping project, I decided to challenge myself in designing for an unconventional device and input method—while also having some fun with it. So I chose to create and prototype a logic guessing game for the quirky, handheld game system Playdate.

Wireframes

Sketching and Conditional Logic

The main idea for the game was to present the player with two sets of items: the first set consisting of a pattern with a missing item, and the second, a set of randomized items—of which only one would fit in and complete the initial pattern.

I started with a quick sketch to get get the concept down. The digitized wireframe version helped me both test the dimensions of certain elements and experiment with Figma’s conditional logic feature to ensure the score increase interaction upon a successful round.

Visual Design

Pixel Art Constraints

Because the Playdate uses a 1-bit memory LCD screen for its devices, a minimalist approach to the visual design seemed to be the best fit. With that in mind, I sourced pixel art illustrations by PiiiXL and a typeface by Daniel Linssen. I also followed guidelines from Playdate’s design documentation to set up colors and scale of interface elements.

Interaction

Up Down Left Right A B

For the handheld game console prototype, I created touch targets at the directional pad and AB buttons, since the Playdate device does not have a touch sensitive scree. In the transitions between pages and dialogue boxes, I played around with microinteractions and motion using After Delay and Smart Animate.

Considering the product as a proof of concept, I ensured that users are also able to press the directional pad and A+B keys on their keyboard to interact with the prototype.

Takeaways

Nostalgia and UX

Designing for the Playdate system using advanced prototyping techniques in Figma helped enhance system’s thinking skills. In addition, problem-solving tricky interactions in such a small aspect ratio while using nostalgic pixel art was a lot of fun. In the future, I would love to revisit and augment this project.

Given Playdate’s SDK and Web-based game editor, It would be a cool project to develop and publish Dark Patterns to the Playdate catalog for the community to enjoy.