Case Study: Building a Responsive Pattern Library jontowers
TMPro is a large white label product used for online ticket sales and ticket management for a wide variety of sports and theatre clients. Some major clients include Manchester United, Arsenal, Tottenham, Aston Villa, West Ham United and Fulham FC.
Ticketmaster had identified the need to update the TM Pro product to accommodate the increasing amounts of mobile traffic the product was experiencing. I joined the Ticketmaster team on a 9 month project, with the specific aim of producing a responsive, mobile first design for the platform.
Building a responsive pattern library
Before we could start any “responsive redesign” of the product, it was important to firstly understand how the existing produce worked and behaved. We started by closely examining the existing product, looking at specific user journeys, what data users were required to input 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.
Objectives for the redesign:
Simplifying the visual language to be cleaner and uncluttered to enable users to digest information with minimum distractions.
Defining a responsive grid that is fluid and flexible to provide a consistent and accessible experience across the many variations of screens.
Defining typographic rules to create hierarchy, clarity and scan-ability of information.
Designing a consistent iconography style to help give more context to content.
Finding a tone of voice for labels and messages to be friendly and human while being clear and informative.
Establishing better defaults for components to help to reduce the amount of user inputs.
Using familiar UI elements to help with efficiency and familiarity with existing users.
What is Atomic Methodology?
A modular or atomic design methodology is composed of five distinct stages working together to create an interface design system which is more deliberate and has a hierarchical structure. The five stages of atomic design are:
Atoms: Basic building blocks or HTML tags, such as a form label, colour palettes, fonts, input fields or a button. They are often a reference to global site styles.
Molecules: Groups of atoms and are the smallest fundamental units of a component. They take on their own properties and are the foundations of a design systems.
Organisms: Groups of molecules joined together to form a relatively complex, distinct section of an interface.
Templates: Consist mostly of groups of organisms stitched together to form pages. It’s here where you start to see the design coming together and start seeing things like layout in action.
Pages: Specific instances of templates. Placeholder content is replaced with representative content to give an accurate depiction of what a user will ultimately see.
We produced documentation in close collaboration with the development team to ensure consistency between the design patterns and the front end code. Once the basic component documentation was in place this became the foundation of the new responsive product and helped us to construct templates, pages and prototypes much more quickly.
As we worked through different parts of the site often the need for new patterns emerged, so we found the need to sometimes reconsider components or create variations of components to give maximum flexibility to the product.
Ticketmaster eventually plan to construct a full online version of this component documentation for TM Pro including how different skinning options behave. This will add further value as the platform evolves and new features are added.
Ticketmaster Pro: A Responsive, Mobile First Design
Using a modular approach allowed us to form basic pages structures and wireframes quickly and aided us to build rapid prototypes for user testing.
In the second case study you can read about how we used the component library as the foundations for the new responsive framework for the TM Pro platform.