In completely redesigning the front-end of our sprawling enterprise system, consisting of 2700+ pages, we needed to give developers more information and more leeway than we would have with a typical redesign of one component, one page, or one workflow. Because of our legacy back-end code, each and every page would have to be touched multiple times by up to five different developers. Rather than provide 2700+ wireframes, visual mocks, or completed HTML pages, the UX team decided to train the development team in how to flip the common page elements that make up 80% of the system, while additionally providing mocks or guidance for unusual pages.
I and another front-end-developer needed a way to communicate to the development team what our coded system components were supposed to look like in the live system, as well as the many user-cases for mixing-and-matching different component elements. We decided to create a complete pattern library with complete examples of correct and accessible code as we wanted it to appear throughout the live system. We also used this server to provide fully-realized HTML mocks for some of the more complex and completely redesigned areas in the new system. We named our library the Developer Online UI Guide, affectionately nicknamed “DOUG”.
The pattern library we built was referred to throughout the redesign process, by both developers and UX designers to create a completely consistent front-end in the live system. As flips progressed and new and unexpected design challenges were discovered, we were able to continuously update with pattern library with solutions and complete coded examples. As we discovered new element use-cases, we were able to create more in-depth use cases and code samples. Throughout the system redesign, the DOUG pattern library has been a growing and evolving document. Now it’s legacy serves to train new designers and developers joining TK20 on our brand’s UX patterns.