Nordstrom Rack & Hautelook Mobile ecommerce

nordstromrack.com    •    hautelook.com


Nordstrom Rack, an Internet Retailer 500, came to Mobify in need of a custom tailored mobile experience for their customers.

As an Interaction Designer at Mobify, my role on this project was to take ownership from initial kickoff and client meetings all the way to committing the last remaining bug fixes to be merged with production.

This included, but was not limited to: research, documentation, wireframes, prototypes, user testing, building design systems, UI design, client presentations, site/project set up, writing lots-and-lots of CSS, some basic templating, the building of reusable components, partials and layouts.

It was a blast working on an outstanding team within Mobify. We were made up of a rockstar PM, two engineers, a UI Developer a Designer (myself) and QA Engineer. Together we managed to build two outstanding mobile sites in under 3 months to launch before the infamous Black Friday deadline.

Combined stats for both Nordstrom Rack and Hautelook git repos.

Combined stats for both Nordstrom Rack and Hautelook git repos.


Communication

Communication was key to making a project of this scale successful. Early on in the project, we utilized InVision to redbox and track discussions about the pinch points and opportunities around the existing desktop site.

Screen grab from our Invision App UI conversations.

Screen grab from our Invision App UI conversations.


Nordstrom Rack Desktop Navigation with site-to-site tabs.

Nordstrom Rack Desktop Navigation with site-to-site tabs.

IA & Navigation

Early exploration began around the site’s navigation. The primary and utility navigation was fairly straight forward but the tabbed navigation linking the two sites together was an interesting challenge.

When wireframing began, we had a pretty good idea of our approach thanks to collaboration with the client and some light card-sorting and redboxing.

During the production of the wireframes, I picked up a good trick from my friend Ryan Frederick to start using Comic Sans. While some of you may be yelling “What? Comic Sans? Blasphemy!” keep in mind that wireframes are not for presentation, but for rapid layout iterations and discovery. You know, before getting caught up in the details. It works great to keep focused on the important aspects of wireframing. Especially when you're easily distracted by typography, like myself.

A later iteration of the Rack wireframes.


UI Styleguides

Nordstrom Rack UI Styleguide

Working with a brands like Nordstrom Rack and Hautelook required an excellent understanding of the brand guidelines. Continuity across touchpoints is important. The user should feel familiar with the brand whether in store, on a desktop, mobile or tablet device.

I created a UI Style Guide in order to assist myself and the UI Developer during the build out of the site. It was an excellent point of reference during the build process.

A UI styleguide also serves as a home for some of the many components that will be used in the build. Creating stand-alone components that can be used agnostically throughout the site is an important part of our process in a build of this size. Once we've established the majority of the design patterns, we can start to build out templates much more quickly and spend our time on the fun stuff like contextual animations, creative layouts and testing.


 

MOBILE MOCK UPS

Producing Mock ups of the key templates was a way for us to present the design and have the client to give valuable feedback regarding the visual design like the typography and aesthetics of the site. Again we used InVision in order to keep track of these discussions while staying in context with the design. It was a pretty useful for working with remote clients.

During the feedback and iteration phase, the site got well into development by other members of my team. Engineers could start building templates and UI Devs could start piecing together components based on my previously completed wireframes.

 

Hautelook Mobile Site

During design & production of nordstromrack.com I was also designing and preparing the sister site hautelook.com. Many of the templates and components were built to be shared between the sites.

Invision Mobile UI Discussion.

Invision Mobile UI Discussion.


UI FEATURES

Hamburger Accordion Nav

Rack’s navigation needed to allow for up to 4 levels of subcategories to be explored. This was accomplished by combining an off-canvas navigation with accordion menus. Hierarchies were an important part of this design in order for the user to retain context within the navigation itself.

At the tail-end of this gif you can also get a glimpse of the css loading animation added to the screen transition. There is a white-flash as the page refreshes, but the effect is minimized by the page loader and a subtle fade-out of the transition.

 

 

 

Contextual Nav (breadcrumbing)

Should the user ever find themselves landed on a product or category page from a direct link or promotion, the main navigation was designed to follow context of the user’s position within the site. Upon opening, the nav will display the relevant section of the navigation, in this case, more sandals.

 

CATEGORY FILTERS

Filtering your results has come up time-and-time again as one of the biggest pinch points for mobile ecommerce sites. This has been addressed by using a custom plugin developed internally by Mobify called Pinny. This allows for compliant, highly functional modals and sheets to display extra content.

The current filters on desktop were identified as a severe pinch-point for users. The performance of the page would frequently cause users to abandon their flow. This was addressed using more robust feedback as to what’s happening behind the scenes. We added more removed the tap-delay and added a simple css loading animation on the ‘done’ button as to prevent any frustrating and erroneous double taps. Improving the perceived performance of the site alleviated much of the frustration and increased engagement overall.

 

CHECKOUT

Using the same ‘Pinny’ plugin for the mini-cart, we were able to better funnel the user through checkout.

 

Forms on Mobile

As we all know, forms are a huge pain-point on mobile. The checkout was combined to a single page and many of the extra fields and inputs were removed in order to reduce the amount of information needed from the user on checkout. 

Google Places API was utilized in order to autocomplete as much of the field data as possible. You can see a simple prototype I managed to create to demo to the client here.

 

Cross Site Navigation

A huge challenge (or opportunity) for this site was handling the site-to-site navigation. Thanks to our stellar engineer's ability to rewrite the navigation using json, we were able to show both of the Hautelook navigation, or Nordstrom Rack navigation from either site. Allowing either site to update navigation whenever they please. Should the users want to switch sites and find something specific, they won’t be hit with a page refresh until reaching their category in the navigation.