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.
Impact
300%
Deployment Velocity
-92%
Decision Latency
40%
Lead Time Reduction
Context
Before the redesign, the product was an MVP integrated with ChatGPT. It functioned primarily as a text & image generation tool where marketers could generate campaigns via a standard chat interface. But it is completely disconnected from the actual scheduling and publishing workflow. This forced marketers to manually copy-paste every generated asset into external tools.
Business Goal
Achieve scalable campaign production by eliminating data silos, aiming for a 40% reduction in lead time through automated handoffs.
User Problem
While users achieve peak output with the generator, it reveals that 65% of campaign lead time is consumed by manual context switching during the handoff.
As-Is Interface
How might we transform a static marketing calendar into an intelligent, single end-to-end flow automation workspace?
💡
Design Exploration 1.
1) User Pain Point
Existing text-based chat models forced marketers into repetitive prompt engineering, creating high cognitive load and unpredictable AI outputs. This variance made the tool unreliable for professional, high-velocity campaign setups.
As-Is Interface
2) Trade-off: Freedom vs. Deterministic Reliability
I navigated a critical tension between user agency and system feasibility, to validate this decision, I evaluated both models against core product heuristics.
3) Visual Iteration (A/B Testing) - Optimizing for Precision
❌ Option A
Inline Linear Interface (High Cognitive Friction)
Issue
The linear layout induced a tedious form-filling mental model.
Impact
Weak information scent forced sequential processing, increasing time-to-completion and input errors.
✅ Option B
Modulated Configuration Space (Cognitive Offloading)
Solution
Implemented a focused modal to explicitly decouple configuration from execution.
Impact
Guided users into a "High-Intent" state, enabling rapid mapping of creative strategies without administrative friction.
4) Final Design - Intelligent 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
3) App Audit
We discovered that the industry standard isn't form-filling, it's direct manipulation. Users expect to physically move time blocks, not calculate dates in a modal.
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 Execution
Optimizing Interaction Cost, from 5 clicks to 1 continuous gesture.
03. Seamless Deployment
Drag & drop interaction that bridges creation and scheduling instantly.
Roadblock
1) Pivot
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.
⚠️ 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.