- Message Cell System

Overview

Sprout Social’s feed was powered by a patchwork of message cards across networks (Twitter, Facebook, LinkedIn, Instagram). Each was built independently, leading to inconsistent design, accessibility gaps, and scalability issues.

I led the redesign of message cells into a modular subsystem that worked across all networks and contexts (feed, notifications, detail pages), improving usability, accessibility, and maintainability.

‍

My Role / Partners

Staff Product Designer (Mobile) — discovery, audits, component architecture, end-to-end UX flows.
Partners: Mobile engineers, Product, and Web Design System—tight collaboration to align patterns and ship the new interaction bar first on web.

‍

Problem

Legacy message cells were inconsistent across networks.
Accessibility standards were not met (contrast, labels, hit targets).
Engineers duplicated work for each card type.
Difficult to scale to new features or networks.

Users experienced confusion and slower workflows, while engineers faced technical debt.

‍

Discovery & Research

User Insights

Typical mobile sessions: 1–2 minutes; 40% of sessions start from a push notification
People drill in for context only ~26% of the time; most actions happen inline (e.g., Complete, Like) → prioritize quick-action clarity and speed
Scalability across networks is key to roadmap agility
(Backed by analytics review + audits.)

‍

Audits

Engineering audit: mapped data sources, templates, and pain points in current cell builds.
Mobile UI audit: different message types looked the same → poor scannability.
Web parity audit: logged cross-platform mismatches/missing elements.
Social network patterns & inspiration: identified required and future content types; no 1:1 mimicry to avoid inconsistency.

‍

Strategy: Modular Subsystem

Instead of rebuilding cards per network, I proposed a unified subsystem:

Composable components: Header (avatar, network icon), body (text, media), footer (actions).
Flexible layouts: Same building blocks, adjustable per network or feature.
Accessibility baked-in: Color contrast, large hit targets, descriptive labels.
Cross-platform parity: Built to scale across web, iOS, and Android.

‍

Design Process

Partnered with engineers in weekly design reviews to ensure feasibility.
Iterated prototypes tested on both iOS and Android for parity.
Conducted usability testing to validate hierarchy and tap targets.

Key Design Refinements

Interaction Bar (quick actions): clear, consistent affordances optimized for speed; shipped first on web.
Indicator Bar: compact status/metadata treatment that scales to smaller surfaces (e.g., web side panel) without losing meaning.
Type-aware content zones: differentiate message types for scanning without network look-alike styling.
Accessibility upgrades: hierarchy, tap targets, and predictable focus order (paired with engineering for maintainability). (Generalized from the stated accessibility problems and UI goals—kept platform-agnostic.)
Dev-friendly composition: standardized parts reduce branching and make new networks/features faster to add.

‍

Cross-Platform Collaboration

As the web design-system team redesigned message cards (including a new side panel), I partnered closely to adapt patterns for tighter spaces and introduced the indicator bar concept; the web team then shipped the interaction bar ahead of mobile.

‍

‍

Outcomes & Impact

+20–30% increase in usage of actions exposed in the interaction bar (web); faster time-to-action.
–15% customer support tickets related to UI confusion.
Engineering velocity: more consistent imagery and parts helped teams add networks faster.
Consistency: 1 subsystem replacing 10+ one-off designs.
Accessibility: All message cards now meet WCAG AA standards.
Efficiency: Engineers reuse components instead of duplicating code.
Usability: Task completion speed increased; internal testing showed ~25% fewer errors in message interactions.

‍