ANDREW TRICKETT

IHS Pattern Library

Client
IHS Global Inc.
Project
Aerospace, Defence & Security and Energy Technical Products
My Role
Research
Site Audit
Design
Prototypes
Front-end Coding
.NET implementation

The Brief
When IHS acquired Jane’s Information Group, they also acquired their large portfolio of products, each with their own subscription site. Due to technical debt and legacy code, the design of these sites were inconsistent and gave an unsatisfying user experience. It became obvious that the site needed a unifying design pattern to improve design and UX. A change in the coding method to .NET MVC framework gave the opportunity to also change the overall design.

My task was to research, design, code and implement the new pattern library, keep the library up to date with new elements, icons and styles, and support any application built with the new library.

The Process
The pattern library needed to be in place quickly for the developers to start using on the new MVC pages. I started with a full site audit to gather all the existing patterns and elements used throughout the site. This was then paired down to remove duplicate or out of date patterns. Once the elements were identified, I then created prototypes based on the corporate colours.

Our users were mainly government and military customers, some of which were unable to upgrade their browsers, so the site had to be usable on IE7 and above. This meant the grid layout system had to work with all box models. I resolved this with separate IE versions based on the Pure CSS framework.

The some of the elements of the pattern library were loosely based on Bootstrap a few of the developers were familiar with the syntax. The elements were optimised and modified to meet the IHS style guide. The elements all had code references so the developers could directly cut and paste the code in to their pages with minimal editing.

The current site had a minimum width of about 1200px, meaning a poor user experience on tablet and mobile so the new pages needed to be responsive. I used media queries to make sure all page layouts and elements were usable down to phone size. Example pages were created with typical elements to show use cases to developers and stakeholders.

All the patterns were put in pages hosted on the development site so all the developers had access to it. The pages referenced the production css and js to make sure they were always up to date and any reflected changes. This was also a good debugging tool as any changes made by a developer to the code would show up on the living pattern library.

The Result
The new pattern library was quickly picked up by the Aerospace and Defence developers and was used extensively as a framework for new sites and applications. The new pages were responsive and lighter in performance. Usability in the site increased as all elements were built to give the user instant feedback, making the site feel faster and giving a better user experience.

Initial user testing and feedback on the sites using the pattern library were positive and in the yearly customer survey results, satisfaction with the User Interface grew.

I continued to maintain the pattern library, adding new styles, elements and icons as the pages needed them. I also implemented the new styles directly on to MVC applications after the developer had coded the bare-bones framework.

After the success in Aerospace and Defence, the pattern library was rolled out in other product departments of IHS.