9 Years being part of Harvey Nichols

Introduction

Harvey Nichols is a luxury department store chain originally founded in 1831 in London, UK. Specialising in high-end fashion, beauty products, food, and lifestyle items, Harvey Nichols is known for its curated selection of prestigious brands and upscale shopping experience. The store has expanded internationally and is esteemed for its stylish stores.

I joined Harvey Nichols in September 2015 and worked there until June 2024. Starting from the very bottom, designing banners for campaigns, I steadily worked my way up to conceptualising, creating, and implementing some of the biggest projects I had dreamed of. My journey at Harvey Nichols has been instrumental in my growth, both as a professional and as a person. Over nearly nine years, I developed my skills and expertise. I am grateful and proud of this journey, which has fuelled my passion for UI and UX design.

In my role, I had the opportunity to collaborate with diverse teams across departments, refining my ability to translate ideas into compelling visual experiences. This experience not only honed my technical skills in design software and project management but also deepened my understanding of user behavior and interaction.

Throughout my time at Harvey Nichols, I consistently sought new challenges, from enhancing the user interface of our e-commerce platform to spearheading innovative digital campaigns. Each project taught me valuable lessons and shaped my approach to design, emphasizing user-centricity and aesthetic refinement.

In the following sections, I will explain and showcase a variety of small to medium projects I completed during my nearly nine years as a designer at Harvey Nichols. Please note that while the process for each project is based on user-centered design principles, these principles may not be fully detailed in the project descriptions.

Restaurant pages

Within this project, I created a variety of responsive modules based on different requirements. These modules were used to create various templates for restaurants (the ones that users find in Harvey Nichols stores).

The examples shared below include:

Module 1: A common hero image at the top containing the restaurant's name, the store it is part of, and its city location. Below this is a CTA encouraging users to book a table.
Module 2: Following a short introduction about the restaurant, users can see its location, highlighted opening times, and a small slider with images related to the place. There is also a CTA linked to Google Maps, facilitating an easy transition between tasks for the user.
Module 3: This module shows how users can book a table. Given the variety of booking methods, we considered different values to maintain consistency.
Module 4: This is where users can find the menus. It can be a simple menu (as seen in the Deli Bar example below) or have up to three different options (as in the Burger & Lobster example below).
Module 5: The private hire module, which is available depending on the venue.
Module 6: Similar to the previous module, this one shows the Instagram feed and is available depending on the venue as well.

Product Availability Feature

The Product Availability feature allows users to easily determine the availability of items on our website. With this feature, users can check if a product is in stock at their preferred store and see the quantity of items available.

Key benefits of the feature include:

Store Availability: Users can see if the item is available at their chosen store, ensuring they can find what they need quickly and conveniently.
Stock Levels: Users can view the number of items available, helping them make informed purchasing decisions.

This feature not only enhances user satisfaction by providing real-time stock information but also encourages the 'Collect in Store' delivery method. By focusing on user wellbeing and convenience, we aim to create a seamless shopping experience that meets the needs of our customers.

In the screenshot attached below, I first identified the users in different scenarios. Based on this identification, I then demonstrated the various states step by step for each scenario, segmented by user roles. This feature was designed and tested on the most common mobile resolutions as well as the smallest ones, ensuring a smooth experience and avoiding frustrations for all user groups, including minority groups.
And underneath, a quick competitor analysis followed by a recorded prototype.

Click on the image for details.

Navigation Update

Over the years, user needs and behaviours have evolved, prompting the necessity for a navigation update on the Harvey Nichols website. This update was essential for several reasons:

Evolving User Behaviour: As users interact with our website in new ways, it is crucial to adapt our navigation to meet their changing expectations and habits.
Consistency Across Devices: Ensuring a seamless and consistent navigation experience across all devices—mobile, tablet, and desktop—regardless of screen size.
Brand Refresh: Aligning the website navigation with our recent brand refresh to maintain a cohesive and modern brand identity.
Updated Website Structure: Reflecting changes in the website's internal structure, requiring corresponding updates in navigation to maintain usability and accessibility.

By addressing these key areas, we have improved the overall user experience, making it easier for users to find what they are looking for, no matter how they access our site.

Click on the image for details.

In the images shared below, we can see two studies:
On the left: A study where a promotional ticker is tested on the new header across the smallest mobile device, the most common mobile device, and a tablet.
On the right: A study showing the interaction of the opened burger menu based on the three different user roles that visit the website (Guest user, Registered user, and Registered user who is a Loyalty program member). This interaction was also tested on the same range of devices as the promotional ticker.

Click on the images for details.

The image attached below shows the Wishlist action, which is part of the main header, with the heart icon placed on the left-hand side.

In terms of sidebar dimensions, I maintained:
75% width for mobile devices
50% width for tablets
25% width for desktop devices

We considered two different scenarios: a sidebar with products added and one without.

The CTA at the bottom varies based on whether products have been added:
If products are added (assuming the user is a registered customer), the CTA is a 'View All' link to the Wishlist page.
If no products are added, the CTA is a 'Shop New In' link to the product listing pages featuring the latest products added to the website.

Click on the image for details.

The search screen functionality depends on the search engine used by your website. In this case, the suggestions will be plain, simple, and straightforward.

The major decision was to implement the search screen as a full popup on mobile devices (including tablets), while on desktop, it remains as a text field. The reasoning behind this decision is straightforward: mobile devices have limited space due to the on-screen keyboard, so a full popup helps avoid distractions for the user.

Click on the image for details.

Below is the Mini Shopping Bag feature. The shopping cart icon is placed on the right side of the header, and it opens a full-height sidebar that maintains the same width rules as the Wishlist.

There are two scenarios for the Mini Shopping Bag:Product Added and No Products.

The functionality of the CTAs and hyperlinks is crucial, as they must offer solutions that meet user needs. When no products are added to the Mini Shopping Bag, the user will find 'Shop New In' as the primary action CTA and 'View My Saved Items' as the secondary action. If the user is not registered, they will be directed to the register/login page.
When products are added, the user must be able to remove them, and the primary action will be 'Checkout' for obvious reasons.

Click on the image for details.

The recorded prototype attached underneath was built with a clear purpose, ensuring that the Bezier curves for the transitions of the main four user actions follow the same path and maintain consistency.

User Testing Group

I created a 'User Testing Group' at Harvey Nichols to address the challenges posed by limited budgets for paid user testing tools. Recognising the importance of user feedback in refining our products, I devised a strategy to build a reliable group of users who were available and interested in participating in testing activities. This approach allowed us to gather valuable insights without incurring significant costs.

The User Testing Group consisted of 72 dedicated individuals who played a crucial role in our design process. I regularly sent A/B testing proposals via email, seeking their input on different design variations. Additionally, I often reached out to them for feedback on new features and conducted research to understand their needs and preferences better.

This group provided a steady stream of actionable feedback, enabling us to make informed design decisions and continually improve the user experience on our website and apps. Their contributions were instrumental in ensuring that our designs met the expectations of our users and aligned with the Harvey Nichols brand values.

Face ID Login

Working closely with the development team, we implemented Face ID login into the Harvey Nichols website. Below is a quick prototype demonstrating what users will see when they open the native app on their mobile devices.

We utilized Lottie files for animations, marking our first-time use of this technology. This involved translating After Effects (AE) files into JSON code files.

Golden Ratio PDP Application

Before transitioning the navigation to a white colour scheme, I undertook the task of updating every single Product Details Page (PDP). Each variant of these pages has its own unique limitations and features.

As a passionate advocate of the Golden Ratio (or Fibonacci sequence), I applied its principles to the Product Details Pages (PDPs), resulting in a design that I found quite effective.

Below, you'll find screenshots showcasing examples of these applied designs.

OXO Restaurant

Oxo restaurant is celebrated as one of the most stylish and iconic dining establishments in London. I had the exciting opportunity to lead the design process for its completely revamped website, ensuring that every aspect of the user experience reflected the restaurant's sophisticated ambiance and culinary excellence.

From conceptualisation to implementation, I focused on creating a seamless and visually captivating digital experience that aligns with Oxo restaurant's upscale brand image. The website redesign aimed to enhance user engagement, streamline navigation, and showcase the restaurant's unique atmosphere and menu offerings.

I'm pleased to share a selection of screenshots below, providing a glimpse into the design elements and user interface enhancements that were incorporated:

Editorial Pages

Within the 'Editorial Pages project,' I developed a variety of responsive modules tailored to different content needs. These modules were designed to create engaging templates for editorial sections such as men's fashion, women's fashion, beauty, and more, featured on the Harvey Nichols website.

Each module was meticulously designed to elevate the editorial experience, blending visual appeal with intuitive navigation to captivate users and promote interaction with the curated content.

Progressive Web App (PWA)

Before releasing the current native app, Harvey Nichols initially launched a Progressive Web App (PWA), which stands for Progressive Web Application. A PWA is a type of web application that uses modern web technologies to deliver an app-like experience to users. It combines the benefits of both web and mobile apps, offering features such as offline capabilities, push notifications, and faster loading times.

In preparation for the PWA launch, I was involved in creating various components and features to ensure a seamless user experience across different devices and platforms. This included designing responsive layouts, optimising performance, and integrating functionalities like offline caching and push notifications.

Additionally, as part of our strategy to leverage PWA technology effectively, Harvey Nichols organised workshops with Google at their office location in St. Pancras. These workshops were aimed at deepening our understanding of PWA best practices, optimising performance metrics, and implementing advanced features to enhance user engagement and retention.

Overall, our collaboration with Google and the development of the PWA marked a significant step towards providing a robust and user-friendly digital shopping experience for Harvey Nichols customers, bridging the gap between web and native app functionalities.

OXO BOX (Food to Go)

The OXO Box (Food to Go) initiative was launched during a challenging period amidst the COVID-19 pandemic when many businesses, including Harvey Nichols stores and Oxo restaurant, were temporarily closed. Despite these circumstances, our online operations remained active, prompting the creation of the OXO Box project.

This initiative offered two primary journeys for users:
Collection at Oxo Restaurant: Users could purchase a curated box of food items online and collect it at Oxo restaurant once restrictions allowed. This option provided a convenient way for customers to enjoy Oxo's culinary offerings from the comfort of their homes.
Delivery to Desired Address: Alternatively, users could opt to have the OXO Box delivered directly to their chosen address, ensuring accessibility for those unable to collect in person.

A key feature of both journeys was the option for users to add an extra box dedicated to supporting the NHS, highlighting our commitment to community support during the pandemic.

In conjunction with the launch, we developed a comprehensive marketing campaign to promote the OXO Box initiative. This campaign aimed to raise awareness, drive engagement, and emphasise our dedication to providing quality food options while contributing to essential healthcare efforts.

Overall, the OXO Box initiative not only addressed the challenges posed by COVID-19 but also underscored our commitment to innovation, community support, and maintaining a meaningful connection with our customers during uncertain times.

Stores Reopening

Amidst the challenges posed by COVID-19, Harvey Nichols embarked on the Stores Reopening project with a focus on ensuring a safe and welcoming environment for our customers. Central to this initiative was the implementation of rigorous sanitary measures across all stores.

As part of the reopening strategy, we introduced a booking system for store visits to manage capacity and maintain social distancing protocols. This allowed customers to schedule their visits in advance, ensuring a seamless and controlled shopping experience.

To communicate these updates effectively, we launched a dedicated Landing Page on our website. This page served as a hub for information on store reopening schedules, safety guidelines, and booking procedures, providing customers with clear and concise information before their visit.

Our commitment to health and safety extended beyond physical measures; it encompassed a comprehensive marketing campaign to reassure customers of our dedication to their well-being. This campaign emphasized our adherence to sanitary guidelines and promoted the new booking system to encourage safe shopping practices.

By prioritizing customer safety and communication during this challenging period, Harvey Nichols aimed to foster a secure and enjoyable shopping environment while navigating the complexities of the COVID-19 pandemic.

Rewards Program

Introducing the new Rewards program at Harvey Nichols was a transformative experience aimed at delivering unparalleled value and personalisation to our customers. As the lead designer, I spearheaded the design aspects of this initiative, ensuring that every interaction with the program was intuitive, engaging, and tailored to each user’s preferences.

To enhance convenience and accessibility, we introduced functionalities such as the Rewards card on mobile wallets and the ability to scan receipts for points accumulation. These features streamlined the user experience, allowing seamless integration into everyday shopping routines.

Throughout the development and implementation phases, our focus remained on creating a personalised journey that resonated with each customer. We leveraged user feedback and data insights to continuously refine and optimise the program, ensuring that it evolved in response to changing customer needs and preferences.

Overall, the new Rewards program represented a significant advancement in customer engagement and satisfaction at Harvey Nichols. By combining choice, cash rewards, and personalized experiences, we aimed to elevate loyalty programs to new heights and foster lasting connections with our valued customers.

Conclusion

Over the past nine years at Harvey Nichols, I've led and contributed to a wide range of key projects, driving innovation and enhancing user experiences across various platforms. From designing responsive modules and updating website navigation to implementing a personalised Rewards Program and launching the OXO Box initiative during COVID-19, my role has been pivotal. Collaborating with teams and stakeholders, I have consistently delivered high-quality, user-centered designs that align with Harvey Nichols' brand and strategic goals, showcasing my leadership and expertise in UX/UI design.

Screenshot attached below containing the different templates needed for a Product Details Page (PDP) update