Interface Inventory

At Anthropologie, we found ourselves in a situation that is fairly common among eCommerce sites: over the course of 8 years of growth, our site grew and adapted to meet the needs of a growing business by way of multiple designers, art directors, and developers who all had different ways of doing things. As such, we had a bloated code base, an inconsistent customer experience, and lacked a singular style guide from which to work. Before starting this project we were loading 4 style sheets with over 10,000 selectors to get our site to run!

Bring on the "interface inventory." It's a clean sweep if you will. A chance to start over, to clean up the legacy of band-aided code and a lack of a cohesive style guide. The biggest win for the UI team? We could move way from time-consuming CSS based specs to a lightweight spec referencing parent styles in our KSS style guide. 

PART I: THE GATHERING PHASE

This is definitely an effort in brute force. To begin an interface inventory, the team must take stock of every. single. style. that exists on site. Our team used the Atlassian software Confluence to catalog styles because it offered a single location that we could each access and update synchronously. A tip for those thinking of conducting a similar exercise: include live links embedded in a URL location tag to track instances of each style. That way, while the site is still live, you can click through to live examples of the UI element. When the site turns over to new styles, you will still have a label to remind you where the style once came from!
 

PART II: CONSOLIDATION & NAMING

Our UI team collaborated with the fantastic Jenn Lukas to devise a system for organizing and naming UI elements according to the BEM naming convention.  After examining each portion of the UI inventory, my team created a set of recommended styles which represented the set of "final styles," our revised site would move forward with. One great tip Jenn encouraged us to use during this step was the assignment of a usage note: the guideline that both developers and designers should use when deciding how and when to apply a style.

PART III: SPEC-ING & PRACTICAL APPLICATION