Mobile Website

Nordstrom • 2013 – 2014

Moovweb_Hero.jpg
 

Introduction

After establishing the Pattern Library work for our desktop site, I was handed my first big project at Nordstrom – the migration of our mobile website to its new platform. The industry was seeing a huge shift as consumers were becoming increasingly comfortable shopping (and making purchases!) on their mobile devices, and it was high priority for Nordstrom to deliver great experiences no matter the screen size.

 

The Problem

Nordstrom's mobile web platform was no longer able to scale and meet the rapid growth of business and demand from our customers. We were maintaining two separate architectures for our desktop and mobile websites, effectively doubling the resources needed to support both sites. 

Therefore, our mobile website tended to be an afterthought – often times neglected entirely – causing fragmentation within the architecture, features, and design.

 

The Approach

We partnered with a third party vendor, Moovweb, to migrate our platform and launch features on mobile in parity with desktop through a process called "Responsive Delivery". This process allowed us to leverage our existing backend and create a new, modern front-end experience for mobile web. 

 
 

Research

We kicked off the project by brainstorming and identifying several core weaknesses of our existing mobile website:

 

Image Size & Quality

Our old category results pages displayed low-res images in a three column layout. The small, grainy images were aggravating to shop on, resulting in unnecessary back and forth between the category and product detail pages. 

The image shows a before and after of the improvement.

Test.jpg
 

Missing Landing Pages

Since our mobile platform tended to be an afterthought, it lacked pages and features available on our desktop counterpart. This divide resulted in wasted advertising dollars on Nordstrom's end as well as disconnected experiences for our customer.

 

Outdated & Inconsistent Design

Outdated and inconsistent UI elements hurt our brand image, increased the learning curve for new customers, and diminished existing customers' efficiency across the site.

 

Establishing Design Patterns

Our second phase of the project was identifying, designing, and documenting patterns and styles for mobile web. Defining patterns established consistent, intuitive experiences for the customer while allowing us to work with focus and efficiency.

Each pattern included an overview, assets, redlines, and usage guidelines which we made available for anyone designing in our mobile web space. 

 
 
 

4

Creating Page Layouts


Next up on our list was creating page layouts. Using the patterns as building blocks, we started off with designing the pages for the primary customer shopping path. These pages included the home page, navigation, landing pages, category pages, product page, shopping bag, and checkout. 

One of the biggest challenges we faced was designing a new structure for the navigation. Moovweb transformed each desktop page on a page-per-page basis, which meant that we could no longer display the entire navigation tree within the same menu. In short, we needed to come up with a new solution for the left-navigation equivalent on desktop.

After a round of sketching, we jumped into mocking up page templates. Over the course of the next few months we refined our designs through usability testing and wall reviews.

 
 
 

5

Testing


Over the course of the project, we ran a total of 4 usability studies, with 23 participants in one-on-one moderated sessions.

The in-house study objectives were as follows:

  • Do they know how to drill into categories and sub-categories? 
  • Do they know how to switch from one sub-category to another?
  • Do they understand how to use the filter and sort options?

In the first study, it quickly became clear that the discoverability of the local navigation was a severe issue as participants struggled to find the entry point. Following the study, we entered into a cycle of researching, refining, and testing until we landed on a successful solution.

 
 
 

6

Launch


We met our deadline and launched our new mobile site in October, just in time for the holiday season.

 

Landing Pages

 

Navigation

Navigation_v1.jpg
 

SHOP PAGES

ShopPages.jpg
 
 

UX GUIDELINES

Our website was supported and updated by a large number of people across many different teams. In order to help those people understand how each desktop page was 'translated' to its mobile counterpart, I worked together with site operation and marketing teams to put together the following guidelines document: 

 
 
 

7

Outcome


After our launch, we held our breath for the holiday season. However, we were blown away by the numbers. In the next month, we saw massive (more than double) year over year increases in demand on Thanksgiving Day.

Since launch, we've improved customer satisfaction scores in all dimensions where applicable (navigation, site performance, product images, etc.), and we've accelerated the KPI growth projected on the platform.