Context
Shorthand's existing grid layouts were functional but rigid. Customers frequently requested more creative control—the ability to break out of standard column structures and create layouts that matched their editorial vision.
How might we give creators more layout flexibility while maintaining the simplicity that makes Shorthand accessible to non-designers?
Process
- Analyzed 200+ published stories to identify common layout patterns and pain points
- Interviewed 8 power users about their workarounds for achieving custom layouts
- Studied competitor approaches and modern CSS grid capabilities
- Created interactive prototypes testing different levels of complexity
- Ran usability tests with both novice and expert users
Solution
A reimagined grid section with intuitive controls for column spans, gaps, and alignment. Users can now create asymmetric layouts, overlap elements, and control responsive behavior—all through a visual interface that hides the underlying complexity.
Outcomes
- Grid section usage increased 45% within first month
- Support tickets about layout limitations dropped by 60%
- Featured in 3 customer showcase stories
Learnings
- Progressive disclosure was key—showing advanced options only when needed
- Real-time preview eliminated the fear of experimentation
- Presets for common patterns helped users get started quickly