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.
