B2B social media management
Publishing and advocacy, on one system
01 Overview
Where marketers publish and employees amplify
Marketing teams plan, publish and measure social content in the Oktopost app. The Advocacy Board lets their colleagues share approved content with their own networks, reaching people a brand page never could.
-
My role
Product designer, end to end
Flows and edge cases to dev-ready specs and design QA — for advocates, marketers and admins — feeding components and tokens back into Lobster.
-
The problem
Advocacy and publishing had stalled
The board looked dated and identical for every customer, advocates earned little for sharing, the editor pulled marketers off the calendar, and the design system had drifted underneath it all.
Six chapters, one arc
Lobster first, then the global board redesign, gamification and branding on top of it, the editor rebuild, and AI woven into publishing. Each chapter opens with its challenge and outcome.
-
2023 – present
Lobster design system
Where it started: the tokens, components and patterns behind every screen.
-
2023 – 2024
Gamification
Points and leaderboards that reward every action behind a successful program.
-
2024 – 2025
Advocacy Board redesign
A calmer, responsive board in Oktopost’s new brand.
-
2025
Custom branding
Customers put their logo, color and tone on the board and its emails.
-
2025 – 2026
Post editor
Full screen, compact or minimized — without losing the calendar.
-
2026
AI Assistant
Woven into the editor: three post options from one idea, in the profile’s voice.
02 Design system
Lobster: the shared language behind every screen
Challenge
The product had outgrown its shared UI: navigation, cards and color varied from screen to screen, and every new feature risked drifting further.
Outcome
Lobster realigned first, so the board redesign, the editor rebuild and the AI features all shipped on shared tokens and components — and each gave something back.
Principles and tokens
Four principles settle design reviews: minimalism, accessibility, simplicity, visual appeal. Tokens carry them into every screen, raw to specific, so one change reaches everything that should change and nothing that shouldn’t.
-
Foundations
Smallest pieces
Colors, type, spacing, corners and icons — the raw ingredients everything else is built from.
-
Components
Building blocks
Buttons, inputs, cards and modals — small pieces combined into reusable parts with every state covered.
-
Patterns
Ready combinations
Campaigns, charts, empty states and AI helpers — full pieces that keep every screen consistent.
UI kit
Components sit on those tokens with every state documented: 40px buttons with an 8px radius in three styles, tertiary variants for success, warning and danger, inputs with hover, error and disabled states, and the cards and widgets the board is made of.
Lobster UI kit: primary, secondary and tertiary buttons in default, hover, disabled and loading states; success, warning and danger tertiary buttons; text inputs in default, hover, error and disabled states; checkboxes, switches, tags and status icons; an alert and a toast; and a story card.
-
Cards
The unit advocates share: date, reach, title, image and who suggested it.
Empty states, built from parts
Empty and error states are assembled from background elements, interface cards and icon figures, each with its own color style. That lets the same illustration adapt to any background or brand color.
An interactive rebuild of the Lobster illustration system. Every in-app illustration is assembled from four layers: one background element, one skeleton interface card, exactly one accent interface card, and a Hugeicons figure that sits blue inside the accent card, with two related Hugeicons glyphs grey behind it. The controls below choose the part on each layer, and change the illustration size.
Full-page empty and error states — empty boards, no access, 404.
-
01 Figure
A Hugeicons glyph: blue in the slot, grey behind.
-
02 Element
One soft shape, big and bleeding off the frame behind everything.
-
03 Interface — background
A single skeleton card, tucked in behind the accent.
-
04 Interface — accent
Exactly one card in front. It carries the slot.
AI Assistant
It rewrites, analyses and summarises across the product. One look, so it feels like the same helper everywhere.
AI Assistant patterns: a four-point star marks every AI feature; AI Assist is an in-context menu to rephrase, change the tone, simplify language, make text longer or shorter; a thinking state while a response is generated; five feedback actions — AI Assist, copy, good response, bad response and regenerate — shown under the post they belong to; and an AI Insights card carrying a “Generated Jan 12, 2026” footer.
AI Agents
Custom agents repeat a job, a general one covers everyday work, and chat is where you talk to either.
AI Agents patterns: Custom Agents for job-specific work, each a creature from one rock-pool family; agent states, showing one agent thinking, done, and requiring attention; and Agent chat, one place to talk to any of them, opened from anywhere in the product.
What this achieved
Principles encoded in layered tokens, components with every state covered, and shared AI patterns — one system behind every screen, so the board, editor and assistant ship consistent and faster.
03 Gamification
Turning sharing into friendly competition
Challenge
The leaderboard was a tab inside Analytics ranking advocates by clicks or shares. Suggesting content, editing posts or sparking conversations earned nothing.
Outcome
A points system admins tune, leaderboards for every audience, and rewards that follow advocates from the board to their inbox.
Drag to compare the original Analytics leaderboard with the new points leaderboard. Real names and photos are blurred.
How might we
reward every action that grows an advocacy program, and keep the top of the board within everyone’s reach?
One currency for every action
Every action that grows a program earns points: shares, edits, accepted suggestions, clicks, comments, reactions, reshares.
Admins tune the values, daily limits keep it from being gamed, and advocates read the same rules in “How to get points.”
ACME Corp. - All
- 1 River Morgan 190 points
- 2 Avery Taylor 165 points
- 3 Charlie Emerson 140 points
- 4 Blake Carter 110 points
- 5 Sage Bennett 85 points
- 6 Ann Smith You 60 points
Try using it:
What this achieved
Every contribution counts, the top of the board stays within reach, and advocates have a reason to return — so programs stay active instead of fading after launch.
04 Advocacy Board
A calmer, clearer home for advocates
Challenge
A dark, icon-only navbar and one long list of stories, with leaderboards and analytics behind unlabelled icons.
Outcome
A lighter board in Oktopost’s new brand: labelled navigation, a leaderboard preview on home, analytics cut to what matters.
Drag to compare the original board with the redesign. Personal details and third-party photos are blurred.
Three promises
Three changes carried the redesign: easier navigation, their ranking at a glance, simpler analytics.
-
Navigation that explains itself
Labelled pages replace the icon navbar, with search and key actions on Home.
-
Your rank at a glance
Home shows your rank and the top five, one click from the full board.
-
Insights without the noise
Four headline numbers with trends, above a list of your shares.
Designed for every screen
Seven breakpoints, from 1920px down to 400px. As the screen narrows the sidebar collapses, then becomes a bottom tab bar, and filters move into their own sheet.
-
Home
-
Leaderboards
-
My Shares
-
Analytics
-
Story overview
-
My Profile
05 Custom branding
Their brand, on every board
Challenge
Customers could put their logo on board emails, but the board itself always looked like Oktopost — not like their own advocacy program.
Outcome
Admins set a logo, icons, a brand color and a tone of voice in one place, preview it live, and the whole board and its emails follow.
Branding in one place, previewed live
One Custom Branding section collects the logo, icon, browser icon, brand color, feedback tone and email sender details. The preview switches between board and emails, and moves into a modal on smaller screens.
A design system that can wear any brand
Custom colors meant Lobster could no longer hard-code blue. An eleven-shade accent scale generates from the admin’s color, and color splits by purpose: accent carries the brand, new info tokens keep alerts, toasts and status icons blue.
Brand tokens follow the admin’s color; info tokens stay blue, so system messages read the same on every board.
Pick a brand color
Brand color
color-accent-600 #2060E6
- 50
#EBF2FC - 100
#DAE9FE - 200
#BCD8FA - 300
#91C2F9 - 400
#5FA2F4 - 500
#3C80EF - 600
#2060E6 - 700
#2147BC - 800
#203D95 - 900
#1C3474 - 950
#11265E
The whole board follows
Because Lobster’s illustrations are built from parts with their own color styles, empty and error states pick up the brand too — from an empty feed to a missing page.
06 Post editor
An editor that fits how marketers publish
Challenge
Writing and media were squeezed into a small pane with no room to grow. Yet one post can span profiles and networks, each with its own media, campaign, tags, schedule, approvals and advocacy story — all starting from the calendar.
Outcome
One editor that opens full screen, compact or minimized, adapts to each network, and sums up every setting at a glance.
Room to write, room to grow
The old editor gave writing too little room: a short text box, settings behind pills, tiny previews. Threads, reels, targeting and AI had nowhere to go.
The new one gives writing room to breathe with every option close at hand, and its floating compact mode sits over the calendar — write the post and pick its date in one view.
Settings that sum themselves up
Two columns of pills meant everything competed for attention and longer values had nowhere to go. Campaign, tags, schedule, advocacy and approval are now full-width rows.
One column reads top to bottom, each row shows its full value and expands only when tapped, and a new setting becomes one more row instead of breaking the grid.
Why rows work
- New settings slot in as another row, so the editor can keep growing
- Each row shows its value, so the whole post is easy to scan
- Compact rows fit small screens, so nothing hides beyond the fold
Details that protect the work
- A media grid with upload progress and error states
- Drag and drop files anywhere onto the content area
- Type a date or time to schedule, like in Slack
- A warning before closing unsaved changes
- Saved drafts retitled from New Post to Draft
- Approval workflows that show their steps
What users said
Marketers called it modern and easier to navigate — “a 2026 experience.” They singled out the full-screen focus, the floating window over the calendar, checklist-style settings, LinkedIn tagging, and clearer scheduling and drafts.
07 AI Assistant
From blank to published
Challenge
AI Assist was a small menu under the text field that could only rephrase, resize or change the tone of text already written. An empty post, or an article worth sharing, got no help at all.
Outcome
A panel beside the post that turns an idea or article into three options, reworks existing text in the profile’s voice, and asks why when an answer misses.
How might we
help marketers turn an idea into a post worth publishing with AI inside the editor, so they never leave the draft — and never lose their voice or the final say?
A panel that meets the draft where it is
The assistant opens beside the post, in the space the preview uses, from a header tab or the star under the text. What it offers depends on the draft: an empty post starts from an idea, existing text gets quick actions to rewrite, shorten, lengthen, simplify or change its tone.
Every answer is a draft, not a decision
Nothing touches the post until the marketer inserts or replaces it, and every answer can be copied, rated or refined. A thumbs down opens a short form, so the team learns why an answer missed, not just that it did.
In every result
- A badge showing whose voice was used
- Insert or Replace, confirmed with an Added to post toast
- Copy, like and dislike on every answer
- Quick reasons or free text when an answer misses
- The original idea or text pinned above the results
- A reminder that AI can make mistakes
The assistant on small screens
No room for two panels on mobile web, so a header dropdown switches between Editor, Preview and AI Assistant, with Back to Editing always at the bottom.
-
Switch view
-
Craft your post
-
Suggested posts
What users said
“Amazing to edit and try different rewrite angles side by side, without leaving Oktopost.”
See AI branding08 AI in the process
How AI worked alongside me
AI plays the same part in my process as in the assistant I designed: it drafts, a person decides. Three places while designing on Oktopost — and again to turn parts of this case study into working code.
-
Figma Make
Interactive prototypes
Tested micro-interactions and validated flows before writing specs.
-
LLM
Real-world content
Generated realistic posts and prompts instead of dummy text.
-
LLM
Edge cases & microcopy
Surfaced rare failure states and drafted copy in Lobster’s voice.
How I work with it
AI drafts and takes the busywork. What gets designed, and what ships, stays my call.
09 Impact
What changed across the platform
Six projects turned separate features into one connected experience: a realigned system behind every screen, a board advocates return to because it feels like their own and rewards every contribution, and an editor where marketers publish without losing the calendar or facing a blank post.
-
System
Challenge: Shared UI that had drifted from the product it guided
Design response: Lobster realigned around layered tokens, components and AI patterns
-
Board
Challenge: A dated board with an icon-only navbar and one long story list
Design response: Labelled navigation, featured stories and a leaderboard preview
-
Gamification
Challenge: Only clicks or shares counted, in a tab inside Analytics
Design response: Nine point rules admins tune, on a leaderboard page of its own
-
Branding
Challenge: Every board looked like Oktopost instead of the customer
Design response: Logo, color and tone across the board and its emails
-
Editor
Challenge: A heavy editor that pulled marketers off the calendar
Design response: One editor in three modes that stays with the calendar
-
AI
Challenge: AI could only rework text that was already written
Design response: Three post options from an idea or article, in the profile’s voice, inside the editor
10 Takeaways
What this work taught me
-
Leave the system better
Custom branding only worked because the tokens changed first. Every feature is a chance to make the next one faster.
-
Competition has to feel fair
Daily limits, leaderboards per audience and visible rules keep the top of the board in reach — which is what keeps people playing.
-
Design with people who live in it
Marketers showed what mattered: tagging that works, scheduling without friction, drafts that wait. Watching real workflows beats guessing which details to polish.
-
Let AI take the busywork
Prototypes, realistic content and working demos came together in hours instead of days, so feedback arrived earlier and delivery moved faster.
