How might we present an entire suite of AI-powered features? How could we accomplish the task of communicating its immediate value as well as what could be possible in the very near-future?

To answer these questions we created the Tailor brand, and this thread tells the story of how it came to life.

I. Character Design

Ever since we launched early access, Tailor could be seen as a bot that greeted every new sign-up with a set of threads to get them started.

They represented Threads in the same voxel art style as our avatars, and this allowed us to design a range of other bots for different purposes.

I went on to explore what Tailor could look like when powered by AI.

The 80's computer look was swapped out for something closer to the Portal video games. I decided on keeping the form, face, and even the jetpack.

It's cool to be able to fly around.

We discussed how the website could communicate our new product release, so I created this concept demo in Keynote minutes before a meeting.

It also explains why this wasn't fully animated.

Tailor as a character seemed like it was in a good state, but something felt off.

The focus up to this point was almost entirely on the outward physical appearance of a bot. But if we're talking about AI, then we're talking about the internal power that drives the actions.

So in an effort to simplify things, I wondered if we could separate Tailor's mechanical body from the core unit of Tailor's intelligence.

II. AI stitched into Threads

Since the beginning, we've been very intentional about the role of AI within our product. Instead of layering it on top of the experience, we spent a lot of time ensuring that there was enough value for it.

Our treatment for this had similar intentions. Tailor had to be a natural fit within the rest of the brand while conveying a sense of power that wasn't there before.

The Threads logo represents the product, which is the sum experience of writing threads and messages—communicating with your team—an arrangement of blocks.

III. Power and Light

AI features in Threads represent a powerful new way of working. The ability to analyze hundreds of lines of chat and summarize activity and next steps into a useful list was our first a-ha moment, proving that Tailor's role as an assistant or companion was a bit like a guiding light.

The themes of "power" and "light" led to the way we styled Tailor and the way they appear outside the product.

If you've watched any of the Iron Man movies, then you're familiar with this fictional piece of technology. The arc reactor is a vivid source of power.

"The power of the sun, in the palm of your hand!" - Otto Octavius

In comic books and movies, anything powered by an arc reactor glows an intensely brilliant blue and white light.

Since objects that glow this intensely can convey power, we applied a few gradients and glow effects to a solid colored block.

Tailor dutifully follows along across tabs and surfaces in Threads. Like a companion in the darkness, they shed light on what is important in a notification, thread, or message.

We decided that the light Tailor emits should be present in the brand whenever possible, influencing the way we create shadows, reflections, and gradients.

IV. Good morning, Tailor

In the instances where Tailor "works" to read and analyze what is asked, there is a particular feeling of sentience. This magical feeling that software has come alive was something we wanted to convey, and decided to feature in our launch video.

As our companion wakes up, the camera pulls slowly back.

I wanted to open with a close-up because it's a good way to focus on what Tailor is made of. What is this block? Is it made of glass? Where is the light coming from?

If you can imagine AI code working within a product, you can understand why we chose to have the light source within the block.

The spherical object inside is like a spark.

Mimicking the opening of an eye shows Tailor coming to life, a scene that we knew we had to include from the start.

The spark is an intense source of light so it felt right that it was contained inside a thick outer shell. Visually, I wanted something that was looks tough, yet refined.

Based on these criteria, the glass material was created to slow and refract light like a diamond

But unlike a diamond, we didn't want to show too much noise or detail in the reflections, so I changed the roughness in the surface to diffuse light and create a satin-like finish.

Test renders from the early part of the process show the difference roughness makes for light passing through stylized glass.

The result is a crystal block that one might want to hold in their hand

V. It's Alive

An additional scene was created to demonstrate that Tailor is in control of the way they levitate, rotate, and move in mid-air.

By mapping rotation values to my real-time mouse position and auto-capturing keyframes in Blender, I was able to "puppet" Tailor and give animate a bit more personality into the block.

VI. The title screen

With Tailor flying over a silk desert, I created a typographic treatment that could come together slowly—a procedurally generated animation—a transition that represents a brand built by blocks.

We couldn't have planned it better that the letters "AI" were in the name, so I wanted to highlight that nuance as part of the animation.

VII. Translating it for web & beyond

To create a version of Tailor for web, I used Spline.

Glass materials and light sources behave differently in this environment because it's being rendered real-time in-browser, as opposed to a render engine like Eevee in Blender.

Thankfully, our earlier decisions allowed us to build a version of Tailor that exhibit the same characteristics.