Urban Outfitters: Responsive Site

Lead designer assigned to the Urban Outfitters’ first responsive site design. Collaborated closely with UX and Dev teams to ensure a successful site launch within the technical requirements and brand creative.

Responsive_PDP_Mock

When we started this responsive site project, Urban Outfitters was in the process of rebranding itself by elevating the quality of products and its aesthetics to be know as a more refined brand. As part of this rebranding strategy, I was tasked to create a new style guide for redesigning the site, while ensuring a simple, intuitive, and consistent experience throughout.

Some of the main challenges we focused on during this project:

  • Translate the elevated brand experience through UI/UX design
  • Refine overall UI/UX to create a better shopping experience
  • Improve conversion rates
  • Introduce user-generated content in the shopping experience
  • First project working within an Agile workflow between UX, UI, and Dev

Homepage and Navigation:

Challenge:

  • Large assortment of products which caused an overcrowded navigation
  • Customers were diving straight into the category pages and were missing key marketing messages

Solution:

  • By directing customers to click into the level 1 category (Women’s, Men’s, Apartments, etc.) to see level 2 and 3 categories, it enabled us to send customers to the Gateways pages where they discovered our marketing messages.
  • Breakout Nav enabled customers to more easily scan the taxonomy and to dive into the sub-category level from the navigation. This allowed customers to more easily navigate and not be overwhelmed by all of the options.

 

HPG_1
HPG_3.jpg

Conclusion:

  • With the new navigation, there was an increase in engagement with our marketing messages, as well as the number of categories viewed per session.

Product Detail Page

Challenge:

  • Increase conversion
  • Showcase newly stylized product view/details to inspire customers
  • Update page layout to better communicate the information hierarchy
  • Increase customer engagement and showcase the lifestyle brand

Solution:

  • By default we presented the customers with all 6 product detail images enabling a better viewing experience and page load times.
  • Integration of user-generated content offered customers a channel to connect with other customers and to view the product in the real world.
  • Increased prominence of the recommended products.
  • Clean UI, allowing photography to shine.

 

PDP_DT

PDP_DT_ZoomPDP_M_Mock

Conclusion:

  • Conversion rates increased while ATB rates went down with the update. We believe this was due to better decision-making by the customers given the increased visibility into the product.

Category Page

Page layout was updated by a larger product image using a simple UI that allowed  customers to more easily focus on the products. The additional features to toggle detail on/off, and to show/hide filter offered more flexibility for the merchandiser to curate the page based on their needs.

Category_DT_mock

Cat_M_Mock

UX Designer: Leslie Zacharkow
UX Director: Mike Pitone
Art Director: Namik Schwarz
Creative Director: Matt Owen