TikTok Effect House

Effect House is TikTok’s desktop-based AR effect creation platform. The tool itself contains elements of 3D/spatial design, augmented reality, and node-based programming. I worked with one other designer and a large international team to bring this project from zero to one in the course of 6 months. We were responsible for designing and building the tool from the ground up.

Why build it?

For effect creators

A growing world of 3D and AR creatives, artists, and technologists could make TikTok an infinitely more engaging and creative experience.

For end users

Users love TikTok's in-house created effects. But we could provide more choice and creativity by opening up the platform.

Initial challenges

This was a zero-to-one project with a six month timeline, teams across the globe, two designers, about 8 PMs, and 60 developers.

Laying down the foundation

I prioritized design system and documentation work upfront to reduce the amount time spent on communication and feature work later on.

This was a different enough product from the core TikTok app (as a desktop app and a utility) that we departed from our existing systems and created something entirely new.

Inter met our needs to be sharp and readable at small sizes (11px) while its "units per EM" coordinate system allowed for consistent and legible spacing. 
A 4pt grid system is divisible of most modern screen sizes and allowed flexibility in tighter, denser areas that would be required of the UI.
A dark theme was chosen to match most other modern 3D creation applications. Several iterations of the color palette were made with user feedback and in accordance with a11y considerations.
Various scales of controls had to be made to account for differing densities of content throughout the app.
I created and drew a brand new icon system that would match our  more utilitarian aesthetic and be legible in our dark-themed UI.


Prototyping was a huge part of our process to able to have tight feedback loops internally. We presented to our product counterparts and internal effect creators weekly to get feedback.

We used all kinds of 3D and prototyping tools to communicate what we needed: Framer, Principle, Protopie, After Effects, and Blender.

Nuanced and detailed interactions, such as this dragging function, were often prototyped in Origami
When designing this panel's minimizing and hover menu interactions, a quick and dirty Figma prototype was effective enough to communicate the solution.
Prototyping this guide interaction helped determine the appropriate thresholds in which the guides would appear

Hierarchy panel

In early iterations, I designed basic interactions such as hovering, selecting, and dragging. But as we added more functionality, it was necessary for me to refine the grid to make scanning content easier. The iconography also became important to easily differentiate the various elements in such a dense area of the UI.

These three iterations show the panel as it grew in functionality the grid was refined, and iconography was added

Preview panel

The preview panel allows the user to change how they might choose to view their effect. The most important function is to be able to change the camera feed simulation. The user can choose to use some media that we provide off-the-shelf, they can upload their own media, or they can use the webcam feed from their computer.

It's a lot of media to sort through to find the right one. Adding thumbnails was a given, but they were quite small - useful if one is familiar with the library, but not so much for people still learning. I designed and prototyped a version that shows a looping video on hover so that users can pause, take a look, and confirm it's what they want, before making a selection.

An early prototype for testing placement and interaction for a preview video
After final footage was captured, I created the production assets while testing in prototypes along the way to get the details right

Demoing the work

As the product entered a private beta with some external partners, my teammates and I were asked to share what we'd been working on. I presented a halloween themed tutorial to the global design team and showed them how to create an effect in under 10 minutes.


This was my first time designing an experience of this kind: a desktop based software development application (and a creative tool at that). In much of my mobile and commerce work, complexity came from "flows". In those experiences, the content of each screen might be more focused, whether that's to browse and discover, or as a single step of a multi-step process. The goals are often to help move the user through a funnel.

In this case, I began doing what I just thought needed to be done fleshing out a design system, but I realized that success is so dependent on iffeciency and understanding of interactions on various parts of just one screen. Small interactions and details that are taken for granted as a user of creative tools, and even oftentimes as a designer, become much more pronounced issues that warrant attention.