Spin is a photography turntable system for capturing playful GIFs of design creations.

Spin is designed for makers to generate short GIFs of their design projects that are sharable online.

I created Spin as a PhD student at the MIT Media Lab and developed an open source hardware platform and companion mobile app that was used by over 35 makerspaces around the world creating over 2,000 GIFs.

Just some of the thousands of animations created and shared by makerspaces using Spin.

context

Project documentation often takes the form of written descriptions, which requires a significant amount of time to create and may not appeal to younger audiences with less fluency with written communication.

How can maker documentation be lightweight and playful?

Initial sketch of Spin from February, 2015

Spin started with a sketch and several guiding design principles:

• Make the act of creating documentation fun

• Create an engaging documentation format

• Reduce the effort needed to create documentation

• Connect to existing communities through a standard file format

prototypes

Before investing any time into building the technology for this system, I wanted to test whether the format of GIFs for project documentation was compelling.

I photographed a previous project I had built (a music box) using a manual turntable to explore the visual format of using GIFs for showing process documentation and used Photoshop to generate a GIF. Then, I embedded the animation on a webpage and began experimenting with what a timeline and corresponding documentation might look like.

An initial prototype of a GIF viewer [Web Prototype]

After gathering some initial feedback, I decided to strip down the UI even further to align with the goal of reducing the amount of effort needed to create documentation. In the end, the viewer consists of primarily the animation itself, which can be viewed in continuous animation mode, or in filmstrip mode where the various spins within a single project are shown side-by-side.

The final viewer [Spin Animation]

An alternative filmstrip interface [Spin Animation]

After settling on the final visual format of the animation, I went forward with prototyping the system, which ultimately involved creating an automated turntable that could be controlled by a phone. The phone would take photographs of a physical prototype from multiple angles to generate the GIF. The animations would then be uploaded to a server, where collections of GIFs could be viewed and shared via a web app. The MVP took about 4 weeks to create.

The Solidworks model for the stepper-motor driven turntable, made with laser-cut acrylic and a lazy-susan turntable bearing.

To reduce the complexity of the project as well as the cost of the hardware, I opted for a tethered connection between the hardware and software (mobile app) rather than relying on wireless connectivity via Bluetooth or Wi-Fi.

At the time, all phones still had audio jacks, and I thought for sure they wouldn't be removed from phones anytime soon 😅. As a result, I incorporated an audio-based communication protocol employing Frequency Key Shifting (FSK), which in a nutshell means that different audio tones are used to send signals between the turntable and app. These signals are sent and interpreted by an Arduino Uno, and I designed a custom Arduino shield with an audio jack and stepper motor controller in order to turn the turntable:

Schematic of the Spin Arduino shield designed in EAGLE

Custom Spin board

If you are interested in the full process, I have it documented on Build in Progress, or you can check out the assembly instructions.

app user interface

The first step to use Spin is to install the mobile app and pair your device with the turntable by connecting your phone to the turntable using an audio cable.

The pairing process on the Spin iOS app.

After pairing, you can create a new "set" and add individual "spin" animations to the set. The turntable automatically spins the object in 24-degree increments over the course of one minute. The photographs are then stiched together into a GIF on the device.

The overall Spin app user flow

Starting a new spin recording triggers the turntable to spin and the app to start taking photos

Once the entire sequence is complete (which takes about 30 seconds), a GIF is generated from the individual frames, and you can download a video or GIF to share:

research

I enaged in a design-based research approach to study the way Spin was used in different makerspaces, while using community feedback to continually refine the design.

One of the main goals of the work was to answer the question

What are affordances and challenges with using animations for design documentation?

Recruitment

To answer this question, I built 5 turntables that any teacher could rent to try out in their classroom or makerspace.

Participants were recruited through an open invitation on Twitter sharing sample GIFs that could be created using the turntable. Interested teachers filled out an online survey with basic information about how they intended to use Spin, and then I conducted phone screens with each participant before sending the turntable.

Since people borrowing the turntable often shared examples of their animations on Twitter, they helped spread the word about the project and further recruit new participants.

Study Design

Data collection happened in two distinct phases: a preliminary short-term study (4 weeks) to identify bugs and core usability issues, and a second where turntables were used for 6-8 weeks to better understand its impact with extended use.

user testing feedback and updates

User testing Spin in different makerspaces led to many refinements to the design; a few are listed below:

Moving GIF compilation from the web to the mobile app

Initially, the way the GIFs were compiled was that individual stills were uploaded to AWS as the animation was being recorded. Then, once the full 360-degree rotation was complete, the Rails app ran an FFMPEG script to generate the final GIF.

However, from initial testing, it was clear that many makerspaces did not have the most reliable Internet, which led to dropped frames in their animation; additional, processing on the server was resource intensive and would sometimes lead to timeout issues on Heroku, where the app was deployed.

This feedback led to moving the GIF compilation process from the web app to the mobile app. This ended up ensuring that the GIFs could be consistently created without a network dependency, and also, thanks to an open-source library on GIF generation for iOS apps, I was also able to greatly simplfied the code from a ~40 line Ruby script to a 5-line function in Objective-C.

Improving alignment with Ghosting feature

When capturing a Spin animation, users could place their phone on a 3D-printed dock that essentially acted as a tripod. To help users align the dock with the center of the turntable, I had designed a printed "mat" with a numbered ruler that could be used to consistently place the dock in the same spot depending on the project:

Mat to use for aligning the phone with the turntable

However, I quickly found that no one used this mat because it took up too much space; it was also was hard to remember exactly where you placed the dock between each individual animation.

To resolve this problem, I created a "Ghost" onion-skinning feature to aid with alignment

Ghosting feature to help with alignment between spins

Adding expressivity through sound

While children were engaged with creating animations of their projects, teachers also hoped to create a lightweight option for student to share a reflection on their creation.

At the time, Vine was becoming popular, and we decided to test out an audio recording feature children could use to record a brief description of what they were working on:

Audio recording UI

An example of an audio recording created by a student

insights

My favorite part of this project was seeing all the creative and unexpected ways people ended up using it. Here are just a few.

Teachers found animations to be particularly valuable because they succincly capture prototypes in a quick, sharable format:

A good animation can highlight a particular piece of a design more clearly than a video and in a less unwieldy form than a pile of pictures.
- Middle School Teacher

Animations also provided an alternative entry point for students whose preference may not be to write about their process, which was especially critical for young users of Spin such as kindergarteners.

One challenge around using Spin was that the turntable itself does not visually signal the animated output it can be used to create.

To provide more concrete visual cues, some teachers utilized external displays showing a live feed of animations. This helped draw attention to the turntable and encourage its use.

Display showing a feed of animations from the Spin website next to the Spin turntable, used in a workshop setting.

The full results of how Spin was used in various learning environments, including museums, schools, community makerspaces, and libraries, is in a paper I wrote for DIS in 2016.

takeaways

From studying the uses of Spin, I created a set of design principles for supporting design documentation:

Empower users to hack and extend the tool

Physical hardware and visual animations provided ways for people to personalize their Spins through custom stands, designing backdrops, and even using the app without the turntable.

Give a physical presence to documenting

A space should communicate that it values and support documentation practice. Decorating the space around documentation tools or exhibiting digital documentation on external displays were successful strategies for giving physical presence to documentation.

Embrace incompleteness

Spin is designed to help people capture important moments in a design process rather than every step that goes into creating a project. We encourage rethinking documentation as modular, incomplete components that paint a more complete picture when combined.