Designing a B2B campaign management dashboard with AI-assisted design
Transforming RGN's manual campaign workflows into a self-serve portal with systems thinking and role-based permissions.
overview
Centerfield's Retail Growth Network (RGN) helps brands and aggregators manage product campaigns that drive traffic through sites and social media to marketplaces like Amazon and Walmart, earning commission (CPA) or per-click (CPC) revenue. However, the program ran entirely on spreadsheets, costing real revenue as the business scaled. I led the design of a self-serve client portal, leveraging AI to accelerate design exploration, iteration, and development handoff under a compressed 90-day timeline.
$3-4K
Daily CPC Earnings
50%
Fewer Errors
10,000
Campaigns Per Action
Prefer a deeper dive?
project timeline
Mar - May 2026 · 90 days
my role
Product Designer
team
Product, Engineering, QA, Product Leadership)
my design skills in focus
0-to-1 Product Design
B2B SaaS
AI Tools
the problem
One wrong date input, in a slow manual process, cost a client 90% of their invoice
Every campaign update, upload, and reporting request depended on internal users, including sales and client success managers (CSMs), manually editing a PPL spreadsheet. With no built-in validation, one incorrect promotion end date reduced a client’s monthly invoice from $10,000 to $1,000. As RGN grew toward hundreds of client accounts, both problems became a scaling bottleneck.
the solution
Building a faster, self-serve portal with safeguards against campaign errors
I designed a self-serve portal that centralizes campaign management, with built-in safeguards to prevent errors and improve visibility into changes.
Self-Service
Clients can manage campaign uploads, edits, and reporting directly.
Built-In Safeguards
Validation and audit history catch errors and make changes traceable.
Built to Scale
Designed for hundreds of accounts and 10,000 campaigns in a single bulk action.
Context & Scope
How does RGN work and who uses it?
Brands and aggregators upload campaigns into RGN; Centerfield's marketing channels (social, product reviews) drive traffic to those promotions on marketplaces like Amazon and Walmart; sales and commission data flow back into reporting. CSMs manage these client relationships.
The new portal holds six different role types
Each client organization is represented by an account, with individual users receiving permissions based on their role.
External clients: Brands and aggregators managing promotions and viewing performance.
Internal teams: CSMs (Client Success Managers), sales, and finance supporting account management, promotion changes, approvals, and reporting.
Everything we built in 90 days
key design decisions
Evolving the designs to changing requirements
We started with a high-level PRD, with technical and UX details still being defined. Under a 90-day timeline, I moved the designs forward while accounting for evolving requirements and decisions that might need to be revisited.
Adapting RGN’s campaign workflow to also support CPC (cost-per-click)
RGN originally supported only CPA campaigns. When Amazon stopped supporting CPA attribution during the build, we needed to add CPC campaigns.
CPA (Cost-Per-Acquisition)
Brands pay a commission for each sale.
CPC (Cost-Per-Click)
Brands pay per click instead of per sale.
Shifting the focus from products to campaigns
A CPA promotion was tied to one product ID, so the original campaign list was organized around products. A CPC campaign could contain thousands of product IDs, making that structure difficult to scan. I shifted the hierarchy to campaign name and moved product-level detail into the Campaign Details page.
Before CPC—led by individual Product ID per row
After CPC—led by campaign name and multiple IDs
Redesigning the bulk edit feature from user feedback
The original bulk-edit modal applied one value across all selected campaigns, but through weekly alignment with internal users, we learned they often needed to update individual values. I redesigned the workflow as a five-step CSV wizard: export campaigns, edit them offline, upload the file, validate changes, and review a change summary before submitting.
BEFORE
When promotions overlap, do we “block” or “chop”?
Without manual review, RGN needed a consistent rule for overlapping campaigns.
I worked with my product director and PM to map scenarios across manual creation, CSV uploads, sidebar edits, and API calls, then evaluated two approaches:
Block (A): Reject the new overlapping promotion.
Chop (B): Automatically end the existing promotion when the new one starts (with warning).
Yuko (Myself)
Designer
Aliya
Product Manager
Neal
Product Director
Working session to map scenarios
→ We chose “chop”. New campaign means evergreen campaign would auto-end. Clients can manually re-add after.
cross-functional collaboration
Turning different perspectives into shared decisions
We had two weeks—and two different ideas for the design system
Thomas and I initially preferred different design system foundations. I wanted to use the existing Mantine-based Platform design system, while Thomas preferred ShadCN and Tailwind. I worked with Thomas and the Platform engineers to validate whether Mantine could work with Tailwind and Claude Code. We built a sample page using the existing system and tested how its components translated through Claude Code.
Yuko (Myself)
Designer
Thomas
Front-End Engineer
ShadCN or Mantine for design system?
→ Testing confirmed Mantine could support the portal, so we used the existing system instead of building a new one.
Using AI to accelerate design-to-engineering handoff
I incorporated AI-assisted workflows to accelerate design exploration and implementation. After discovering that edge cases surfaced too late and created rework in Week 1, I moved discussions earlier in Week 2 and shared AI-generated prototypes with Product and Engineering before refining them. This reduced my design workflow time by 35% while giving the team earlier opportunities to shape the solution.
Adapting to how Thomas works
Through weekly syncs with Thomas, our front-end engineer, I adapted my handoff for his Claude Code workflow. Instead of designing every scenario in Figma, I focused on detailed annotations clarifying behavior, interaction states, and open questions.
Yuko (Myself)
Designer
Thomas
Front-End Engineer
Structured Figma files for Claude Code
→ Detailed dev annotations for Claude to read and implement.
User Research & Feedback
The portal was well received, and feedback helped us refine it
Once RGN was fully rolled out and fully in use, I held a follow-up session with two internal users who had experience with the live portal. I shared their feedback with my PM to prioritize changes, and continued incorporating feedback from day-to-day use into design refinements.
An incredible amount of difference in time spent on set up and changes!
I would argue [it takes] 50% less time for us to do things on behalf of clients and more than 50% reduction in errors.
Scott M.
CSM (Internal User)
When the 25% limit started to sound like a suggestion
Stakeholders raised concerns that displaying the 25% budget-reduction limit could encourage clients to make the maximum reduction, even though significant changes were intended to involve their CSM. I removed the percentage from the helper text while retaining the threshold as system validation.
Displaying the 25% threshold risked encouraging clients to reduce budget by the maximum allowed amount.
When the threshold is exceeded, validation directs the client to contact their CSM.
results
Launched in 90 days, replacing a spreadsheet bottleneck
$3-4K Per Day
50% Fewer Errors
10,000 Campaigns
~1/8 the Cost
Compared with earlier Salesforce and outsourcing estimates
The portal launched on the original 90-day timeline despite a mid-build pivot to CPC campaigns and a redesign of the approval workflow. It replaced spreadsheet-based operations with a system that validates campaigns before they go live.
Although CPC campaigns are generating good revenue, gross profit came in below one-tenth of the department’s pre-launch target, which assumed that removing the operational bottleneck alone would drive substantially higher revenue. The portal made campaigns easier and faster to manage, but we learned that improving the workflow alone wasn't enough to drive the revenue growth we had expected.
reflection
What I’d carry into my next project
This project taught me how to navigate ambiguity while product, design, and engineering moved in parallel. Our team retro session surfaced three lessons I’d carry into future projects.
Working through ambiguity 🧠
The project moved quickly, with product, design, and engineering working in parallel while requirements continued to evolve. I prioritized high-impact decisions, stayed closely aligned with my PM, engineer, and QA, and marked unresolved details as TBD rather than treating assumptions as final.
Protecting time for requirements upfront 🕰️
Starting before the PRD was finalized maintained momentum, but led to repeated rework as business rules and edge cases became clearer. In our full-team retro, we agreed that next time, we would allocate more time for product to fully define the requirements—even under a tight deadline—before moving forward.
Establish a shared process for AI-assisted development 🔎
As engineering used Claude to build the portal, it sometimes added elements beyond the designs I had handed off. This made changes difficult to identify. Next time, engineering and I will have a shared process to review and document AI-generated changes.
