← Back to Selected Works

Designing a routing action that stays legible at 20+ channels.

WhatIff.chat lets AI-driven threads post to multiple channels across servers. The design problem: on mobile, how do you let users control where a reply goes without cluttering the composer with routing chrome most users won't touch on most messages? Six variants across two levels of the problem — with a pattern that holds as channel count grows.

Role
Lead Product Designer
Scope
Mobile UX, interaction design
Focus
AI Product Design, Scalable UI Patterns
Timeline
2025 – 2026
Team
1 designer, 2 engineers (open-source)

Impact

6 variantsacross two levels of the routing problem, explored in a single design session
20+ channelsthe selected pattern scales to without layout changes
M2 + Bselected in a single cross-functional session with marketing, engineering, and design

The problem

WhatIff threads are not one-to-one conversations. An AI running in a thread can post replies simultaneously to multiple channels — a Discord server, a Slack workspace, a direct feed. Users configure which channels a thread is active in, and routing decisions happen message by message: sometimes a reply goes everywhere, sometimes it goes to one channel only.

On desktop this is manageable — there's screen real estate for persistent routing context. On mobile, the composer is small and the user's attention is on the message, not the plumbing. The design question was: how do you make routing state visible enough that users don't accidentally post to the wrong channels, without making it so prominent it dominates the UI for the 90% of messages where routing isn't changing?

The secondary constraint: the app is early. It currently supports a small number of channels per thread. As it grows, the routing UI needs to handle 20, 30, potentially more channels without a redesign. Any pattern that works for 3 channels but breaks at 20 is the wrong pattern.

M1–M3: Showing the posting action in the thread

Three approaches for surfacing routing state directly in the message list — before the user enters the composer.

WhatIff.chat — M1: Animated icon in action bar · M2: Labeled Post pill · M3: Overflow with dot

A–C: Expanding what the user can do with routing

Three approaches for how users review and change their channel selection once they're in the composer.

WhatIff.chat — A: Chip rail in composer · B: Destination pill + sheet · C: Collapsible target strip

Verdict: M2 + B

Agreed in a single cross-functional session under an hour — marketing, engineering, and design. M2 keeps routing state visible in the thread without interfering with message flow. B gives users explicit, unambiguous control when they need it, and stays out of the way when they don't. The combination holds as channel count grows.

← Back to Selected Works Start a conversation →