nike-hero.jpg

Nike.com

Nike.com for mobile web

About THE PROJECT

With more and more users shopping on mobile devices, Nike.com was in need of a redesign. Creating a united mobile site for a brand with so many properties and types of products was a great challenge, especially with our time constraint. From start to finish the project lasted 4 months, and we were left no time for second guessing, always moving forward. In the end I'm proud of where the team ended up.

My Role

At the start of the project I conducted research about social commerce and the way people shopped on mobile. With that, I created a mobile strategy for the Nike digital team. Along the way, I created a site map, user flows, wireframes, prototyped functionality, and wrote specifications for design and behavior.


Research and Goals

Next, we had to be accessible. Nike already had a suite of specialized apps targeted at smaller audiences, so Nike.com should be a universal experience that all consumers could access at any time and place. Finally, we had to be consistent. We set site-wide guidelines for things like buttons, forms, and how elements changed at different mobile browser sizes.

Coming out of research, we arrived at three core goals. Our first was to be fast. Who has the patience to wait on slow web pages to load, especially on their phone? We streamlined the navigation to get the user where they want to go faster, and kept our content focused, timely and relevant.


Personas

Creating personas helped us make decisions about content priority and personalized features for logged in users.


SITEMAP

The sitemap helped give a birds eye view of how we would organize commerce vs branded content.


Navigation Flows

I created navigation flows in order to chart the path from the global navigation to the product grid walls. This served as a reference for our developer, so that each individual state of the global navigation wouldn't need to be tediously laid out by the visual designer.


WIREFRAMES

With such limited space on a mobile screen, the product pages and grid walls required the most finesse. Here are some of the wireframes I created.

Final Designs

Here are some examples of the final mock-ups created by our visual designers. The mobile site launched in the spring of 2013, and is ready for you to check out now and buy some sweet new kicks!