01 The Challenge
Without a clear standard to follow, UX Designers would often solve the same UI patterns over and over, and in ways differing from each other.
To get an idea of the effort going into this, I polled designers to see how often they were designing the same patterns.
How often do you need to solve for these patterns?
- Form Errors - 45% said weekly
- Editable Table Patterns - 50% said weekly or more frequently
- View Details Pattern - 36% said weekly, 23% said daily
— — —
02 The Process
The UX team was conducting a visual audit of all screens. This is a great time to take a look a common inconsistencies with patterns, so that's exactly what I did.
Using a Power Automate flow, I entered any pattern that was missing definition into a form, which then populated a list. This Microsoft List allowed connecting to other databases of our products, allowing us to see how it all connected and what had the biggest impact to fix.
To make sure the solution made sense for the people that were going to use it, I conducted a design thinking session with users to brainstorm ways to display guidelines for these patterns.
Since I identified over 70 different patterns, I needed to determine priority. Enter a Hogwarts-house-sorting themed session in Miro with the expert designers to find what was most beneficial to work on!
— — —
03 The Results
Developers wanted code templates they could easily access from Storybook.
Designers wanted grab-and-go Figma assets to fast track their process.
Everyone wanted clear usage guidelines available on the design system site.
Specific use-cases were added in Figma so designers can easily add these to their files, saving the hassle of remaking the same things from scratch.
More complex patterns were given more attention, including noting expected interactions, such as what to expect when selecting a table row.
With any long term project, there will always be plenty to keep on the roadmap. Identifying the top patterns to define has helped increase consistency and steers the platform toward a more unified experience.
