Frame
Understand the business context and define the real problem before designing anything.
The story in seven chapters
One business problem became one clear customer journey and one governed AI service system.
Umbrella Marketing AI · Product case study
Designing an AI marketing operating system for small business
I translated ten marketing services, eleven specialist agents, and a human approval model into one clear customer and operations experience.
My role
UX/UI Designer and AI Product Manager
Focus
Strategy, systems, workflows, and visual direction
10
Service experiences brought into one system
11
Named AI specialists with clear responsibilities
300
Customer capacity used as the design target
100%
Human approval required before delivery
These figures describe the designed scope and operating target, not measured performance results.
01
The Problem
Small business owners need marketing help, but the experience is fragmented, overwhelming, and hard to trust.
umbrella-marketing-ai.com
Before Umbrella, a small business owner faced ten different marketing services with no clear way to compare them or understand what they would actually receive.
The challenge
Small business owners need marketing support but face fragmented vendors, unclear packages, slow coordination, and little time to manage specialists.
The design response
Create one trustworthy front door, make services easy to compare, use Andy to guide decisions, and connect every request to a specialist AI workflow with human review.
The opportunity was not another marketing website. It was one understandable front door connected to a reliable operating model.
02
The Process
How Monica worked as UX/UI Designer and AI Product Manager to connect the customer experience with a reliable operating model.
One designer, two connected roles
Monica's dual role connected customer experience with operational feasibility. Every service page was designed with the downstream workflow in mind, and every public promise was checked against fulfillment capacity.
An iterative process, not a linear one
Each phase informed the others. Customer facing decisions looped back into operational constraints and vice versa.
Synthesize
Organize ten services into one clear, comparable structure a visitor can scan.
Design
Shape the visual system and the responsive experience across every screen.
Operationalize
Connect every request to a human governed AI workflow that can actually deliver.
Iterate
Review, refine, and ship versioned improvements as the product matures.
The process repeats as the product matures.
Design and operations were never separate. Monica held both roles so the public promise always matched what the team could deliver.
03
The Owner
Meet the growth stretched small business owner and the four moments that decide whether they stay or leave.
The Growth Stretched Owner
Runs a small business and wears many roles
Goals
Attract customers, understand what is working, save time, get reliable help
Behaviors
Researches on mobile, compares options, asks specific questions, values proof and fast response
Frustrations
Fragmented vendors, jargon, uncertain value, limited time, fear of losing control
Needs
Clear packages, confidence, visible progress, simple approvals, a human accountable for final quality
Proto persona based on business context and market assumptions, not interview research.
Research notes
Owners wear too many hatsMarketing language creates uncertaintyTen services can create choice overloadTrust must be earned before a requestProgress needs to stay visibleMake the next step obviousOne service catalogHuman review as a trust feature
Four journey moments
A working hypothesis based on business context and stakeholder synthesis, designed for moderated validation.
1
Journey moment 1
Find help
Find marketing help online and compare the options
Curious, then overwhelmed
The friction: Too many options, unclear credibility, similar sounding packages
The design response: Clear navigation, value proposition, and service comparison
2
Journey moment 2
Get clarity
Ask questions, narrow the options, and pick a service
Relieved, then focused
The friction: Fear of being sold too fast, unclear deliverables and timeline
The design response: Guided recommendations and clear outcomes, without pressure
3
Journey moment 3
Start the work
Describe the needs and watch the work move forward
Hopeful, then anxious
The friction: Complicated forms, vague briefing, no visibility into progress
The design response: Simple briefs with clear goals and status visibility
4
Journey moment 4
Stay in control
Review the work, accept it, and request more
Satisfied, then loyal
The friction: Poor quality without a revision path, no easy repeat path
The design response: Human review gate and a clear revision loop
The owner does not need more marketing choices. The owner needs clarity, trust, and visible control.
Chapter 04 · The customer journey
04
The Experience
Ten complex marketing services became one understandable journey with three repeatable acts.
01Act 1
Discover and understand
A clear homepage explains the value, groups ten services into a system, and gives owners a simple place to begin.
Design outcome
The visitor understands the offer before being asked to choose.
Shipped responsive experience
02Act 2
Choose with confidence
Andy asks about the business goal, recommends the most relevant service, and explains why it fits.
Design outcome
Guidance replaces a long catalog and reduces decision pressure.
Proposed guided recommendation flow
03Act 3
Request, review, and approve
The portal keeps the brief, progress, review, requested changes, and final approval in one visible workflow.
Design outcome
Customers stay informed while every deliverable remains human reviewed.
Designed portal workflow
One journey, two coordinated layers
Simple for the owner. Structured for the team.
Customer sees
Clear choices, request status, review controls, and a direct path to approval.
Umbrella coordinates
The right specialist, a human owner, production steps, and delivery governance.
05
The AI Engine
A simple customer experience on the surface. A controlled, human governed operating system behind it.
The orchestration model
One clear front door. Eleven focused specialists.
Andy helps a visitor describe the goal and understand the right next step. Behind the conversation, the request is routed to the specialist designed for that service.
AI accelerates the first draft. Monica and the team remain responsible for facts, brand voice, promises, approval, and final delivery.
Ask AndyUmbrella AI system
Frontstage
What the visitor sees
A short guided conversation that turns uncertainty into a confident service choice.
1Visitor asks
2Andy clarifies
3Andy recommends
4Visitor chooses
Andy clarifies and recommends. He never creates a request or commits the visitor without their action.
Backstage
What the team controls
The specialist prepares a first draft. A human checks facts, links, voice, and promises before approving delivery.
Specialist AI
Generates the first draft
Human review
Checks and approves the work
Delivery
Releases the approved result
Purpose built AI team
Every specialist follows the same accountable workflow.
Consistent inputs, one controlled draft, one visible human approval gate, and a clearly defined deliverable.
Andy
Growth Strategy
Input
Business context and growth goal
AI creates
Structure priorities and a first strategy draft
Human checks
Validate assumptions, scope, and recommendations
Deliverable
Growth roadmap
Scout
Lead Generation
Input
Audience, offer, and funnel goal
AI creates
Draft funnel sequence and lead assets
Human checks
Check claims, links, and conversion logic
Deliverable
Lead funnel package
Echo
Amazon Marketing
Input
Product information and marketplace goal
AI creates
Draft listing copy, keyword direction, and campaign plan
Human checks
Compliance, accuracy, and brand review
Deliverable
Amazon optimization pack
Luna
Social Media
Input
Brand voice and campaign objective
AI creates
Create content plan and post drafts
Human checks
Review voice, accuracy, and timing
Deliverable
Social content package
Mia
Email Marketing
Input
Segment, offer, and campaign goal
AI creates
Draft message sequence and subject options
Human checks
Review consent, links, promises, and voice
Deliverable
Email campaign kit
Pixel
Content and Creative
Input
Format, message, audience, and channel
AI creates
Generate concepts and content drafts
Human checks
Brand and quality review
Deliverable
Content and creative pack
Nova
Website Design
Input
Business goal and page brief
AI creates
Propose information architecture, page flow, and content direction
Human checks
Review clarity, accessibility, and responsive behavior
Deliverable
Website experience package
Ava
AI Receptionist and Chatbot
Input
FAQs, intake rules, and escalation needs
AI creates
Map conversation paths and response scripts
Human checks
Verify boundaries, handoff rules, and accuracy
Deliverable
Receptionist and chatbot flow
Flow
Marketing Automation
Input
Workflow trigger, systems, and constraints
AI creates
Map automation logic and steps
Human checks
Validate logic, permissions, and failure states
Deliverable
Automation specification
Atlas
Analytics and Reporting
Input
Data source and business questions
AI creates
Summarize indicators and surface insights
Human checks
Review context, calculations, and recommendations
Deliverable
Analytics report
Piper
Controlled Social Publishing
Input
Human approved social content
AI creates
Route content into the scheduling queue
Human checks
Final account and schedule verification
Deliverable
Approved publishing queue
Request lifecycle
Five moments. One visible approval gate.
A client request moves through a predictable sequence. Human approval is explicit before delivery.
Step 1
Understand the request
Step 2
Route to the specialist
Step 3
Generate a first draft
Step 4
Human review and approval
Step 5
Deliver through the portal
Human approval before delivery
Nothing is sent to a client automatically. For social content, Piper routes approved work to scheduling only after sign off.
Operating principles for 300 customers
- Standard briefs
- Smart routing
- Visible status
- Human ownership
- Reusable templates
- Approval queues
- Versioned releases
Future operational work
Planned, not yet shipped.
- Durable generation queue
- Concurrency testing
- Quality scoring
- Operational analytics
AI creates speed. Human ownership creates trust.
06
The Outcome
Ship a coherent experience and define what comes next.
umbrella-marketing-ai.com
No metrics are claimed. These are future signals to track once the product has live traffic.
What shipped
One system, delivered across the public site, the admin desk, and the client page.
Public website
One coherent brand and product system
Ten complete service journeys
One conversational guide
Admin AI Service Desk
One admin request and review workflow
Human approval before delivery
Recoverable versioned releases
Client service page
Responsive and search ready public pages
What we would measure next
Future signals, not results. Each one is proposed, not promised.
Service page to request conversion
Proposed measure
Andy recommendation to service click
Proposed measure
Request completion time
Proposed measure
Human edit rate
Proposed measure
Approval rate
Proposed measure
Repeat request rate
Proposed measure
My reflection
The dual role of UX/UI Designer and AI Product Manager prevented the public promise from becoming disconnected from fulfillment. Every service page I designed was checked against the downstream workflow. Every visual flourish was weighed against implementation time and maintenance cost.
Reusable patterns and governance rules were more valuable than custom solutions. The human approval gate was not a compromise. It was a trust feature that made the AI system credible.
— Monica · UX/UI Designer and AI Product Manager
Next validation
Future research steps, not completed studies. They show what a rigorous validation plan looks like.
1
Moderated owner interviews
Validate the proto persona and journey map with real small business owners
2
Task based testing
Observe users navigating service selection, Andy guidance, and brief submission
3
Analytics instrumentation
Implement baseline tracking for proposed measures
4
Operations load testing
Stress test the approval workflow with simulated concurrent requests
Three lessons that stick
01
Clarity beats volume
A smaller, clearer catalog outperforms a wall of options.
02
Patterns reduce complexity
Reusable structures let one team manage ten services.
03
Human governance is part of the experience
Approval is a trust feature, not a bottleneck.
Clarity, patterns, and human governance turned an AI promise into a credible, shippable experience.
07
The System
One authoritative artifact captures the visual decisions across desktop and mobile.
Umbrella Marketing AI design system
A reusable visual language for one connected experience.
The complete four page system documents the foundations, desktop components, mobile behavior, and icon family used throughout the product.
Umbrella Marketing AI Design System
PDF preview · 4 pages
Desktop and mobile
This is the project design system artifact used as the source of truth for color, typography, components, responsive behavior, and iconography.
Umbrella Marketing AI
A premium experience in front, an honest system behind it.
If that approach fits what your team is building, I would love to talk.
Umbrella Marketing AI · Case Study·My work · UX Designer
Product & Operations · UX · IA · Visual Direction