Overview

Smartsheet was migrating to a modern design system but lacked consistent grid and layout guidance, which created inconsistent spacing, fragile full-width layouts on large monitors, and wasted design time. I led a cross-team effort to define flexible grid rules, breakpoints, gutters, and min/max widths, shipped a Figma layout kit, and rolled the guidelines out to 90+ designers across 8 UX teams.

My Role: Product Design Intern on the Design Systems team, responsible for research and strategy, UI design, cross-functional rollout, and documentation.

Timeline: 10 weeks from kickoff to handoff.

Context and Problems

Smartsheet's product footprint includes several legacy surfaces and acquired products. Visual and layout inconsistencies were appearing across screens — inconsistent margins and gutters, cards with variable widths, and issues scaling beyond common desktop widths. Designers were spending time guessing spacing values or creating one-off rules. This was slowing feature delivery, creating avoidable visual bugs, and increasing maintenance cost for our engineering partners.

Research and Synthesis

Audit: I reviewed over 40 screens across Smartsheet and three recently acquired product surfaces to catalog spacing and layout patterns.

Slack channel analysis: I reviewed conversations between engineers and designers in the design-system-support channel to identify recurring layout challenges and friction points.

Competitive and system review: I compared how leading design systems handle fluid full-width layouts and wide viewports to identify viable options.

Interviews and task observation: I interviewed 2 product managers and ran a 15-designer task study to measure how long it took designers to find and apply layout guidance. Baseline average time to locate the right guidelines was 6.5 minutes.

Common qualitative feedback:

I often duplicate cards to eyeball widths

We lack a clear rule for max content width on widescreens

I'm constantly guessing which spacing value to use between sections

I focused on three goals:

1. Define a single source of truth for layout decisions
2. Make the system flexible enough for full-width and fixed-width cases
3. Lower the cognitive overhead for designers so teams move faster without sacrificing quality

Initial Proposal

Through my initial explorations for larger viewports, I chose a 12-column grid for its versatility in accommodating both symmetric and asymmetric layouts. This flexibility is particularly beneficial for Smartsheet's use cases, such as customizable dashboards, where diverse and dynamic layout options are required.

However, for smaller viewports, the 12-column grid became impractical due to the limited screen width. In these cases, single-columns are no longer effective. To address this, I proposed using different grid structures for various breakpoints (Large, Medium, Small), as smaller viewports required less complex layout flexibility.

This proposal was validated through iterative testing with multiple layout designs and stress tested by designers from different design teams in the organization.

Problems found with the initial proposal

The fixed-width grid worked well, but the 12-column full-width grid couldn't scale beyond 1920px. Its inability to adapt to larger viewports made it unsuitable for Smartsheet's flexible, responsive design needs. While fixed grids maintained consistency, full-width layouts required more adaptability—something the 12-column grid couldn't provide for varying screen sizes.

Determining ideal margins and gutters for the grid proved challenging due to inconsistent spacing across screens, as designers had no established guidelines. Retrofitting the proposed grid resulted in UI elements, like cards, being either too narrow or too wide. I also found a lack of minimum and maximum width values for key elements, leading to inconsistent sizing by designers.

Solution Proposed: 24-column grid for large viewport

The 12-column full-width grid couldn't support fluid layouts on large viewports beyond 1920px, leading me to explore alternative solutions. After testing various options, I decided to go ahead with a 24-column grid.

This solution provided greater flexibility in adjusting UI element widths within the content area and enabled designers to create new and update existing layouts with ease. With the additional columns, designers can create cohesive, visually consistent layouts that easily scale for larger viewports.

Testing the proposed changes

I tested the 24-column grid across different screens, layout needs, and use cases to ensure it would work for both current and future projects. This included verifying that the grid could support integrations from Smartsheet's acquired companies, ensuring it was adaptable and scalable across all anticipated design requirements.

Later, I also tested the grids with various layouts and content types across different screen sizes, including small, medium, and large viewports, to ensure they would perform well across all types.

Final proposal

The goal was to present the finalized information in a way that was easy for designers to access and apply in their daily work. I had to ensure that the guidelines were not only clear but also practical and readily usable in the design process.

The detailed documentation with all the guidelines and do/don’t examples can be found here. It was made accessible to the entire organization through the internal design system website. Some excerpts from the documentation are shared below: Layout Anatomy Grids for layouts with fixed width container Grids for layouts with full width container

These grids will be applied to various layouts currently used on Smartsheet screens, with the number of columns adjusting based on each layout and viewport size.

Also, these new guidelines offer endless design possibilities across screen sizes due to the highly flexible column combinations. Fixed width layouts Full width layouts

The detailed documentation can be found here.

Validation and Impact

Task study: 15 designers completed a find-and-apply task both before and after the kit. Average time to locate and apply guidance dropped from 6.5 minutes to 2.6 minutes. That is a 60% improvement.

Slack survey: 26 designers responded to a follow-up survey on Slack. 82% reported increased confidence in layout decisions, and 78% said the kit helped them ship smaller layout changes faster.

Estimated efficiency impact: Based on survey responses and adoption numbers, I conservatively estimate the team saved roughly 600 design hours in the first 6-months. That estimate uses the following logic: across 90 designers a modest weekly saving in lookup and iteration time compounds over 6-months into a meaningful time saving for the organization.

Retrospective

Documentation is never done. The initial guidelines were effective but required ongoing examples and a governance cadence. Quarterly reviews were used to capture new layout patterns and edge cases.

Scaling design for the entire org. What was an internship project, ended up impacting the entire org in a meaningful way. It was a game changer.