Smartsheet had a modern design system. It just didn't say anything about layout.
Overview
Smartsheet was migrating to a modern design system, and layout was the missing chapter. There were no shared grid rules, no breakpoints, no guidance on gutters or min/max widths. Every screen required judgment calls that the system should have been making.
I led a cross-team effort to close that gap: defining the rules, stress-testing them with designers across the organization, and documenting them so any team could apply them without guesswork.
My role: Product Design Intern, Design Systems team
Responsibilities: Research & Strategy, UI Design, Cross-functional Rollout, Documentation
Timeline: 10 weeks
The Cost of the Gap
Smartsheet's product footprint spans several legacy surfaces and acquired products. Without documented layout guidance, inconsistencies crept in across screens: uneven margins and gutters, cards with variable widths, and layouts that struggled beyond common desktop sizes. Time went into rediscovering spacing decisions that should have been a lookup. That slowed feature delivery, produced avoidable visual bugs, and added maintenance cost for engineering partners.
To understand the problem properly, I combined four research methods:
Audit: I reviewed screens across Smartsheet and three recently acquired product surfaces to catalog spacing and layout patterns.
Slack channel analysis: I reviewed conversations in the design-system-support channel to identify recurring layout questions and friction points.
Competitive and system review: I compared how leading design systems handle fluid full-width layouts and wide viewports.
Interviews and task observation: I interviewed 2 product managers and ran a task study with 15 designers to measure how long it took to find and apply layout guidance.
40+
screens reviewed across Smartsheet and three acquired products
~3 min
average time for a designer to locate the right layout guidance
“I often duplicate cards to eyeball widths.”
Designer, from the task study. The system offered no better option.
The research settled into three goals:
- Define a single source of truth for layout decisions
- Make the system flexible enough for full-width and fixed-width cases
- Lower the cognitive overhead of layout decisions so teams move faster without sacrificing quality
The Obvious Answer: a 12-Column Grid
I started where most design systems land. A 12-column grid is versatile, accommodates symmetric and asymmetric layouts, and suits Smartsheet's customizable surfaces like dashboards.
For smaller viewports, 12 columns became impractical within the limited width. I proposed different grid structures per breakpoint (Large, Medium, Small), since smaller viewports need less layout flexibility.
The proposal went through iterative testing with multiple layout designs and was stress-tested in a workshop with designers from teams across the organization.
Where It Broke
The fixed-width grid held up well. The full-width 12-column grid did not: it couldn't scale past 1920px, and Smartsheet's users regularly work on monitors wider than that. Full-width layouts needed an adaptability that 12 columns couldn't offer at those sizes.
Retrofitting the grid onto existing screens exposed a second problem. With no established spacing conventions to anchor to, ideal margins and gutters were hard to pin down, and UI elements like cards came out either too narrow or too wide. Key elements also lacked min and max width values, which left sizing open to interpretation.
Twenty-four columns gave full-width layouts room to scale past 1920px.
After testing alternatives, doubling the column count emerged as the solution for large viewports.
The 24-column grid provided finer control over UI element widths within the content area. Designers could create new layouts and update existing ones with ease, and the additional columns made it possible to build cohesive, visually consistent layouts that scale to the largest screens.
Testing the Proposal
I tested the 24-column grid across different screens, layout needs, and use cases, including verifying that it could support integrations from Smartsheet's acquired companies.
I then tested the grids with various layouts and content types across small, medium, and large viewports.
Shipping the Guidelines
Clear rules only matter if designers can find and apply them in daily work. The guidelines shipped as detailed documentation with do/don't examples, made accessible to the entire organization through the internal design system website. The full documentation preview is available here.
Layout Anatomy
Grids for layouts with fixed width container
Grids for layouts with full width container
The grids apply to the layouts currently used across Smartsheet screens, with column counts adjusting per layout and viewport size.
The flexible column combinations support a wide range of layout possibilities across screen sizes.
Fixed width layouts
Full width layouts
Validation and Impact
I measured the outcome with the same task study and a follow-up survey.
60%
faster to locate and apply layout guidance, from 3 minutes down to 1.2
82%
of surveyed designers reported increased confidence in layout decisions
78%
said the kit helped them ship smaller layout changes faster
On the time saved: based on survey responses and adoption across 90+ designers, I conservatively estimate roughly 600 design hours saved in the first 6 months. The logic is simple: a modest weekly saving in lookup and iteration time, compounded across that many designers, adds up to a meaningful gain for the organization.
Retrospective
Guidelines are living documents. The initial guidelines were effective, and they still required ongoing examples and a governance cadence. Quarterly reviews captured new layout patterns and edge cases as they emerged.