Marketing Design System, Echo
Thirty deliverables a month. Starting each campaign from scratch became the bottleneck.
Context
Workhuman’s marketing team ran a monthly webinar program across six channels: paid social, email, display ads, organic social, landing pages, and on-brand event promotion. Every month the same visual problem was solved again from scratch. There was no system for it.
Echo was the system: a purpose-built component library structured as two parallel tracks: a Webinar Library covering ads, landing pages, and email, and an Organic Social Library covering award badges.
30
6
2
Problem
The bottleneck was not quality, it was repetition. Each month’s campaign began as a blank file, so every decision that had already been made, layout, hierarchy, how a speaker headshot sits against a banner, all were rebuilt under deadline.
Marketing felt it as turnaround. A webinar campaign meant 30+ days from brief to shipped set across six channels, and five rounds of revision that were mostly re-litigating last month’s answers. Late deliverables compressed the promotion window, which is the one variable a webinar’s attendance actually depends on.
Solution
The move was to stop treating each campaign as a design problem and start treating it as an assembly problem. That meant deciding which parts of a webinar campaign were genuinely variable (event title, speaker, date) and which only looked variable because they were getting remade by hand each time.
Splitting along how the work actually arrived
The Webinar Library covers ads, landing pages, and email: three surfaces driven by one recurring event, sharing a date, a time, a title, and a speaker set. The Organic Social Library covers award badges, which followed a different cadence and a different approval path.
One unified marketing library, or two parallel tracks?
Webinar and organic social both needed systematising, and one library or two decided how much of either could be reused. One library meant fewer files, one place to look, and cleaner to explain. Instead, I built two. Every webinar deliverable descends from a single event, one date, one title, one speaker set, feeding ads, landing page, and email. Social runs on a different cadence, a different approval path, a different asset lifecycle. Abstracting over both would have thrown away the thing that made webinars fast.
Turning monthly decisions into component properties
The landing page component exposes four properties: event type, event title, date, and time. Everything else (banner geometry, headshot row, copy blocks, the desktop and mobile variants) is fixed inside the component.
Expose everything as properties, or leave blocks detachable?
How much of a monthly campaign should be editable without opening the component? Exposing everything is the generous answer, and every property withheld becomes a future request. The landing page component exposes four: event type, title, date, time. Everything else stays locked, because the whole point was that the monthly build stopped being a design task, and each new property puts a settled decision back on the table. The way out is detaching, which stops the instance inheriting updates.
One library, three channel surfaces
Landing pages, emails, and social posts each render from the same component layer, with per-surface variants handling the dimensional differences rather than separate source files.
Impact
Once the component layer existed, each month’s deliverables became an assembly question rather than a design question.
5 wks → 2 wks
5+ → ~3
30+ / mo.
6
Echo’s effect shows up in what stopped happening: no month after the library shipped began with a blank file, and no channel needed a source file of its own.
Learning
Aura’s users were designers and engineers, who will read documentation if the payoff is real. Echo’s user is a marketer three days out from a webinar. Echo users don’t want a system and they don’t want options — they want those variables already decided. Every choice I left open was one I was handing to someone with less time and less context than me.
So: four properties, not forty. Banner geometry, headshot placement, copy structure, the desktop-to-mobile relationship — all locked inside the component, because each was a decision already made well once that would be made worse under deadline.
A template makes this month faster. A living system makes next month start from further along. That’s why the library was organised around what recurs rather than around what a campaign looks like.
Credits
Echo was built for and with Workhuman’s demand generation and brand marketing teams, who ran the webinar program it was designed around. Thanks to Carrie, Jesse, Liu, and Brianna for treating a component library as a production tool rather than a design deliverable.