Teammates

Creating a playful brand for a new category of AI employees

Overview

Creating a playful brand for a new category of AI employees

Teammates is an end-to-end platform for building and managing a virtual workforce.

Its AI employees live inside the tools teams already use, plan their own work, and behave less like assistants waiting for prompts and more like colleagues with jobs to do.

The challenge was to make that new model immediately understandable—and give it enough personality to feel different from another AI agent platform.

Role

Digital Designer

Scope

Creative Direction, Brand Design, Product Design, UI/UX Design, Website Design, Webflow Development

Team

Timeline

Jul 2024
-
Aug 2026
Present
Teammates home page
Teammates home page

‍

Context

Making AI feel like a team

The company started as Perpetual, with an illustrated office full of unusual coworkers: a hamster at a keyboard, a robot in a sweater, a Viking with a spreadsheet.

The personality was already there.

What was missing was a cohesive brand and product system capable of turning that idea into a credible software experience.

The goal was not to make another agent builder.

Teammates needed to feel like hiring quirky but capable colleagues you could @-mention, assign work to, and trust to get moving.

Playful enough to be memorable. Serious enough to sit inside real company workflows.

Teammates’ previous identity as Perpetual: an illustrated office full of odd colleagues, before the mark and the product.
Teammates’ home: “AI that works,” a Slack thread with Brave Bart, and the tools the workforce already lives in.

‍

Research

Finding the gap between serious and playful

We started by looking at how AI and people-operations products were already presenting themselves.

Most serious players leaned toward restrained palettes, simple interfaces, and abstract technology language. More expressive brands brought in warmth and illustration, but still presented the product primarily as software.

That revealed the opportunity.

Teammates could retain the clarity expected from B2B software—light interfaces, recognizable tools, real product UI—while putting an actual cast of characters where generic nodes, gradients, or stock photography would normally appear.

The product was software.

The brand could feel like a workplace.

Full inspo board: Fruitful, Intercom, OpenAI, Anthropic, Lattice, Wiz—sites on top, character stills underneath.

‍

Brand

A team you can recognize at a glance

The name already contained the metaphor.

The identity needed a mark that suggested both a group and a friendly face, while remaining simple enough to work inside product UI, app icons, and tiny interface moments.

Early sketches explored people, clusters, initials, and facial forms before resolving into a geometric symbol combining a group icon with a smile.

The rest of the system stayed intentionally restrained: magenta, ink, white, one primary type family, simple components, and a flexible shadow system.

The characters provided the chaos.

Each teammate could have a distinct color and personality, while the core brand remained recognizable around them.

Notebook: rows of Teammates mark studies on the left; the team-and-smile mark constructed on a grid on the right.
The lockup is the magenta mark plus a heavy, slightly condensed sans for Teammates in near-black. No tagline in the logo. The word is the product.
Horizontal lockup: magenta mark, black Teammates wordmark.
Brand styles: lockups, magenta and gray ramps, type scale, button set, shadow steps.
Extended palette: a grid of character colors, not a three-swatch startup kit.

‍

Product UX

Designing a workplace, not a chatbot

The central product question was simple:

If these are teammates, where do they work?

Early concepts treated the product more like a messenger than a traditional AI interface.

A roster lived on the left. Conversation occupied the center. Goals, assignments, tools, skills, and work history gave each teammate something closer to an employee record than a chatbot profile.

That created the basic product loop:

Hire → Meet → Talk → Assign → Review

The metaphor influenced the architecture itself.

Concept wires: Team inbox, Chats, and a Home with goals, assignments, and prompts.
Wireframe grid: login, welcome, chat, assignment, and create-teammate.

‍

Product UI

Giving every teammate a face, role, and job to do

Once the structure worked, the brand moved into the interface.

The experience starts before onboarding.

Login introduces product concepts through real conversations instead of generic benefit statements.

The welcome screen feels like a first day at work, introducing the first teammate as a colleague rather than a bot.

Chat becomes the headquarters for assigning work and managing the roster.

And creating a teammate feels closer to hiring than configuration: role, job description, personality, skills, tools, and appearance all shape who joins the team.

Login: SSO on the left, a Human-in-the-Loop story on the right.
Welcome: Ben’s first screen, Amy Saeki introduced as a teammate, not a bot.
Chat HQ: roster plus Amy onboarding Ben with assign / create actions.
Create-teammate wizard: Darling Rouge’s role, description, personality, and live preview.

‍

Making hiring worth celebrating

When a new teammate joins, the interface deliberately breaks from conventional SaaS restraint.

Instead of a small success toast, the character gets a full-screen introduction inspired by game mechanics.

It reinforces one of the central ideas behind the product:

You are not enabling a feature.

You are adding someone to the team.

Emote: Darling Rouge appears like a character drop, not a success toast.

‍

Managing AI like an employee

The dashboard continues that metaphor.

Assignments, tools, skills, rules, handbooks, chat, and progression all belong to the teammate rather than being scattered across abstract system settings.

Profiles combine functional configuration with identity: name, role, form, appearance, color, skills, and integrations.

The result is software that makes sophisticated automation feel familiar through the language of teams and work.

Dashboard: Darling Rouge as a manageable employee—tools, assignments, chat, handbook.
Profile identity: name, form, look, and color that drive Darling Rouge’s portrait.
Mockups 02 screens

‍

Website

Showing an AI employee at work

The marketing site was designed in parallel with the product.

Early wireframes established the core structure before the character system was fully developed: product proposition, features, use cases, how it works, company, conversion, and supporting content.

The final visual direction then made one important shift.

Instead of explaining AI employees with abstract diagrams, the website shows them working inside familiar tools.

Website wires: home, features, how-it-works, about, waitlist, outro, footer.

The homepage hero makes the proposition visible immediately.

A teammate responds inside Slack, surrounded by the tools the workforce already uses.

The message is simple: this is AI that joins the existing stack instead of asking a company to adopt another isolated workflow.

Home hero mock: Slack thread as proof, not a product screenshot collage.

‍

Product storytelling

Making capability feel like character

The rest of the site balances two jobs: prove the platform is capable and make the workforce memorable.

Product capabilities are presented through UI-rich compositions rather than feature lists alone.

Characters live inside those compositions instead of appearing as decorative mascots.

Use cases become something closer to meeting a department: each teammate has a role, visual identity, tools, and responsibilities.

The personality makes the product easier to remember.

The product makes the personality credible.

Why Teammates: four pillars with product-and-character compositions.
Platform bento: capabilities as cards, teammates inside them, tools along the bottom.
How it works on the home is four cards: onboard, connect tools, assign a task, watch them adapt. The dedicated page stretches each step into a scene.

‍

How it works

Turning setup into a hiring journey

The onboarding story is organized into four steps:

Onboard. Connect. Assign. Adapt.

First, define who the teammate is.

Then give them access to skills and tools.

Assign real work.

Finally, inspect how they plan, execute, learn, and ask for help when needed.

That sequence makes a technically complex system feel much closer to onboarding an employee than configuring automation software.

Home how-it-works: four numbered cards beside “Four easy steps to build your workforce.”
Step 1 — Onboarding: Meet your very first Teammate, with a live character builder.
Step 2 — On The Job Training: skills toggles and the tools they actually log into.
Step 3 — Getting to Work: first assignment, statuses in a stack.
Step 4 — Problem Solving: a workplan that adapts in public.

‍

A system built to expand

From company story to individual teammates

The same visual system extends across deeper pages without losing the core metaphor.

Company pages use the full cast to communicate scale and personality.

Use-case pages let individual teammates represent specific functions.

Public teammate profiles go even further, treating AI employees almost like individual hires with their own expertise, tools, and responsibilities.

Pricing, conversion pages, editorial content, and supporting sections retain the same product-first foundation.

About, demo, outro, and footer: same system, different jobs.
Engineering use case, public teammate profile, and pricing mock.

‍

Development

Building the site for a changing cast

The website was developed in Webflow as a reusable visual system rather than a collection of fixed pages.

Components could swap teammates, colors, product compositions, and content without requiring every section to be redesigned.

Responsive layouts were treated as compositions of their own rather than scaled-down desktop screens.

Large typography remained large. Character cards became vertical flows. Product UI stayed readable. Interactions never depended on hover.

That flexibility mattered because the product—and the workforce itself—continued evolving throughout the project.

Mobile: home hero, use-case swipe, platform cards.

Outcome

Building the brand around the product idea

Teammates ended up with a connected system across brand, product, and marketing.

The mark suggests a team.

The characters make the workforce memorable.

The product behaves like a workplace.

And the website shows AI employees doing real work instead of asking visitors to imagine what an “agent” might do.

The company was later acquired by Life360.

That outcome stands on its own; the design story is simpler:

We gave a new software category a language people could immediately understand.

Max is the full design package: brand, product design, UI, UX, and can develop too! He was our lead designer for 2 product companies, one B2B and one B2C, and knocked it out of the park on both. He designed and built our marketing website, user onboarding experiences, and our brand. In addition to design chops, he's flexible in his working style and a pleasure to joke around with!
Author
Benjamin Stein
Founder & CEO
I worked with Max on several projects building applications from the ground up. Max can take raw concepts and quickly turn them into finished designs that incorporate user needs and technical limitations. His mastery of both UX and UI design is rare to see in a single person these days. Max happily works within constraints while representing the best interests of the user. His designs are fun, elegant, and bursting with creative energy. I would recommend him to any startup or larger organization that needs a full-stack designer to solve hard problems. You'll find he's wonderful company, too!
Author
Ian Carpenter
Software Engineer

A workforce inside the software

Brand, product, and website all reinforced the same idea: AI should feel less like another tool and more like a team that gets to work.

‍

Working on something similar? Let’s talk →

Subscribe to updates

Case study is coming

Thank you! I'll let you know.
Sorry! It didn't work. Please email me directly.