Building a responsive pattern library
It was important to firstly understand how the existing produce worked and behaved and we started by closely examining the existing product in collaboration with the development team, looking at specific user journeys, what data users were required to input at what time as well as what outputs and information were needed to be displayed. As we broke the site down we started to identify patterns and specific components blocks that could be drawn out and used throughout the redesign.
Due to the complexity of the TM Pro product, we quickly identified that adopting a modular approach for the design would help us to create a more effective and deliberate UI design system. We consolidated existing components into a number of core groups that could be redesigned in isolation and documented in a new pattern library.
Using a modular or atomic methodology for complex and configurable white label site like TM Pro helped to make testing and QA easier, encouraged reusability of code and created consistency while dramatically helping when re-skinning the product for individual clients needs.