Urban Outfitters PWA Replatform

The URBN PWA (Progressive Web App) replatform was a project done as a means to implement a true white label site within the company’s brands, a cleaner code, a better responsive site and an overall faster experience for customers, even those with bad or slow internet connection. 

Working alongside the Anthropologie and Free People’s design teams, as well as URBN’s team of UX designers and developers, we established styles, mixins, grids and layouts that would work for the three brands. It was a long process, as this meant having a lot of experimentation to allow each of the brands to keep their style, voice and a site that allows for improved conversion rates.

I created UO’s style guide with existing and modified specs from the current site, compiled live icons and designed new ones where needed and created a digital library for easy access to designers and developers. 

It was an ever-evolving project, as wireframes, prototyping and user testing provided new insights that allowed us to improve the current experience, for all three brands.

The PWA experience was launched worldwide on April 13, 2020. Click here to see the site.

The content of this page is actively being updated as new features are released.


Role: Branding, style guide development, web design, web production, icon design, layout design


Art Direction - Andrew McQuiston

UX Lead - Lauren Schoonover

Creative Direction - James Mackenzie

Executive Creative Direction - Dan Kent

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


 

Header + Navigation

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, 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. Click here to see the complete case study.

Product Detail Page

Being one of the pages with the most traffic on the site, the Product Detail Page (or PDP) was one of the main focus of the replatform. Since the PDP is made up of a lot different components, the page worked as a building block where we experimented with styling, as we built the new site. 

It was designed with a new web grid that was more responsive across different breakpoints, which allowed a bigger product image. Spacing was also key, as one of the main goals was a higher "Add to Bag" button for faster access in smaller screens.

 

Category Page

With the first release, the category page didn't have a lot of alterations, besides new styling with accordions and an improved visual design focused on accessibility constrains.

 

Modals

The "Sign In" modal had a change in layout to provide a better informational hierarchy. Besides a new layout, the modal also has a feature that allows the user to reveal their password in case they want to see what they have typed in the text field.

 

Iconography

With the new platform, it was important to redesign and include new icons that improved the user's shopping experience as well as meeting accessibility standards.

Zoom Icon

Foreground Icon

Filter Icon

Back to Top Icon

Store Icon

Question Icon

Plus Icon

Mobile Menu Icon

 

Style Guide

As part of a system, upkeeping the digital style guide is essential to both designers and developers. The base styles shown below serve as a point of reference and are the architecture of the new mixins created for the PWA Experience.

 

More from Urban Outfitters

Using Format