TUI 11:3 Final.023.jpeg

The Magazine Design Tool enhances collaboration and work efficiency between users through an interactive platform with tangible tools.




This project explores enhancing collaboration with a Tangible User Interface by merging the physical and digital design tools into one interactive platform. By researching existing solutions, understanding user gesture, and sketching flow charts and storyboards to develop our context, we designed and prototyped a Magazine Design Tool for designers and art directors working on a layout.

We used Keynote to develop the animations and Final Cut to create the demo video.



To build a Tangible User Interface Tool that can be used for collaboration between designers and artists.


UX / UI, Animation


3 Weeks, Fall 2018




To start off the project, each member researched existing design tools to better understand how they are useful to designers. By looking at the current scope of tools that already exist, we could get a better idea of what elements induce collaboration and what tools are used more often.



Designing Tangible Tools

User Flowchart

We started our brainstorming process by creating user flowcharts to understand how a designer works on a magazine layout. This was a key process in our work as it defined the way we shaped the tool to be used. We decided on this final flowchart because it gives the user access to multiple tools that allow them to collaborate with their team.

Layout Design.png

Concept Sketch

After various discussions, we sketched out how our tangible tool will look like. We decided to have two circular dials that would perform multiple functions and two pencil tools that would perform note-taking functions.

Sketch by Gina Kim

Sketch by Gina Kim

Why A Multi-Function Dial and A Note-Taking Pencil Tool?

We needed a tool that would be versatile enough to have a lot of functionality. By having these two types of tools, it allows users to have more flexibility in their workspace but not having too much that it becomes distracting. It also allows multiple people to on the same workspace at a time which enhances collaboration.



Demo Video

Sketching The Storyboard

We then proceeded to sketching out storyboards on how the tool might be used in context. This helped us conceptualize the framework of our interface and what elements we wanted to use for our Smoke and Mirrors.


Smoke & Mirrors Video

To show how we envision our tool to be used in context, we created a video that where an Art Director and a Designer works together to review a layout.

Key Features

This magazine design tool is created with the intent to make a collaborative tool for magazine design. There are multiple tools that allow multiple people to work on the same interface at a time.




This project has allowed me to learn about constraints and channels. Making objects move with purpose by creating pathways opens the avenue for designing more carefully and with intent. Where and how an object might move are the two core questions that my team and I asked ourselves throughout the process of creating the tool. Thinking about how an object moves through space transcends the digital aspect and brings the tangibility into our design.