AI-driven marketing automation calendar
Timeline
January 2025 - May 2025
Company
Living Brands AI is a creative technology agency. This project was commissioned by their client, BERO (a premium brewing brand), to build an internal B2B SaaS platform that automates complex marketing workflows through Generative AI integration.
Role & Team
Lead Product Designer, collaborating with 1 PM, 1 Design Assistant, 2 Software Engineers, and 1 AI Engineer.
Collaboration & Responsibility
Designed the 0–1 strategic user flow for the core AI experience.
Worked with the PM to define product strategy and MVP scope, aligning on key trade-offs across usability, technical feasibility, and timeline.
Partnered with engineers across design and implementation to establish a design system to enable efficient handoff and on-time MVP delivery, validating them against model behavior and technical limitations.
Hover screen to see old design ↓
Impact
300%
Deployment Velocity
-92%
Decision Latency
40%
Lead Time Reduction
Context
The original ChatGPT-based MVP was a disconnected tool, failing to support the end-to-end marketing lifecycle.
As-Is Interface
User Problem
While AI accelerated output, manual context switching during handoffs consumed 65% of the total campaign lead time.
Business Goal
Achieve lead time reduction with scalable campaign production by eliminating silos and automating handoffs.
Architecting an end-to-end single-flow workspace to bridge the data-silo gap
Key Improvements
1.
Scalable AI Inputs
Replaced unconstrained chat with a structured parameter space, reducing hallucinations by ~90% and eliminating prompt-engineering overhead.
2.
Direct Manipulation Interaction
Reduced scheduling friction from 9+ clicks to one continuous gesture via fluid duration handles and drag-and-drop deployment.
3.
Human-in-the-Loop Recovery Model
Replaced blocking confirmations with instant “Undo,” removing deployment anxiety while preserving reversibility and trust.
How might we transform a static calendar into an intelligent, single end-to-end flow automation workspace?
💡
Design Exploration 1.
1) Technical Wall
Unconstrained chat as a structural bottleneck for B2B velocity.
2) User Pain Point
We could not scale the 'Text-First' approach due to high API failure rates and excessive manual review cycles.
📑
Engineering Report
30% of API calls failed due to unexpected or malformed user formatting.
👤
User Friction
Marketers spent 65% of their total time on prompt engineering and output verification rather than actual strategy.
Evaluated both models against core product heuristics.
3) Trade-Off
By pivoting from a linear chat to a structured parameter space, we eliminated context fragmentation and slashed AI error rates by 90%
4) Final Design - Chip-Based Input
Replacing open-ended guessing with a chip-based criteria interface.
Guided Creation
Structured, chip-based criteria interface replacing open-ended guesswork.
Design Exploration 2.
1) User Pain point
Even simple date changes required opening a modal and manual entry, forcing a high-friction process (9+ clicks).
As-Is Interface
2) App Audit
We discovered that the industry standard isn't form-filling, it's direct manipulation. Users expect to physically move time blocks.
3) Visual Iteration (A/B Testing)
❌ Option A
Static Block Interaction (Move Only)
Issue
Treating cards as fixed objects necessitated separate modals for duration changes, creating a disconnected, fragmented workflow.
Interaction Cost
The 5+ discrete clicks and manual calculations required discouraged frequent schedule optimization, leading to stagnant management.
✅ Option B
Fluid Duration Handles (Trim & Move)
Heuristic Optimization
Reduced interaction cost from 5 clicks to 1 continuous gesture. Empowers Direct Manipulation, aligning with the user’s mental model of "stretching" time for physical control.
Operational Velocity
Enables surgical Precision in scheduling. Real-time management of overlapping campaigns drastically increases the speed of the deployment cycle.
4) Final Design - Fluid Manipulation
Optimizing Interaction Cost, from 9 clicks to 1 continuous gesture.
03. Direct Manipulation Interaction
Drag & drop interaction that bridges creation and scheduling instantly.
Edge Case
1) Edge Case
I moved away from a double-confirmation approach (which blocks momentum) to a Recovery-Based Design.
Human-in-the-loop: This provided a psychological safety net, allowing users to deploy rapidly while maintaining a sense of total control.
2) Visual Iteration (A/B Testing)
❌ Option A
Blocking Modal (Momentum Friction)
Issue
Large modals obscure the timeline and force a visual break. This prevents users from instantly verifying where the campaign was placed.
Psychological Anxiety
We observed a 12-second hesitation before deployment. Users felt anxious that "committing" to a modal was an irreversible action with a "black-box" AI system.
✅ Option B
Toast Notification with Instant Undo
Non-Intrusive Feedback
Toast notifications provide immediate confirmation without obscuring the interface, allowing users to verify the campaign's position on the timeline instantly.
"Undo" Safety Net
By pairing the action with an instant 'Undo' mechanism, I provided a psychological safety net. This empowers users to act confidently and rapidly.
Design system
1) Accessibility Standards
Elevating Brand Identity to AAA Accessibility Standards
I conducted a rigorous accessibility audit to ensure the digital product remains inclusive while honoring BERO’s premium brand heritage. This was not just a branding exercise. It was a risk-reduction and compliance requirement for enterprise deployment.
⚠️ Initial Audit
Issue
The initial brand-led palette resulted in 13 contrast errors across the dashboard.
Data
Key text elements showed contrast ratios as low as 1.46:1 and 2.3:1, falling significantly below the WCAG AA standard (4.5:1).
✅ Final Optimization
Solution
Conducted a comprehensive color refinement, fine-tuning the lightness and saturation of the sidebar, headers, and chips.
Result
Successfully resolved all 13 errors to meet the WCAG 2.1 AAA standard (7:1 for normal text).
2) Design Guide
Architecting a Scalable Functional Interface
1) Visual Harmony: Adapted BERO's physical brand colors into a digital UI scale, maintaining "warmth" while stripping decorative elements to prioritize data readability.
2) Systemic Logic: Defined a modular component library including typography scales, buttons, and flexible calendar cards to support seamless handoffs with engineering teams.
Retrospective & Conclusion
Designing for Trust, Not Just Automation
I believe AI should be a 'Co-pilot' that assists, not a 'Black Box' that replaces. My focus is on building transparent feedback loops that mitigate the inherent uncertainty of AI outputs.
Architecting Scalable Systems
B2B SaaS success lies in the balance between brand heritage and functional scalability. I prioritize building design systems that serve as technical documentation, ensuring seamless handoff and deployment velocity.
Bridging Human Intent and Machine Logic
My role is to translate complex business logic into intuitive, context-aware interfaces that minimize cognitive load and maximize human creativity.
