Group Chat
- Role
- Senior Product Designer
- Scope
- Redesign, Design System, Micro-interactions
- Surfaces
- Embedded Widget + Control Dashboard
- Year
- 2025 / 2026
Year the original widget shipped
Between the last visual pass and this redesign
Surfaces redesigned in lockstep: widget and dashboard
Publishers running the widget in production
Arena Group Chat went live in 2017 and never paused. It powered live conversations for publishers like Reuters, ESPN and Red Bull, among many others, embedded inside articles, streams and landing pages.
Almost a decade later the product worked, but felt it. Density, type, color and interaction patterns belonged to a different web. And the redesign could not stop at the widget. Editors controlled everything from a separate dashboard that had aged the same way. Shipping one without the other would just move the problem.
Goals03
- 01
A unified visual language for the widget readers see and the dashboard editors work in. One redesign, two outcomes.
- 02
Reactions, typing indicators, threaded replies and presence on the widget. Live conversation view, faster moderation and inline analytics on the dashboard.
- 03
One token layer. Two component libraries, widget and dashboard, packaged so the next features do not start from zero.
Constraints03
- 01
Publishers ship daily. The rollout had to be progressive, reversible and backwards compatible.
- 02
The widget lives inside third-party layouts. It cannot break cards, force fonts, or fight the reader's theme.
- 03
Embedded widgets load alongside ads, video and tracking. Every animation and asset had to earn its place.
- 01 /Audit
Mapped the widget state by state (empty, loading, error, moderated, banned, slow network) and the dashboard surface by surface (conversations list, live view, moderation queue, analytics, settings) before touching a pixel.
- 02 /Sketch
Explored type, density and color against real content from live publishers. Whatever we designed had to hold up against sports scores, breaking news and celebrity chatter on day one, inside the widget and inside the dashboard.
- 03 /System
Locked color, type, space, radius and motion tokens first. Components and screens were assembled from those primitives so nothing drifted across surfaces.
- 04 /Prototype
Built message enter, reaction bursts, typing indicator, pin transition and presence pill as code prototypes on live data, then promoted to production with light polish.
- Arena Purple#9124FF
- Electric Magenta#BC2DFF
- Hot Pink#FF6682
- Signal Yellow#F2E461
- Ink#0A0A0A
- Paper#FFFFFF
- DisplayArchivo 900
- BodyArchivo 400
- AccentInstrument Serif Italic
- 01 · Message row · Widget
The atomic unit of the feed. One row, many states: sending, delivered, reacted, pinned, moderated.
- 02 · Composer · Widget
Input, attachments, emoji and reply context in a single expanding surface that respects the host layout.
- 03 · Presence pill · Widget
A compact, animated indicator that shows live audience volume without distracting from the conversation.
- 04 · Conversation shell · Dashboard
Sidebar, live view and context panel in one frame. The home editors return to every day.
- 05 · Moderation toolbar · Dashboard
Pin, hide, block and flag in one cluster. Built for speed with keyboard shortcuts and inline confirmations.
- 06 · Analytics cluster · Dashboard
A reusable stat block that fits the live view, reports and email digests without rework.
- 0190 days
Lift in weekly active chatters after rollout
- 02vs legacy
Reactions per session on redesigned messages
- 03median
Speed of moderation actions on the redesigned dashboard
- Design
- Gustavo Girard
- Engineering
- Widgets Team
- Product
- Arena Product
