Tooling Pattern Library

Align visual and user experience patterns to achieve cohesive user-centered experiences

My role: lead, visual designer, HTML / CSS, Sass

The Challenge

Natural Language Classifier, Language Translation, and Experience Manager were three separate products that belonged to the Watson Tooling portfolio. They tackled very diverse problems with different use cases but many of the patterns and interactions were the same. The lack of visual consistency across the portfolio weakened the Watson brand and created unnecessary confusion for users that used multiple Watson applications.

The Tooling Pattern Library was a new initiative to align visual and user experience patterns across three dispersed teams to achieve compelling and cohesive user-centered experiences. The secondary goal was to create a framework so that designers could rapidly prototype and share consistent modularized patterns with their development team.

The Process

We started with a design audit to analyze what was currently being used in our products. By documenting each of the elements and patterns in Mural.ly, we could easily spot overlaps and inconsistencies. We used Brad Frost’s Atomic Design methodology to organize our patterns, labeling each as an atom, molecule, or organism. We also included a Watson specific category because Watson's cognitive capabilities aren’t common vernacular.

Each pattern was prioritized based on importance and usage and assigned to a specific sprint. However, the schedule was flexible and could be adjusted when priorities changed.

Once we had a catalog of all the common UI patterns we needing to include, each item was added as an individual issue in GitHub. There were 4 main areas we gain alignment on:

1. Definition and guidelines for usage
2. Variations and specific use cases
3. Acceptance criteria
4. Visual styling

Adding this template to the first comment of each issue helped to establish a baseline and facilitate consistency. Each issue would then be labeled with a product label, the type of element it was (according to Brad Frost’s Atomic Design), and assigned to a milestone. Each milestone aligned to the 3-week sprint schedule our product teams used.

In the beginning of the sprint, each issue would be assigned to a visual designer. Their responsibilities included:

1. Verifing that screenshots had been collected for that issue
2. Taking a first pass at writing usage guidelines
3. Requesting approval of visual styling and guidelines from team members

The visual designer that was assigned to the issue wasn’t necessarily responsible for completing it on their own. Their main priority was to help facilitate the completion of that issue. The other team members (included UX, visual, research, and developers) were responsible for contributing relevant screenshots, questions, or comments. We found that it was best to include full page screenshots so that everyone could understand the context. Patterns shown in isolation weren't always adequately reviewed.

Since our team was dispersed across multiple time zones, we would keep the conversations contained in GitHub. This allowed us to have free flowing discussions even if team members weren't available at the same time.

Once an issue was approved (which required sign-off by at least one visual and UX designer), Britany or I was assigned to code the pattern. The coder would then create a feature branch, make code changes, and submit a pull request.

After I reviewed and pulled in the code change, the pattern was added to the Tooling Pattern Library and would be followed in future designs and prototypes. If a pattern needed to be reviewed again, anyone could reopen the issue and assign to the current milestone.

Working with the developers on my team, especially David and John, was crucial to the success of the library. David provisioned the repository with ALL THE THINGS like Sass, Bower, Grunt and other dependencies. During development, John played a pivotal role by reviewing my code and making sure all the pull requests to the development repository were submitted correctly.

The Outcome

By the end of 2015, Natural Language Classifier, Language Translation, and Experience Manager successfully released using the Tooling Pattern Library as a framework. This improved alignment between designers and developers. It reduced the need for "waterfall" and moved the team towards a continuous delivery and agile methodology. It also provided a starter template for designers to quickly prototype designs and test with users.