HN Pattern Library

Project introduction

Over the years Harvey Nichols has increased its global presence, firstly with dedicated Hong Kong Website, next with the Rest Of World website and now they have started franchising the brand in the Middle East with Arabic versions of the websites soon to be released.

With so many individuals working on their versions of the website inconsistencies started to creep in. With any brand it is important that all customer facing touch points are consistent however I would say even more so with a Harvey Nichols customer. The Harvey Nichols customer is international, they are loyal, they will travel from country to country, they will shop instore and online. Just like branding it was essential for this luxury retailer to have consistent global digital user experience.

So we started building our pattern library.
Over the years I have been influenced and use three main references like a bible: IBM (with its Carbon Design System), Google (Material Design) and Apple (Human guidelines).

I Was the lead on this project so I went about establishing our rules and building our frame work.
The project is ongoing and always evolving whilst we keep up with trends, improve website functionality and optimise customer journeys but in this presentation I will take you through the foundations and go into a little more details about:
Grids
Spacing
Fonts
Buttons
Iconography

Grids

In terms of Grids, we use a basic and standard 8px/dp scale.

Breakpoints:
Small Screen Width at 0px+ Columns: 4 / Mini unit: 8x8px / Padding: 16px
Medium Screen Width at 672px+ Columns: 8 / Mini unit: 8x8px / Padding: 16px
Large Screen Width at 1056px+ Columns: 16 / Mini unit: 8x8px / Padding: 16px / Margin: 16px
xLarge Screen Width at 1312px+ Columns: 16 / Mini unit: 8x8px / Padding: 16px / Margin: 16px
Max Default Freeze is at 1584px Columns: 16 / Mini unit: 8x8px / Padding: 16px / Margin: 24px

Spacing / Layout

As every molecule is based on its own breakpoint, it reinforces design consistency.

Each breakpoint has it’s own set of constrains and rules, which creates a fluid layout, customised and optimised to the viewers viewport.

For example, a 16x16 space reflected on a mobile device, it will increase to a 32x32 when the viewport on the device reaches 672px width, and it will be increased again to a 64x64 when the width in the viewport’s is equal to or greater than 1312px.

You can see an example of the columns and a molecule in action underneath with the scales on the left hand side.

Fonts

With fonts we have categorised them as:
- Expressive Type Sets (those which are not affected by breakpoints)
- Fluid Type Sets (which will be affected by the viewport size and as a consequence will decrease or increase following device’s size)

To start we used industry standard for Expressive font sizes (12, 14 and 16px).

For Fluid Type Sets I’ve designed:
- 2 Styles for Paragraphs
- 2 Styles for Quotes
- 21 Styles for Headings (This gives end users the opportunity to select from a big range and be expressive with their content whilst maintaining consistency on our digital estate)

Buttons

A CTA is considered as a molecule for a simple reason, there is a body copy/url (action) and a shape underneath, also sometimes can include an icon as well. So, as a molecule is compounded by atoms (elements mentioned above).
Being a functional element, the CTA needs to present in different states, standard state, hovered, pressed and disabled.

Call to Actions must be obvious enough to a user to help guide them through their journey. Also using an industry recognised pattern we change the cursor to indicate to a user that the CTA can be clicked/pressed.

The screenshot underneath reflects few examples designed on light and dark mode and breaking down by Primary and Secondary action. Sizes, as every single molecule on this pattern library, CTAs have to increase or decrease based on the viewport’s width. We will set a max-width and a character limit avoiding extremely long and not user friendly sizes.

Iconography

Guidelines for the icon library that I’ve followed:

- Outlined style
- 1.2px stroke width (0.6 stroke on a few exceptions)
- 0, 45 and 90 degrees lines (a few exceptions excluded)
- Light and dark style
- 16x16 artboard per icon
- 52 icons created

Conclusion

This has been an excellent exercise in reinforcing brand and creating consistency. Since the inception of this project we now have a Web UI Library and have created thousands of re-usable components which has saved the developers hours and hours of development time and introduced consistency across the websites code base and it’s appearance.

We now have processes in place where we discuss as a team what components need adding to the library and which components will become obsolete. We are always evolving our library and tool kit.

It has united departments, the design team, the branding team, the development team and the UX team all take lead from the library and many of the elements we have created have been adopted in by the design team and for print and merchandising. It has created a common ground and language that we all understand.

A few elevation studies attached underneath.