Harrods

(March ‘17 - March ‘19)

Role: UX Designer

Steering our product into a balance between user needs and business goals, my work ranged from large strategic projects to quick test-and-learn conversion optimisation changes across the whole site, from browse to checkout. I worked closely with product owners and teams of developers to produce solutions that satisfied stakeholder needs and could be delivered efficiently.

Harrods Digital design system

The project
There were three main reasons for revamping our UI and building a digital design system to house everything:

1. To do a better job of showcasing our brand   and its values
2 To remove UI inconsistencies that had snuck in under the radar
3. To unify all digital products across our teams (Store/.com/App)

The problems

Our app and website were using different UI patterns and iconography. We didn’t have a centralised area where different design teams could go to see which elements already existed and what needed to be designed from scratch and so disparities occurred between platforms.

When modules are constantly being created and modified by a team of 12 designers each focusing on specific problems, it’s easy for small UI inconsistencies to creep in undetected. This causes user experience to suffer through increasing cognitive strain and decreasing learnability.

The solution

As a team we promoted a relatively flat structure, where designers were encouraged to work autonomously and focus on problems that they personally wanted to solve. We didn't want to change this part of our culture so it was clear we needed to improve the processes and frameworks to better align our teams.

To solve these issues we developed an atomic design system consisting of atoms/molecules/modules/ templates. We delivered this as a 10 page Sketch document that is updated weekly and owned by 3 UX Designers.

The impact

1. Increased productivity and collaboration.
2. Improved the quality, consistency and accessibility.
3. Strengthened the design lead approach by the business.
4. It's made it easier to work with third parties and introduce new platforms.

Product Filters redesign

Research - defining the problems

Usability and analytics reviews identified the following flaws in our mobile filters:

1. Lack of feedback detailing which filters had been applied
2. Lack of affordance
3. High cognitive strain when using filters (slow task completion)
4. Difficulty amending searches and recovering from errors
Confusing visual hierarchy

The current filters
Behind the UI

I worked closely with trade managers and merchandisers to review product attributes and values.
We then formulated a project plan for cleaning up the data.
I gave presentations on UX to educate these teams on how the decisions they make during product set up effected the way in which the user could find products on the site.
We then ran a session prioritising these attributes and values, as we didn't want to overload the user with information by having filters that weren't useful.

Sketching and wireframing
Priority features for the new design

1. Clearly indicate when filters are applied.
2. Display the number of results per page.
3. Improve the entry point by displaying filters at top of PLP (product list page).
4. Improve how attributes are visually presented and ordered. eg. colour swatches in order of shade.
5. Add a search field to the brands list.

Adding some motion...

I then worked up the motion design for the interactions and produced a specification for the developers to follow. The goal for the transitions here was to feel soft and sleek giving the user a calm sense of control.

Food Halls

The project

In line with the completed refurbishment of the Fresh Market Hall in store, we were tasked with transforming the way Harrods' Food Halls were communicated online and asked to create a discovery platform, which brings to life the full customer experience.

The goals

To promote the Harrods' chefs and experts such as the tea tailor and master coffee roaster.
To highlight the provenance stories showing that the Harrods' buyers have travelled the world to bring customers the best of the best.
To showcase in-store services like bespoke hamper orders, personalised cakes, wine cellar management and personalised sourdough.
To highlight our seasonality.

Other projects

I can also provide work samples for the following:

1. Information architecture redesign
2. Localisation for China
3. Checkout optimisations & Alipay integration
4. Food halls redevelopment project
5. Self checkout for food halls
6. Brand page template redesign
7. Product display page conversion optimisation strategy

©2020 Jack Mawhinney Design. All rights reserved. 🤓