TIFFANY TSENG

...is a designer, engineer, and researcher who creates

tools that support learning to design and make.

DESIGN PORTFOLIO 2020

(MORE ON TIFFTSENG.COM)
 GLITCH 2018-2019

glitch.com

user experience design Glitch is a browser-based code editor and online

front-end engineering community for anyone to build apps on the web.
illustration You can view the source code for any app built on
user research Glitch and remix it to make it your own.

As the lead design engineer on the Community

team, I provide direction on all user-facing features
on Glitch.com, working on everything from user
research, writing product specs, creating wireframes,
and implementing core features on the front-end, in
collaboration with full-stack engineers.

Since joining a year ago, the number of users on

Glitch has grown by 170%, and our community of
developers, artists, and creatives have shared over
3 million projects ranging from Slack bots to data
visualization apps for activism to sketching apps
driven by machine learning.

 learn about creating on glitch

tiffany tseng 2
 RECURSE NEWSLETTER 2020

recurse.com/still-computing/

illustration I worked with the Recurse Center, a programmer’s

layout retreat based in New York City, to design their new
strategy public newsletter Still Computing, centered around
sharing the excitement and joy around computing.

I created an icon set based on the history of personal

computing, a custom banner design incorporating
the icons and touches from retro Mac operating
systems, and the layout of their newsletter.

 medium post on design process

 read the latest newsletter

tiffany tseng 3
 TINKERCAD CIRCUIT 2017-2018
ASSEMBLIES
tinkercad.com

interaction design Tinkercad Circuit Assemblies are electronic modules

mechanical design that add interactivity to 3D prints. They combine
electronics 3D-printing and basic electronic parts to help people
user research create 3D designs that glow, move, and spin.
content design
I conceptualized and designed the entire experience
of using this feature, including the following:

• User research with teachers (to determine that the

introductory modules should require no soldering or
wiring to assemble)
• Mechanical design of the assemblies (to
accomodate a wide range of 3D printer resolutions)
• Interaction design (of how users would access
modules and use them in Tinkercad)
• Learning content design (tutorial creation and
animations showcasing the feature)
• Usability testing with children (to gather feedback
and refine the design)

 medium post on designing this feature

tiffany tseng 4
 TINKERCAD CIRCUITS 2016-2018
CODE BLOCKS
tinkercad.com

interaction design I led the design of the Code Blocks feature on

information architecture Tinkercad, which enable users to program Arduinos
content design using Scratch-blocks-based visual programming.

Crafting the user experience around Code Blocks

involved the following design work:

• Information architecture of the blocks

(determining which blocks to include and how to
organize them)
• User interface design (integrating the visual Code
Blocks with our existing text-based editor to ensure
users can export Arduino-compatible code)
• Content design (creating examples such as a
temperature mood light and alarm system and
illustrating the workflow through short GIFs)

 medium post on designing this feature

tiffany tseng 5
 SPIN 2015-PRESENT

spin.media.mit.edu

interaction design Spin is a photography turntable system for capturing

mechanical design how design projects come together over time. It
pcb design consists of a DIY turntable and mobile apps (iOS
web development and Android) with which users can create playful
ios development GIFs of their projects that can be shared on Twitter,
Instagram, or any other social network.

Since launching in June 2015, Spin systems have

been in 35 different makerspaces around the world,
with several schools and museums building their
own from scratch.

I invented, designed, and built Spin to research ways

in which alternative documentation formats can
motivate and engage new audiences with capturing
their design process.

AWARD

Maker Faire Bay Area 2015 Editor’s Choice Award

 case study
tiffany tseng 6
 PIX SUMMER 2016

ttseng.github.io/pix

interaction design Pix is a one-button documentation platform for

mechanical design capturing and printing photographs. It’s built on
hardware design (raspberry pi) Raspberry Pi and connects to a printer to create
photos you can pin up and share.

I created Pix to help people share what they’re

working on in makerspaces to support community
building and skillsharing. I developed Pix in
partnership with the Watertown Public Library
HATCH Makerspace while I was a summer fellow at
the Harvard Library Innovation. There is currently
a Pix installed in the makerspace along with a
whiteboard for posting and annotating photographs
of projects.

All of the documentation for building your own Pix

is available on Github.

tiffany tseng 7
 BUILD IN PROGRESS 2012-2016

buildinprogress.media.mit.edu

interaction design Build in Progress was a platform for makers to

web development document and share DIY projects as they’re being
mobile development (ios + android) developed. The app enabled users to organize their
design process into branches, showcasing design
iterations in a project.

From May 2013 to September 2016, Build in Progress

supported over 2,000 designers from universities,
schools, and out-of-school environments.

I conceptualized, designed, and built Build in

Progress as part of my PhD at the MIT Media Lab.
Research on Build in Progress revealed that the
platform created new opportunities for makers to
receive feedback on work in progress, represent
their efforts, and create expressive documentation
that illustrates their personal journey learning to
design.

 case study

tiffany tseng 8
 LUMEN 2013

mechanical design Lumen is a transforming lamp that emits different

hardware design levels of light when it expands and contracts. It is
made of three tiers of expanding two-dimensional
polygons and semitransparent shades that alter the
diffusion of light as the lamp expands.

The components of the lamp are generated from

a parameter-driven SolidWorks model that can be
modified to adjust the lamp’s size; for example, you
can create a small desk lamp or a hanging chandelier.
Lumen is constructed out of laser-cut components
and off-the-shelf hardware, making it accessible to
makers interested in designing their own.

 video

tiffany tseng 9
 REPLAY 2011-2012

mechanical design Replay is a self-documenting construction kit for

pcb design children to both share their designs with others
software design and reflect on their own design process. Replay
consists of a set of angular pieces that can sense
their connection and orientation. A virtual model is
rendered in real time as a design is constructed, and
an on-screen playback interface allows users to view
models from multiple perspectives and watch how a
design was assembled.

Each Replay piece consists of a 3D printed shell,

custom PCB, and potentiometer for sensing position.
The recording software was created using Processing.

I started building Replay as a class project for the

MIT Media Lab class How to Make Almost Anything
and developed it as a research project. The process
of designing custom-shaped PCBs was written up as
a chapter in the book Building Open Source Hardware.

 how to make almost anything documentation

tiffany tseng 10
 MECHANIX 2010-2012

slate-learning.com

interaction design Mechanix is an interactive display and tangible

mechanical design toolkit for constructing Rube Goldberg design. With
Mechanix, children’s tangible constructions are
captured using a camera-based system. Their designs
can then be projected directly on the display so that
children can recreate and test each other’s examples.

I conceptualized Mechanix and designed and

built the system in collaboration with Coram
Bryant. Mechanix integrates several interfaces for
encouraging meaningful reflection, including video
playback with audio narration, portfolio generation,
and an active comparison mode to explore
alternative designs.

AWARDS

Maker Faire Bay Area Education Award 2011

Disney Research Learning Challenge Innovation

Award 2010

tiffany tseng  case study 11

 telepresence screen
projector

telepresence
IR filtered hand camera
gesture hand gesture
camera camera

telepresence
screen multi-touch
surface
infrared LED strip projection
acrylic
EndLighten
acrylic
touch surface
projector

touch
detection
cameras

ADAPTABLE 2009-2010

mechanical design AdapTable is a video conferencing system that

hardware design enables globally distributed business teams to share
and manipulate digital documents, supporting
problem solving and decision making.

Two displays, angled 90° from one another, combine

face-to-face video conferencing with a multi-touch
horizontal tabletop for sharing data. Users’ hands are
captured and displayed on the companion system,
enabling remote gesturing to information.

AdapTable was developed as part of the Stanford

graduate mechanical engineering project course
ME310 and was sponsored by SAP.

tiffany tseng 12
 &
AMPERSAND
CONCERT SERIES
presented by WMBR & List

JULIAwithKENT
LUKE DAMROSCH
Thursday, August 15 // MIT Bartos Theatre // 7:30 PM Doors, 8 PM Music
$3 MIT Students // $5 General Admission

wmbr.org/ampersand

Branding and poster designed for Ampersand Program guides printed and distributed to thousands of WMBR listeners

09

Myself holding the 500-page Illustration used for t-shirts

yearbook I designed printed for select MIT graduates

MISCELLANEOUS DESIGN

For fun, I have designed posters, brochures,

icons, and branding for various initiatiaves,
Poster designed for class I taught at MIT including WMBR radio, courswork at MIT, and
Technique, the MIT yearbook.

tiffany tseng 13