[Design (Systems] Thinking)

How systems thinking helped create design system page layouts that saved time and increased consistency

 

TL;DR:

  • Designers and product partners at a top financial services company did not have the tools they needed to implement and govern new page design after the release of a new design system.

  • We analyzed the most visited pages and created an ecosystem of new page layouts.

  • At warp speed, We created a set of templates and guidelines that aligned with the design system to save time and increase consistency.

Role

Partner UX Designer

Key skills

Design systems \ Systems thinking \ UX design

 

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.