top of page

PATTERNS LIBRARY

THE CHALLENGE:

When we started the mega project of converging all UI interfaces of HPs printers to ‘One UI’, there was a challenge of  maintaining the consistency of the design elements across these products over a period of time. This is where we thought we need a Deign Pattern library, that can help designers and developers reuse the components throughout the system. My role was to define the pattern library with one of my colleague and build a right process for the sustainability.

​

​

OBJECTIVE:
 

The purpose of the HP Printer UI Design Pattern Library is to collect INTERACTION DESIGN complimented by visual design best practices in the form of “Patterns” as applied in the HPs printer UI context, and promote the use of these patterns by fellow designers.

​

 

Some key benefits found through this effort:

​

 

  • Consistent converged UI interactions across printer types

  • This library consists of UI Widgets and Workflow Patterns

  • Repository for Ix and Vx practices in design

  • A pattern library makes maintenance easier

  • Actual Axure RP prototypes available for downloading and integrating with design workflows

 

ROLE: UI Architect

PROCESS AND METHODS TO ACHIEVE THE OBJECTIVE:

What is design pattern library? According to online definition - A pattern library is a collection of user interface design elements. The site UI-Patterns describes these user interface design patterns as: ‘Recurring solutions that solve common design problems.’  Yes, this is what it meant to us when we started  this exercise.

 

Pattern libraries usually emerge within design teams when faced with inconsistency in an existing interface, seek to normalize the UI by discovering and establishing standardized components and interaction patterns and formulating a unified design language. When we started the one UI initiative for the HP printers, we realized that we need build a robust system to maintain all the UI components for the sustainability. If we use some documents to maintain this, over a period of time, it will be scattered across and every designer would start modifying their own way.  To bring everything together as a strong foundation, this effort was much needed. Although this effort is initiated by the design team, at the end it helped the front end developers in a large way!

​

Having a consistent pattern library that everybody works from makes maintenance easier too. It is much easier for a designer to use the existing ready  element rather than reinventing the wheel. They can concentrate on new innovation instead of redefining the current patterns, this is a big time saver and cost beneficial to the organization. Also, when a new developer comes in, they can get up to speed much quicker by looking at the pattern library.

 

We started this effort gathering wide range of UI elements across different HP printer UI and also other touchpoints like mobile, web and  software. Then we started identifying common usable building blocks within all touchpoints. We defined the system components checklist based on the data we gathered.

 

  • Interface screens

  • Global elements

  • Links

  • Navigation

  • Typography

  • Buttons

  • Colors

  • Icons

  • Forms

  • List menus

  • Multimedia Elements

  • Accessibility

  • Motion, transitions and animations

  • Optimization of the content for different display classes

​

DESIGNING PATTERN TEMPLATE
 

When defining a pattern, it is important to detail where and when pattern will be used. According to our system needs we created a template that would clearly explain a component.

This template consists of –

 

  • Applicable for which UI class

  • What type of pattern it is

  • What problem are we going to solve through this pattern

  • When it should be used

  • Detailed behavior

  • Any other variation of the patterns

 

Since the pattern library is also going to act as a functional specification for developers, we had to put lot of thought into defining the template. We asked ourselves with some practical questions that are generally asked by the developers such as error cases, what happens touching on certain items and so on.

 

These kinds of practical questions are important when it comes to implementing patterns. Answering these issues also forces the designer and developer to work closely together to come to an agreement, and prevents the designer just throwing a design over the wall.

DESIGNING A SYSTEM

​

Creating the pattern template was not good enough for the sustainability. Generally, disturbing the template among the designers and  asking them to write patterns and send it back for the review is a tedious task. Instead, if we have a system where one can submit a pattern and all designers can review and provide their comments at the same time would be ideal. Also, this had to be organizational wide system. At the long run, not only designers, this has to be used by copy writers, developers, marketing etc.  

 

With this in mind we developed a website where all the different patterns can be hosted. Also, designers can  write and upload new patterns.

 

Here are few things we considered while designing the library:

 

  • It should be easy to update content

  • It should support collaboration

  • Users should be able to view all the comments and can reply to each of the comments

  • There should be way to give different rights for contributors, editors and administrators

  • It should be easy to customize and expandable for the future

​

​

We went back to the whiteboard for mapping the information architecture for the entire site. We carefully looked at different form elements required for the site and grouped them accordingly. Based on the information architecture, we started drafting different design layouts. After several rounds of discussions and sketches we zeroed on a design which is easy to use and looks elegant. Later, wireframes were created for each of the pages to see how the basic layouts looks like. Low fidelity prototype was created to understand the navigation and for the internal usability testing.

 

After several rounds of refinement, visual design team stared creating the actual layouts for the final website.

PATTERN LIBRARY PROCESS   

 

Finally we needed a robust process for the maintenance of the library. We did setup a pattern committee that would we responsible for maintaining the library. The committee looked at the industry standard for the pattern library process and studied some established process from other companies and created our own process that meets our needs.

THE FINAL RESULT

bottom of page