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)
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.
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.
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.
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
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.
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.
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.
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.
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.
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