An AI strategic planner for creative agencies

Context

Newfangled has spent two decades helping agencies and expert firms win business. Magnolia is the product that turns that practice into software: an AI strategic planner that runs the research, develops the strategy, and writes the brief a senior strategist would, in a fraction of the time. The promise on the box is “your best strategic development, in moments.” My job was to make that promise feel true in the product, not just on the marketing page.

Problem

Strategic planning is the most valuable thing an agency does and the slowest. Business analysis, competitive scans, audience and persona work, then synthesis into a brief a client will actually approve. That is weeks of senior time per engagement. The AI capable of compressing that timeline existed. The product that would make strategists trust it did not.

A blank chat box was the obvious wrong answer. Strategists do not want to prompt their way to a brief, and they do not want generic AI prose with their client’s name pasted on top. They want a process that ends in a client-ready artifact and never makes them wonder whether the machine understood the assignment.

So the real design problem was trust, earned at every step: trust that a long generation is actually progressing and not stalled, trust that the output sounds like the agency rather than like a language model, and trust that nothing gets rewritten without the strategist seeing exactly what changed. Solve trust and the speed sells itself. Miss it and no amount of speed matters, because nobody ships a brief they do not believe.

Approach

A guided workflow, not a chat box

Magnolia is built around a process, not a prompt. The strategist moves through a structured path, research, then strategy, then brief, with the product asking the right questions at each stage instead of waiting for the perfect prompt. The interface is a workspace, not a conversation: a step rail that shows where you are in the plan, a working document in the center, and AI assistance docked to the side where it supports the work instead of replacing it.

This was the foundational decision. A chatbot makes the strategist responsible for driving the AI. A guided workflow makes the product responsible for producing the artifact. The second one is what an agency is actually buying.

Make the AI honest about its own state

AI work is asynchronous and slow in human terms. A strategist who clicks generate and sees nothing assumes it broke. So I designed an explicit generation status system into the component layer: every item in a plan reports whether it is queued, generating, awaiting an interview answer, or ready. Skeleton loaders hold the shape of content before it arrives so the workspace never collapses and re-flows. The states are not decoration. They are the difference between a user who waits and a user who refreshes, loses the thread, and stops trusting the tool.

Keep the strategist holding the pen

The fastest way to lose a strategist is to silently rewrite their work. Magnolia’s drafting experience surfaces every AI edit as a reviewable change, additions and deletions shown inline, accepted or rejected one at a time. The strategist always sees what the model wants to change before it changes, and the final brief is theirs, not the machine’s.

Two layers reinforce this. An explore-and-refine conversation lets the strategist push back on any section and iterate without leaving the document. And a style-training surface teaches Magnolia the agency’s voice from their own past work, so the default output already sounds like them. Generic AI prose is the thing that breaks trust fastest in this category. Training the voice in, and showing every edit out, is how the product earns the right to write on the agency’s behalf.

A workspace that flexes to the task

Strategy work is not one density. Some steps are a single focused document; others need research, draft, and reference side by side. Rather than force one layout, the workspace adapts: a three-panel mode for dense synthesis, a two-panel mode for focused writing, collapsible rails when the strategist wants the document and nothing else. The navigation is a dark, recessive rail so the chrome stays quiet during long sessions and the content stays forward. I designed the product in dark and light from the start and worked directly with engineering to ship both cleanly, not as a retrofit.

One system, because consistency is the credibility

Agencies judge a strategy tool by whether it looks as rigorous as the work they put their own name on. A product that drifts visually reads as a product that drifts in its thinking. So I built Magnolia on a design system: foundations first, then components carrying their full state sets including the async states this product lives on, then the experiences composed from them. The same system covers the parts most product work skips, the onboarding, the account settings, the configurable subscription builder, and the public pricing page, because a tool that asks an agency for real money has to feel as considered at the checkout as it does in the workspace.

The foundation is a single palette, named for the plant it takes its name from. Every surface in the product references these tokens rather than a one-off hex, which is what keeps six experiences from drifting into six dialects.

• Leaf Primary action, focus, success
  #26AFAD

  #00A19E

  #008D8A
• Flower Brand, emphasis, AI assistance
  #D25795

  #CA3982

  #BD2973
• Fruit Alerts, unsaved state, warmth
  #D54429

  #E8583E

  #EB715B
• Petal Surfaces, document, light theme
  #F0E9E1

  #F9F3ED

  #FFFFFF
• Slate Navigation, dark theme, secondary
  #555555

  #4E4E4E

  #444444
• Neutral Borders, dividers, disabled
  #999999

  #BABABA

  #DADADA

Type is two faces with one job each. DM Sans carries everything a strategist reads; DM Mono carries everything they scan, status, metadata, the async machinery the product runs on. Holding that line is what lets a dense workspace stay calm.

Headline · DM Sans 700

Your best strategic development, in moments.

Sub-headline · DM Sans 500

A guided workflow, not a chat box.

Body · DM Sans 400

The strategist moves through a structured path: research, then strategy, then brief. The interface is a workspace, not a conversation, and the type has to hold a long reading session without fatigue.

Technical · DM Mono 400

status: generating · queued · awaiting-interview · ready

Components are where consistency is won or lost, so every one ships with its full state set, not just its happy path. Buttons are the clearest tell: primary, secondary, destructive, each with default, hover, and disabled specified up front.

Default Disabled

• Primary, with icon
  Create Content
  Create Content
• Primary, full width
  Login
  Login
• Secondary
  Settings
  Settings
• Destructive
  Cancel My Subscription
  Cancel My Subscription
• Utility, with icon
  Export to PDF
  Export to PDF

Foundations, then components, then experiences. The same three tiers compose the strategic planner and the billing screen alike, which is the only way a system survives a product this broad.

1. Tier 1

   Foundations

   Color, type, spacing, motion, elevation, and a dual dark and light theme. Decided once, applied everywhere.

   • Color tokens
   • Type scale
   • Spacing
   • Motion
   • Dark and light themes
2. Tier 2

   Components and states

   Every primitive carries its full state set, including the async states an AI product lives or dies on.

   • Inputs and controls
   • Generation status
   • Inline diff review
   • Skeleton loaders
   • Empty and error states
3. Tier 3

   Experiences

   The strategic planner, the content library, topic ideation, business development reports, and the account and billing shell, all composed from tiers one and two.

   • Strategic Planner
   • Content Library
   • Topic Ideation
   • Biz Dev Reports
   • Account and billing

Outcome

Magnolia shipped as a complete product, not a demo: the strategic planner, the content library with drafting, supporting materials, and style training, topic ideation, business development reports, and the full account, subscription, and pricing surface. Early agencies adopted it and described it the way the product was designed to be experienced, as a thought partner rather than a generator, citing the quality of the strategic output and an interface that stayed out of the way. The core promise held in practice: research and strategy that took weeks of senior time now took moments, which is the entire reason an agency would put a tool like this in front of a client engagement.

Reflection

What I would do differently: invest in the design system’s documentation as early as the system itself. The tokens and components held up well as the product grew, but the shared understanding of how to use them lived too much in my head. On a product this broad, the system is only as strong as the next person’s ability to extend it without me in the room.

What surprised me: in an AI product, the most important design work is not the AI. It is the honesty around it. The status states, the skeleton loaders, the inline diff, the visible accept and reject, none of it is the model, and all of it is what made strategists trust the model enough to use it. Speed was the pitch. Trust was the product.

A real tension I navigated: the pull toward a conversational interface was constant, because chat is what AI products were expected to look like. Holding the line on a guided workflow instead of a chat box was the single decision the whole product depended on, and it was the one that needed defending most often.