Clear steps.
Smarter outreach.

As part of the Outreach Bot System, I designed the Bot Builder: a clear 4-step setup flow and a streamlined list view built to support our campaign managers.

The impact

~40% fewer missed follow-ups.
~30% reduction in daily tracking time.
Scalable outreach control.

Let’s start with the context 🧐

Outlandish is a TikTok-first creator commerce agency powering large-scale brand campaigns and managing 1,000+ creator interactions each month.

1,000+ creators a week.
Half the day lost to replies.
All manual.

Digging into the real problems

I interviewed our campaign managers to understand why the outreach process was breaking down. Their feedback revealed two core issues:

  1. No single place to see outreach activity

  2. No automated follow-ups

We don’t have a single place that shows what’s sent, who replied, or what needs follow-up

Alison · Campaign Manager

Our outreach process is scattered across tools, there’s no single view of the entire workflow

Kenisha · Campaign Manager

We keep rewriting the same follow-up messages every week... it takes too much time

Monica · Campaign Manager

Switching between tools makes it easy to miss follow-ups

Sherry · Campaign Manager

🚨

the problem

🚨

the problem

🚨

the problem

Outreach was scattered and manual, leaving teams unable to see what was happening or keep up with follow-ups.

To solve this, we asked ourselves:

How might we help teams understand what’s happening and handle follow-ups automatically?

Design goal · 01

Create a clear,
centralized overview

Create a clear, centralized overview

  • Give teams one place to understand all outreach activity

  • Make it easy to see what’s sent, who replied, and what needs follow-up

🚫 Constraints

  • Short timeline → minimal UI

  • complexityFilament-based UI → table-first layout

  • Limited engineering bandwidth → no advanced state logic

Design goal · 02

Make follow-ups effortless
and consistent

Create a clear, centralized overview

  • Replace repetitive manual follow-up writing with reusable rules/messages

  • Make follow-ups consistent so teams don’t miss replies

🚫 Constraints

  • TikTok API limits automation

  • No backend automation engine → limited to basic trigger logic

  • Short MVP timeline → no complex automation

❇️

our solution

❇️

our solution

❇️

our solution

A single place for clear outreach
and effortless follow-ups

Outreach Bot builder

List → Create new bot → Wizard(step1-4) → Confirm

Here’s how I arrived at this solution 🤓

🔍

DESIGN EXPLORATION · 1

🔍

DESIGN EXPLORATION · 1

🔍

DESIGN EXPLORATION · 1

Designing a clear bot view

Starting with an IA
analysis

Starting with an IA analysis

Starting with an IA analysis

I mapped all possible bot signals to identify what managers need to see instantly.

  1. Primary signals (for daily decisions)

  2. Actions

  3. Context signals (to identify the bot)

Before exploring solutions,

I reviewed how other tools organize workflow lists

Most platforms use table-first layouts to manage complex workflows

  • Dense table layout for fast scanning of large flow lists

  • Lightweight list view focused on quick review and setup status

  • Highly structured table with advanced filters for enterprise-scale workflow management

Designing a clear bot view for scale

01. choosing the right data view: cards vs. table

A. Card layout

  • More visual, richer context

  • Hard to scan across many bots

  • Not supported by Filament (no grid layout)

  • 💡Cards emphasize contextual richness

B. Table layout(chosen)

  • Compact, scannable, scalable

  • Works with Filament’s native UI

  • Easy row navigation + clear primary signals

  • 💡Tables emphasize scannability

Designing a clear bot view for scale

02. improving clarity & efficiency by iteration

  • Simplified the detail experience by replacing the full page with a focused overview modal (faster to build, easier to scan, and better aligned with MVP constraints)

  • Replaced row-click with a single View button to make navigation predictable

  • Moved Start/Stop into the table for instant access

  • Kept Edit/Delete in the overflow to prevent accidental actions

bot LIST VIEW

Instant visibility. Instant control.

🔍

DESIGN EXPLORATION · 2

🔍

DESIGN EXPLORATION · 2

🔍

DESIGN EXPLORATION · 2

Designing follow-up
automation

Before exploring solutions,

I started by reviewing how other tools handle automation logic

Most platforms offer custom triggers
for complex multi-step workflows

  • Visual flow builder with conditional splits

  • Rule-based trigger automations

  • Multi-step workflows using nested logic blocks

However, a complex workflow builder didn’t fit our reality. We needed something simple, reliable, and fast to ship.

Then, how might we
create preset triggers for our use cases?

Then, how might we
create preset triggers for our use cases?

Here are the top use cases that campaign managers repeatedly needed automation for

Designing follow-up automation

01. exploring trigger selection patterns

A. Modal picker

  • Good for large sets of options

  • Slow repeated open/close

  • Heavy for MVP

B. Dropdown

  • Clean but low visibility

  • Extra steps needed

  • Multi-select chips get messy

C. Preset buttons (chosen)

  • Always visible

  • One-click setup

  • Fast + lightweight (best for MVP)

  • Creates structured data → AI-friendly

Designing follow-up automation

02. choosing the right automation display

A. Timeline view

  • Our triggers are event-driven, not sequential

  • Real campaigns fire in unpredictable orders → Looks logical, but doesn’t reflect reality

B. Simple list (chosen)

  • Accurate for event-based automation

  • Each trigger = one independent message

  • Lowest mental load; fastest to build & scale → Best fit for our actual system

Designing follow-up automation

03. improving clarity & safety by iteration

  • Instant undo makes interactions safer and reduces mistakes

  • Auto-message previews show exactly what will be sent

  • Dedicated running section makes active triggers easy to see

  • Empty-state guidance shows users how to get started

  • Variables make automated messages feel more personal

4 step Wizard

Set once. Follow up automatically.

Future direction & outcome

Building a Foundation for AI Automation

Building a Foundation for AI Automation

Our MVP is designed so the next step toward AI-recommended triggers and fully automated messaging is seamless.

We turned a complex automation process into a fast, intuitive flow for users today, while giving the team a quicker ship path and a solid AI-ready foundation

40%

Fewer missed follow-ups

Teams no longer lose track of creator replies

30%

Less manual tracking time

Daily spreadsheet check-ins reduced significantly

From no structure to a clear setup

We introduced a preset trigger system where none existed before, giving managers a simple, reliable starting point for automation

Designed for MVP constraints

A 4-week timeline required reducing UX complexity to the essentials, which allowed us to ship quickly while keeping the underlying system extendable

AI-ready structure

By structuring automation as “when X happens, do Y,” we created clean, predictable data for future AI-recommended triggers

What I learned

Build for real use cases, not abstract flexibility

Focusing on the core workflows teams actually used led to a preset-based design that was faster to ship and more reliable than a fully flexible builde

Simple, structured inputs scale better

Using consistent preset triggers produced clean, predictable data
and made the system easier to automate, measure, and extend

Good design needs flexible infrastructure

Our tech stack limited how far interactions could scale.
If rebuilt, I’d add a lightweight custom UI layer to support more advanced automation patterns

Let’s connect and turn complexity into clarity

If you’re looking for a designer who brings structure, clarity, and thoughtful craft to complex workflows, let’s start the conversation!

© 2025 All right reserved

Created by

Hazel

Let’s connect and turn complexity into clarity

If you’re looking for a designer who brings structure, clarity, and thoughtful craft to complex workflows, let’s start the conversation!

© 2025 All right reserved

Created by

Hazel

Let’s connect and turn complexity into clarity

If you’re looking for a designer who brings structure, clarity, and thoughtful craft to complex workflows, let’s start the conversation!

© 2025 All right reserved

Created by

Hazel