Tu Global Navigation

Client

Tu.co.uk

DISCIPLINES

UX/UI

Tu Clothing is the largest UK clothes retailer by volume but its digital offerings sit very much within a legacy world. As a result there are multiple opportunities to redefine the user experience based on new and emerging paradigms.

This project looked at the Global Nav which needed to be moved off legacy technology (Hybris - no longer supported) and into the responsive world to support new page builds (PWA tech/Micro services) which will not work with the current build. Early research noted that users felt the Global Navigation was cluttered so a visual clean up was part of this project.


Website: tu.co.uk

Feature hypothesis

Users will be able to find items easier due to a clearer and less cluttered visual hierarchy.

Design Goals

Have no detrimental impact on users ability to use the global navigation.

Create designs that facilitate a responsive build.

Reduce cognitive load.

Exploration

Calling on previous research from Argos, Baymard and The Nielsen Norman Group some UX guardrails were quickly established.

70-80% of our customers browse - clicking through content or using navigation (not using the search function), we wanted to sense check this data with qol testing within the wider office and while it did mostly hold true testing of the current header exposed issues with the search functionality.

Examples of this are search "red" you also get results including "hundred" and search for a "red dress" with "women" filter applied and you get Mens fancy dress costumes.

I also ran a workshop around asks with Tu.co.uk’s content team who manage and update the taxonomy as they had to be considered Stake holders in this project.

Ideation

Using the Tu Design System (based on Atomic principles) as the building blocks various visual alternatives were mocked up exploring variations featuring text + icons and the search field open/closed. The Product Owner had an ambition to create the most minimal global navigation possible (visually) without compromising experience as the current global navigation took up a large amount of vertical real estate pushing the content "below the fold".

Prototype

Three prototypes were made, including one of the current live build (to reduce any chance of disparity in experience related to prototype limitations and/or page loads). Sketch's built in prototyping ability was deemed a suitable for the level of fidelity required to validate the designs (an understanding of the journeys but not any refinement of interaction such as animations).

Testing

Testing was done over a 1 day period with 6 participants in a guerrilla style. Tu has a large office Coventry office with a very mixed demographic and wide range of roles (I avoid Design staff as they would likely have a vested interest and not represent the "average" user).

I asked each participant to rate each prototype using the System Usability Scale as a way to benchmark them against each other as well as specific questions around the understanding of Iconography and Search function discoverability.

Testing results

The test subjects scored the slightly better than the live site and their personal preferences were the prototypes if any. It is rare testing is concrete or predictable with the surprise part of this test being 50% of the subjects not having a clear favourite, or even noticing the differences. This however isn’t necessarily an issue as the goal of the test was to prove the new visual designs produced an at least an equal userbility score to the live navigation while enabling the new tech stack.

Next steps

With no userbility issues raised during the prototype stage the designs have been refined, defined and sized up for dev.

The exploration stage of this project unearthed a user problem that wasn't on our radar - namely the lack of confidence in the search function. While building the new Global Navigation a ticket has been raised to explore the issues around the search function in a view to possible move from our current search engine or enable better product tagging.