Context
Shorthand's existing grid layouts were functional but limited in styling options. Customers wanted more control over card layouts, spacing, borders, backgrounds, and the content within each card.
How might we give creators more layout flexibility and styling control while maintaining the simplicity that makes Shorthand accessible to non-designers?
Process
- Identified common use cases: catalogs, headshots, content hubs, mood boards, and team pages
- Designed a comprehensive section options panel with progressive complexity
- Created intuitive card management with drag-to-reposition and row alignment
- Built flexible styling controls for spacing, corners, borders, and backgrounds
- Tested variations to ensure the feature worked for both minimal and bold visual styles
Solution
A redesigned grid section with extensive customization options. Users can control cards per row, adjust spacing between and inside cards, customize corners from subtle rounding to unique shapes, add card backgrounds and borders with opacity controls, and build rich card content with images, text, buttons, dividers, and tables. All through a visual interface with real-time preview.
Outcomes
- Grid section usage increased significantly after launch
- Enabled a wide range of use cases from clean team pages to bold catalogs
- Existing grids can be upgraded to the new format while preserving layouts
Learnings
- Progressive disclosure was key. Section options reveal complexity gradually
- Real-time preview eliminated the fear of experimentation
- Row alignment for card content was essential for catalog-style layouts