Harvey Nichols - Design System

Project introduction

Over the years, Harvey Nichols has expanded its global presence significantly. Initially launching dedicated websites for Hong Kong and the Rest of the World, they have now begun franchising the brand in the Middle East, with Arabic versions of the websites set to launch soon.

However, as different teams worked on their respective websites, inconsistencies started to emerge. Maintaining consistency across all customer-facing touch points is crucial for any brand, especially one like Harvey Nichols, whose customers are international, loyal, and engage both in-store and online. A seamless global digital user experience is essential for such a luxury retailer.

To address this, we began developing a pattern library. Drawing inspiration from three main references—IBM's Carbon Design System, Google's Material Design, and Apple's Human Interface Guidelines—I took the lead in establishing rules and frameworks for our project.

While the project remains ongoing and continually evolving to incorporate new trends, enhance website functionality, and optimise customer journeys, this presentation will focus on laying out the foundational aspects and delving into specific details of our approach.

Click on each of the following elements to navigate through the entire project.
Grids
Spacing
Fonts
Buttons
Iconography

Grids

We use a basic and standard 8px/dp grid scale for our design.
Breakpoints:

Small Screen Width (0px+):
Columns: 4
Mini unit: 8x8px
Padding: 16px

Medium Screen Width (672px+):
Columns: 8
Mini unit: 8x8px
Padding: 16px

Large Screen Width (1056px+):
Columns: 16
Mini unit: 8x8px
Padding: 16px
Margin: 16px

xLarge Screen Width (1312px+):
Columns: 16
Mini unit: 8x8px
Padding: 16px
Margin: 16px

Max Default Freeze (1584px):
Columns: 16
Mini unit: 8x8px
Padding: 16px
Margin: 24px

Spacing / Layout

Each molecule in our design system is based on its own breakpoint, reinforcing design consistency throughout the interface. These breakpoints come with their own set of constraints and rules, resulting in a fluid layout that is customised and optimised for the viewer's viewport.

For instance, a 16x16 space on a mobile device increases to 32x32 when the viewport width reaches 672px, and further expands to 64x64 when the viewport width is 1312px or greater. This scalability ensures that our design remains visually coherent and functional across different screen sizes.

You can see an example of the columns and a molecule in action below, with the scales illustrated on the left-hand side. This dynamic adjustment not only enhances the user experience by providing a seamless transition between devices but also maintains the visual integrity of our design elements, ensuring they appear consistently and appropriately scaled regardless of the viewing context.

Fonts

We have categorized fonts into two main types:
1. Expressive Type Sets: These fonts are not affected by breakpoints and maintain their size regardless of the viewport.
2. Fluid Type Sets: These fonts adjust according to the viewport size, increasing or decreasing in size to provide an optimal reading experience across different devices.

To begin, we utilized industry-standard sizes for Expressive fonts, specifically 12px, 14px, and 16px. This ensures a familiar and accessible baseline for text that remains consistent across various devices and breakpoints.

For Fluid Type Sets, I have designed a comprehensive range of styles to cater to diverse content needs:
- Paragraphs: 2 distinct styles that ensure readability and adaptability.
- Quotes: 2 styles that enhance the presentation of quoted text.
- Headings: 21 styles, offering users a broad selection to express their content creatively while maintaining a cohesive and consistent look throughout our digital estate.

This extensive range allows end users to be expressive with their content, giving them the flexibility to choose the best typographic style for their needs without sacrificing consistency and readability on our platform.

Buttons

A Call to Action (CTA) is considered a molecule for a simple reason: it consists of a body copy plus an URL (action) and a shape beneath it, and sometimes it can include an icon as well. Just as a molecule is composed of atoms, a CTA is made up of these fundamental elements.

Being a functional element, the CTA needs to be presented in various states: standard, hovered, pressed, and disabled. These states ensure that users receive appropriate feedback during interaction.

CTAs must be immediately recognisable to users to guide them effectively through their journey. Utilising an industry-recognised pattern, we change the cursor to indicate that the CTA is clickable, enhancing usability.

The screenshot below demonstrates several examples of CTAs designed for both light and dark modes, categorised into Primary and Secondary actions. As with all molecules in this pattern library, CTA sizes must adjust according to the viewport’s width. We will set a maximum width and a character limit to prevent excessively long and user-unfriendly CTAs.

This approach ensures that CTAs are both functional and aesthetically pleasing across different devices and screen sizes, maintaining a consistent user experience.

Iconography

Guidelines for the icon library that I’ve followed:

1. Outlined Style: Each icon is designed with a clean, outlined style to ensure consistency and clarity across all icons.
2. Stroke Width: The standard stroke width for the icons is set at 1.2px. For specific exceptions, a narrower 0.6px stroke width is used to maintain visual balance.
3. Line Angles: Icons predominantly feature lines at 0, 45, and 90 degrees. While most icons adhere to these angles, a few exceptions were made for design coherence.
4. Light and Dark Styles: Each icon is designed in both light and dark styles to ensure versatility and readability in different themes and backgrounds.
5. Artboard Size: Each icon is created on a 16x16 artboard, ensuring uniformity in size and alignment across the entire library.
6. Total Icons Created: A total of 52 icons were created, covering a comprehensive range of functionalities and ensuring a cohesive visual language throughout the project.

These guidelines were meticulously followed to create a cohesive and visually appealing icon library, ensuring usability and consistency across different platforms and user interfaces. The icons were designed to be versatile and adaptable, providing a seamless experience in both light and dark themes.      

Conclusion

This project has been an excellent exercise in reinforcing our brand and creating consistency across our digital presence. Since its inception, we have developed a comprehensive Web UI Library containing thousands of reusable components. This library has significantly reduced development time, saving countless hours and ensuring consistency across our website's codebase and appearance.

We have established processes where the team collaboratively decides which components to add to the library and which to retire. This dynamic approach ensures that our library and toolkit continuously evolve to meet current needs.

The project has fostered unity among various departments. The design, branding, development, and UX teams all rely on the library as a central resource. Many elements created for the library have been adopted by the design team for use in print and merchandising, establishing a common ground and language that everyone understands. This initiative has not only streamlined our workflows but also strengthened inter-departmental collaboration, reinforcing a cohesive brand identity.

A few elevation studies attached underneath.