Design Systems & Systems Thinking
A case study in systems thinking to save time and increase consistency
User need: Designers and product partners need tools to implement and govern new page design after the release of a new design system
Business objective: Quickly create channel specific templates and guidelines that save time and increase consistency between new pages
Role: analyzed top visited pages, created an ecosystem of page layouts, pressure tested templates across use cases, and wrote rules of use for page layouts and design system components
Key skills: Design systems, Systems thinking, UX design
Results: Delivered value in 6 weeks with a Figma library of 7 page templates at various breakpoints and corresponding documentation
Opportunity
With the release of a new design system, gaps were identified in design assets and support material during roll out.
Process
6 weeks, 3 UX Designers, 1 UX Developer
We were asked to deliver:
Figma page templates for designers
Written documentation, including guidelines, rules of use, and best practices for product teams.
Reference coded templates for the future development of templates
Guidelines, rules of use, and best practices for those templates and overall, for the web channel.
Gather & Analyze
We analyzed the top 20 pages (and their variants) of the website, identifying page types and common functionality. This allowed us to understand where there were opportunities to create templates for maximum impact.
Constraint
We were expected to utilize the existing information architecture and general layouts, while including design system updates.
Screenshot of analysis in working file
Apply pressure
We pressure tested seeming endless combinations of use cases (so many wireframes and flows!) and discussed options with key design leadership and teams,
And just like that...
We delivered eight page templates (in Figma and code) and guidance documentation that described the new template structure, the relationship between templates, and rules of use.
Sample documentation page
Results
Immediate value delivered
The templates and documentation delivered allowed:
designers to design faster and maintain consistency across pages
product and design leaders to govern an new design work for the website
We sprinted so they could marathon
While instantly helpful, there was more work to do to make the templates even better—we knew our templates would be a really good first draft, but a first draft nonetheless.
We transitioned ownership of the templates to another design team and they continue to iterate on the templates as the design system and platform needs evolve.