sprouts.ai
2025
How a reskin uncovered deeper challenges in column grouping, data grids, and scale
Designing a seamless configuration-to-generation workflow that empowers sales teams to create consistent, contextual, and scalable personalized messages.
My role
Product Designer - User Research, Conceptualisation, UI/UX Design, Prototyping, Usability Testing, Developer-Handoff
Team
Solo Designer with guidance
from a Lead Designer, 1 Product
Manager, 4 Engineers
Timeline
6 Weeks, Shipped in March 2024 across all cult.fit centers in India
Objective
Redesign Sprouts.ai to look modern while rethinking table density, column grouping, cell level enrichment and scalability —especially for Windows users working within constrained screen heights.
RESEARCH
Understand the problem
Problem
As Sprouts.ai evolved into a signal-heavy GTM product, the table experience began to break down.
Users could generate personalized outreach, but:
AI signals and enrichment data were scattered across too many columns
There was no clear grouping or hierarchy between related data
Cell-level enrichment states were hard to interpret or trust
Tall rows and wide tables made scanning difficult—especially on Windows laptops with smaller screen heights (~1368×768)
As signal volume grew, users spent more time navigating the table than acting on insights.
Old UI
Insights
We realized this wasn’t a visual problem—it was a structural one.
The existing table component was optimized for displaying static data, not for:
Rapidly expanding AI signals
Dynamic, cell-level enrichment
High-density decision-making workflows
What started as a reskin exposed deeper limitations in how data was grouped, surfaced, and scaled.
Opportunity
The reskin became a chance to rethink the table experience end-to-end:
Increase data density by reworking row height and spacing
Introduce meaningful column grouping and signal hierarchy
Make enrichment states clearer and more trustworthy
Design for real user environments, not ideal screen sizes
Lay the groundwork for grid-like scalability—without breaking existing architecture
Constraints & Tradeoffs
Sprouts.ai relied on a traditional table component, unlike grid-based tools such as Clay
Native column grouping and collapsibility were technically limited
Migrating to a full data grid wasn’t feasible within scope
Data-grid vs Table component
Static tables show data
Data grids support growing signals and decisions
Architecture defines what can scale
Data Grid
Support column grouping
Features expand/collapse
Dynamic, evolving data cells
Enrich
...
Uetissatnns
Nerhnesations
Pefiesnant
Support column grouping
Features expand/collapse
Dynamic, evolving data cells
VS.
Data Grid
No native column grouping
No collapsible columns
Less flexible with new data
A10
MOTT
Donsspune
Newsue
No native column grouping
No collapsible columns
Less flexible with new data
Turning dense tables into scannable, decision-ready views
The tables were overloaded with raw data. I restructured them using logical grouping, clear visual separation, and strong hierarchy—so users could scan faster, spot relationships instantly, and complete tasks with fewer errors.
RESEARCH
Deeper Control for Power Users
1440
1366 x 768
We originally designed HPM at 1440px for wide screens. Research later showed that most users were on Windows laptops with smaller viewports, where only 2–3 rows were visible at a time. This limited scanability and slowed workflows—prompting us to reskin the experience for smaller frames to maximize visible data and usability.
BW
Before vs After
Before vs After
Before vs After
Before vs After