Work

Tyler — Product Designer based in Oakland, CA

Chain

chain.com

Chain approached thoughtbot with the goal of creating a live game show experience at a trade show. With only 2 weeks until the show, we created an 8' tall game show experience that left players and future customers smiling, and paid.

The design was a tag-team effort with the brilliant Morgane Santos ✨. I focused on motion design while Morgane flushed out visuals, then we implemented everything together. We knew we had a short amount of time to get this right, so we took our time with prototypes and mood boards to establish a direction, then launched full speed into flushing out the rest of the game.

I used Adobe After Effects, Framer, and CodePen to prototype movements an animations, using whatever tool would help me iterate the fastest. These prototypes were then used as models, providing timing, code snippets, and other insights for development.

RoleUX Design, Front-End Development, Motion Design Forchain.com

The “winning” moodboard. We chose a pixelated direction in part because we knew our game would be projected at 14' wide with a less than amazing projector.

We used sketches and wireframes to play the game before we wrote any code. We wanted to make sure the whole team understood the game on day 1.

I made an AE prototype to help think through 3D animations in 2D. After this, I used codepen to make sure I could do this in CSS https://codepen.io/gravdanger510/pen/YrvKwJ

Using AE I was able to quickly mock up animations, then use keyframes on the timeline to speed up the development of these animations in CSS.

After setting up a full-size replica environment in Chain’s office we moved the player squares to the top of the screen to attract more attention from onlookers. Morgane ✨ introduced a gradient background as a cue for different stages of the game.

Experiments like https://codepen.io/gravdanger510/pen/PJBdva kept things fun. If we couldn’t figure something fun out in 10 minutes we reprioritized it to stay on track.

We were very glad we chose a pixelated approached when we saw the size/resolution of this display.

Did you look at this yet?
https://codepen.io/gravdanger510/pen/PJBdva

Chain said we didn’t have to go to the event, but if we had known they were giving this much money away Morgane and I would’ve come in disguise 🕵🏻‍♀️🕵🏾‍♂️