AI Marketing tool
Live Project
Solo Project | 8 weeks |UX Designer/UI Designer/ Product Owner
From a dozen disconnected steps to one: BrewContent brings creation and publishing into a single view
Introduction
BrewContent is a B2C generative AI content platform designed to help Gen Z creators generate photos, text, scripts, and video for their social channels such as Instagram, YouTube, and TikTok, all within a single, unified workspace.
Problem
Content creation for social media is inherently fragmented. Creators typically move across multiple disconnected tools to ideate, generate assets, write, and format content for different platforms. Each tool comes with its own interface, mental model, and workflow. This fragmentation forces creators to constantly switch tools and manually piece content together just to see how a final post will look.
BrewContent was originally designed as an internal brand-asset management tool built for marketing teams, with information architecture and user flows optimised around structured brand governance. However, it was later redesigned to be inclusive of individual creators managing multiple platforms, audiences, and personas independently, without a team or established brand system behind them. This shift required rethinking the product's user flows and Information Architecture from the ground up to serve a fundamentally different user: one who needed speed, flexibility, and creative iteration rather than governance and consistency controls.
Solution
BrewContent consolidates the fragmented creator workflow into a single, continuous experience anchored in persona intelligence. Through journey mapping and task-flow analysis, the design centers on three core moments: defining an audience profile once to drive automatic, persona-informed content generation, iterating across multiple content versions side-by-side to support rapid creative exploration, and previewing exactly how a post will render on-platform before export, thus closing the loop between creation and publishing. By restructuring the information architecture around these moments rather than around tool-based silos, the platform reduces cognitive load and compresses what was previously a multi-tool, multi-step process into one streamlined path from idea to export.
Link to published website: https://brewcontent.ai/
BrewContent turned a fragmented, multi-tool content creation process into one streamlined workspace
Design Process
Because BrewContent evolved from an internal marketing tool into a consumer-facing product, there wasn't an existing base of user research to build from. The design direction was instead driven by product and business KPIs tied to activation, retention, and platform engagement. This meant translating quantitative targets into concrete design decisions. Each flow was designed against a specific metric it needed to move, then refined through iterative prototyping and stakeholder feedback.
Working in Agile sprints alongside product managers and engineers, I concepted and prototyped solutions from low- to high-fidelity wireframes, using interactive prototypes to pressure-test navigation and information architecture before handoff. A key design principle carried over from the platform's marketing-tool roots was that output should never feel generic. Every flow needed to preserve a sense of identity and creative ownership for the user, even as generation became faster and more automated. This iterative loop opened up opportunities to simplify multi-step flows, which ultimately contributed to a 40% reduction in user clicks across core tasks like content generation and export.
To support this pace of iteration across desktop and iOS, I built and maintained a scalable Figma design system using variables, Auto Layout, and reusable components, ensuring that as flows were restructured sprint over sprint, consistency and accessibility scaled reliably across both platforms.
The result was a design process shaped less by discovery research and more by rapid, metric-informed iteration. Define the KPI a flow needs to support, prototype toward it, validate through cross-functional review, and refine based on what the data showed post-launch.
KPIs & Design Rationale
Since BrewContent's design direction was driven by product and business metrics rather than user research, each core flow was built to move a specific KPI. Below are the five metrics that shaped the design.
1. Time to first export
Design decision: Streamlined navigation and reduced the number of steps between opening the tool and generating a finished, downloadable asset.
This metric measured how quickly a new user could go from landing in the product to producing their first piece of content. High-fidelity wireframes and interactive prototypes were used to identify and eliminate unnecessary steps in the core creation flow, directly contributing to the 40% reduction in user clicks. A shorter TTFE signaled that the IA and navigation were guiding users efficiently toward their goal rather than burying it under unnecessary decisions.
2. Content iteration rate per session
Design decision: Built a persistent version history so users could view and modify all previous iterations without losing earlier work.
Because content generation is inherently exploratory, we noticed that the creators rarely accept the first output. By showing all versions simultaneously, rather than overwriting or hiding prior attempts, we intended to increase the number of iterations per session as a proxy for creative confidence and tool trust.
3. Cross-platform task completion parity
Design decision: Built a scalable design system using Figma variables, Auto Layout, and reusable components to ensure consistent interaction patterns across desktop and iOS.
This metric tracked whether users could complete the same core task at comparable rates regardless of platform. Since the product needed to feel and function the same whether a creator was working from a desktop browser or their phone, the design system existed specifically to keep this parity as flows were iterated on sprint over sprint.
4. Pre-post preview usage rate
Design decision: Added a dedicated preview button that renders content exactly as it would appear once published, before final export.
This metric measured what percentage of sessions included a preview button interaction prior to download. Its existence in the flow was a direct response to the trust gap in AI-generated content. High usage would validate the feature, whereas low usage would have signalled the step needed to be more visible or valuable.
5. Audience-profile completion rate
Design decision: Designed a guided flow for building an audience profile, since this input directly determines the quality and relevance of generated content.
Because BrewContent's generation engine relies on persona and audience intelligence to tailor output, an incomplete or abandoned profile setup would degrade content quality downstream. This KPI measured how many users fully completed profile setup versus dropped off, making profile-building friction a direct design priority rather than a one-time onboarding afterthought.
Initial Wireframes
Before any visual design decisions were made, each core flow (content generation, version review, audience profile setup, and preview) was mapped out in low-fidelity wireframes. This step was critical given the KPI-driven nature of the project. Without user research to validate assumptions, wireframes served as the primary tool for testing whether a flow's structure could move on to high-fidelity design. Wireframes went through several iterations in Agile sprints, reviewed with product managers and engineers to catch structural issues early.
Final Concepts
Getting Creators to Their First Export, Faster
The initial flow required creators to navigate through multiple disconnected steps before generating usable content. To reduce time-to-first-export, the core creation flow was restructured around a single, linear path, from prompt to generated output. Removing redundant navigation and decision points along the way.
Since audience profile data directly determines content quality, the setup flow was designed to be guided and low-friction rather than a lengthy form. This reduces the chance that a creator abandons setup before ever generating content.
Designing for Exploration: Version History as a Creative Safety Net
Since content generation is exploratory by nature, the design needed to eliminate the fear of losing a good version while trying something new. The version history view lets creators see and compare all previous iterations alongside their current one, encouraging experimentation.
AI-generated content carries an inherent trust gap. Creators need to know exactly how something will look before committing to it. The preview screen renders content as it will actually appear once posted, closing the loop between generation and publishing.
One Design System, Two Platforms, Zero Compromises
To protect task-completion parity across desktop and iOS, a scalable design system was built using Figma variables, Auto Layout, and reusable components, ensuring the same interaction patterns and visual language held up regardless of screen size or platform.
Reflection on the project
-
Designing without user research sharpens metric literacy, but it has limits. Working solely off product KPIs forced me to translate abstract business goals into concrete design decisions quickly. But it also meant flying blind on why users behaved a certain way. This project reinforced how much richer design decisions become when quantitative targets are paired with qualitative insight, and it's made me more intentional about advocating for even lightweight research (like quick usability tests) on future KPI-driven projects.
-
Owning a project end-to-end as a sole designer means constantly adapting. I moved between high-level IA decisions, sprint-level prototyping, and pixel-level system consistency almost daily, often without another designer to sanity-check direction. This taught me to build my own checkpoints, such as revisiting flows against the original KPI, stress-testing designs against edge cases myself.
-
A scalable design system is as much a communication tool as a production tool. Building the Figma system taught me that consistency across desktop and iOS gives engineers and PMs a shared reference point so cross-platform decisions could be made quickly, without every conversation starting from scratch.