Urban Outfitters Header Redesign

One of the biggest initiatives within the PWA project, was the redesign of our header and navigation. Besides having the goal of creating a true white-label header among the three URBN brands, we also wanted to accomplish a more responsive, cleaner and accessible navigation for our customers, that was achieved after research and user testing of the header across breakpoints.

My role involved ideating and creating wireframes based on research and brand goals. As the project developed, I worked alongside the Anthropologie and Free People's design team to establish a direction that fulfilled all the brands' requirements. 

Based on this, we came up with a modular system to address the main shopping path, cart and utility links. Together, we collaborated with UX designers and developers to build the new header, as well as to review information collected through user testing and implement any changes found to improve the design.

Implementation was divided into two. The first part of the project (the header and mobile navigation) was released in August 2020, while the rest of the project is scheduled to be released early 2021. See the project live here.

Role: Web design, wireframe development, web production, icon design, VQA, research


Art Direction - Andrew McQuiston

UX Designers - Lauren Schoonover, Sujan Khadgi

Product Manager - Jessica Kroeber

Creative Direction - James Mackenzie

In collaboration with URBN's UX design teams, Anthropologie's and Free People's UI teams and URBN's development team.

Desktop

One of the more radical changes include the addition of a utility bar, where brand links, service message and utility links live. This was done to improve the UX of the header and separate the main shopping path from secondary actions. All of these components are fully customizable per brand and per local, giving full flexibility to change assets and links to support seasonal campaigns and shopping experiences.

The navigation bar was also cleaned up to only include the purest navigation path: home, categories, search and shopping cart. This allows for a better user experience and to have less distractions within the shopping path. It’s also the only part of the header that stays once the user scrolls.

Example of customization for US website (Nov, 2020).

Example of customization for UK website (Nov, 2020).

Mobile

The mobile navigation bar also had big improvements. The brand logo was shifted to the left to have a more responsive header and the hamburger menu was pushed to the right, for better accessibility. This update allowed for a cleaner header that was less intrusive and improved the UX.


The expanded navigation features the same components as the header in desktop, while in different order. "My account" was moved up for easier access. The brand and utility links, live at the bottom to keep the main shopping path as a priority.


After UX research was done in our previous navigation, we decided to nix the double tap area on our mobile categories. Previously, our L1 categories containers had two different hit areas: one took you to the full category and the second one opened the list of L2 categories. To help fix this issue, we created a push and dropdown approach to eliminate that double tap area, and added a “Shop All” category as a replacement.

 

Previous Header

 

More from Urban Outfitters

Using Format