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.
A growing world of 3D and AR creatives, artists, and technologists could make TikTok an infinitely more engaging and creative experience.
Users love TikTok's in-house created effects. But we could provide more choice and creativity by opening up the platform.
This was a zero-to-one project with a six month timeline, teams across the globe, two designers, about 8 PMs, and 60 developers.
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.
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.
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.
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.
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.