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.
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?
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
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.
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.
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.
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:
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.
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.
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:
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?
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.
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.
- 15 semi-structured interviews were conducted with makerspace coordinators, teachers, and students.
- 3 site visits were made to observe how Spin was used in making activities.
- 450 animations were analyzed to uncover patterns in documentation practices.
user testing feedback and updates
User testing Spin in different makerspaces led to many refinements to the design; a few are listed below:
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.
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:
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
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:
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.
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.
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.