Connect content, creators and budgets in one agency workflow.

I designed SocialGaines from research to visual design, bringing content planning, creators, contracts and budgets into one workspace. Shared components and implementation-ready tokens connected the product’s UX with development.

Company
SocialGaines
Role
Lead Product Designer
Duration
2024 – 2025
Tools
Figma, FigJam, Framer, Dovetail, Maze
The SocialGaines dashboard: engagement over time, creator contracts, upcoming posts with reach, and budget tracking

The challenge

An agency runs on a dozen tabs.

Agency work was spread across spreadsheets, messages and shared documents. The product needed to connect those handoffs, make approvals visible and help account managers understand campaign performance alongside budget and creator activity.

Scope

Content, creators, contracts and budgets. Usually four tools, held together by one overworked team.

Clarity

Raw campaign data tells you what happened. It does not tell you what to do next.

Adoption

A platform the whole team opens first thing every morning, not just another tab they slowly learn to ignore.

Process

Turn real agency work into connected product flows.

I started with how account managers worked, then mapped the journeys, tested the structure and created a system developers could implement consistently.

  1. Research

    Interviewed account managers and mapped work across spreadsheets, messages and shared documents. Synthesised sessions in Dovetail to identify recurring handoffs and missing context.

  2. UX flows

    Mapped content, creator, contract and budget flows in FigJam. Tracing the full journey helped define module boundaries and the information each handoff needed.

  3. Wireframes

    Structured the modules in Figma and tested flows with account managers using Maze. Feedback shaped the dashboard before visual design.

  4. Visual design

    Created shared UI components in Figma with variables mapped to Tailwind CSS tokens. I also designed and shipped the products’ marketing sites in Framer.

Key decisions

The reasoning behind the work.

I connected product strategy, research, UX flows and a shared design system across the suite. The work focused on clear handoffs between content, people and budgets, with reusable components ready for implementation.

  1. Started from the real workflow

    Research-led

    Mapped the real workflow in UX flows, content through creators through contracts through budget, before designing a screen. Fitting the existing workflow means inheriting its habits, including the ones worth breaking.

  2. Decisions, not just dashboards

    Data UX

    Engagement trends and budget burn surfaced as next actions, so a glance answers what do I do now rather than what happened. Opinionated defaults help most people and get in the way of the analyst who wanted the raw table.

  3. Approval lives on the board

    See it before it ships

    Every idea moves through review on the same board the work already lives on, so a client sees what is coming and nothing publishes without a decision anyone can trace back. A visible rejected column is uncomfortable, and that discomfort is the point.

  4. One workspace, one system

    Scale and consistency

    Navigation, cards, chips and every state they ship in, built once and shared with SimplyGaines, the sibling product, so the two read as one suite. A system costs weeks spent on components instead of screens, and only repays that if someone keeps it honest.

Results

In build, designed to scale.

1,000+
Posts a month it's built to plan
120+
Components in the shared system
8
Social channels, one planner
6
Scattered tools it replaces

SocialGaines is in development. The screens here are visual designs rather than shipped product; the figures describe the designed scope and the capacity it is built for, not live usage.

Component and channel counts come from the design itself; the posts-a-month figure is the load the planner was built to carry. Real usage figures will follow once the platform ships.

A list view in the platform, rows of records with their status and owners
A detail view with its records laid out in a table
A dense table of records, filterable, with each row carrying its own state
The Dashboard: activity, work in progress and what needs attention, in one view
Work: everything in flight across clients, with counts and owners on each item
A module of the platform, listed and filterable
Creative Ideas in list view: each idea with its channel, owners and status
Creative Ideas as a Kanban board: ideas moving from in progress through review to approved
The SimplyGaines marketing site, the sibling product, designed and shipped in Framer
The SocialGaines marketing site, the same system carried onto a dark hero

Reflection

Connected workflows and shared components give a team a clearer path from product idea to implementation.

Next, I would validate the content-planning module in everyday agency use before expanding the full suite. Observing one complete workflow would provide better evidence for the remaining modules.

Next project: privitas

Social