Creation

The initial idea came about once I recreated an asset twice. I started to create a personal library of assets that were as performant as possible. At first small components, then sections of a view and finally full-page templates.

Each time I created a wire or design solution, I would save it off into a separate library file. This additional 5-15 minute task enabled me to slowly build up the patterns without risking my project deadlines.

I was well versed in Brad Frost's Atomic Design framework as well as Bootstrap's work with front end development frameworks. The component hierarchy was broken down into atoms, molecules, organisms and templates. Although it made sense to me, I had to ensure it resonated with my colleagues - otherwise adoption would fail.

Rollout and Adoption

I held a demo session to shop the idea out to the oganization. I invited colleagues that were interested as well as those that believed a library could not be done. I created a high fidelity view in under 5 minutes. That was enough to prove its worth!

I needed to validate the structure of the library for a wider audience. I was fortunate to get a group of early adopters of varying Axure skill levels and from different teams across the organization.

I held multiple feedback sessions on a near weekly basis. These sessions could have been as simple as ad hoc Q&A sessions over skype or at their desk. Show and Tell sessions were also used to better understand how each champion used Axure and leveraged the library. I kept track of all session feedback for each of the 10 early adopters.

The Aha! Moment

As the library grew, I started to run into organizational issues. It was getting harder to define a universal naming convention for patterns. This made finability difficult which decreased adoption and re-use. I received feedback that it became so cumbersom to find a pattern that creating it from scratch became more efficient.

These organizational problems led to 2 major breakthroughs.

Organizational Solution - Sheets and File Import Method

I moved from an individual list of patterns to the idea of sheets. Sheets housed patterns that were commonly categorized together. For example, all form related items were placed together. Selectors, multi-select patterns, radio button patterns, inputs and validation messaging were all found in one page.

This may seem obvious today, but I had built this toolkit before design systems were common for UX and UI designers.

This not only increased workflow efficiency but also made ramping up junior colleagues much quicker. Patterns that were associated with a product detail page were all located in one area. Cart patterns were all in a cart group. Any patterns that appeared across multiple categories were instances of a master object making maintenance more efficient.

After another release audit in which I tested time on task and flow preferences, I realized I was using the library in an entirely different manner than the testers. The testers imported the library into their one project file. Searching an imported library had limited search functionality which made the experience more difficult. I would copy assets from my library file and then paste into the project file. The main difference being I had a much more robust search/browse functionality in the library file than in the project file.

I presented the updated sheets structure and reviewed my workflow of leveraging the library file itself versus importing the library file. Once the work around was rolled out, adoption increased and the library was ready for organization wide consumption.

Rapid Prototyping

Once the main library and project template was completed I started to work closely with the User Research team.

I collaborated with the UXR team to create best practices for user testing in a live lab setting. Using the original pattern library as a base, I created an interactive template library which reduced the time to get to UXR by half. We were able to setup and create UXR feedback loops twice as fast leading to more accurate design validation.

Closing Thoughts

I created an automation tool as a side project which evolved into a major value add to the entire organization. Creating this library not only educated me about the company and all the intricacies between the teams but it forced me to think outside the box and leverage my product design skills to improve the way the entire team designed end user experiences.

Years later, after using other tools, the UX around finding patterns still exists with imported library files. Outside of becoming familiar with naming convention of the base library, copying from a library file and pasting to a project file is the most efficient flow.