Motion / IxD: Carnegie Mellon Uni.

Final Deliverables


Team Size + Role

Time Frame

Programs Used


App prototype + explainer video pair that teach the concept of mapping (interaction design) to undergraduate design students while keeping a consistent visual style

1 / Primary interaction + graphic designer

1.5 months (Fall 2018)

Adobe After Effects, Illustrator, XD, Protopie

Carnegie Mellon University

Rough Storyboard 1.jpg

Good Design is Invisible

All visual design begins with a conceptual message and intent. To teach design best practices is to explicitly point out what makes good design invisible - that in itself is an awkwardly granular thing to animate in a two minute video. Visual design though should be led by the message, and that was the overall philosophy behind the approach: keep things simple, clear, fun, and emphasize the interactions/feedback, not just the objects themselves.

Asset Brainstorm 1.jpg
Official Storyboard 1.jpg


Mapping scene-by-scene and exploring scenes' relationships to one another is a very methodical approach to conveying visuals. Dissecting the narrative into key moments helps make the video more than just a voiceover with things happening concurrently on screen. As a part of the process, storyboarding aids in aggregating discrete actions into a coherent presentation. 

Official Storyboard 2.jpg
Screen Shot 2019-02-28 at 11.56.38

App Concepts

The app that couples with the video was created not so much as a comprehensive concept for an app, but an entry point into creating a bigger app designed to quickly convey interaction design principles. Using a glitchy "HAL from 2001: A Space Odyssey" aesthetic helps ground the user flow's appearance - the flow is about encouraging the user to re-see interaction design in a different way, and the aesthetic supports this by being blunt about how obvious these interactions are because of strong interaction design.