This was a fun project I did to see if I could improve/iterate on the Nike.com website. It’s very well designed but the user experience has some opportunities for refinement.
Less is more: I’m going to take a minimalist approach to this design. My hope is that by reducing visual clutter the user will be able to focus on the content easier, and increase conversions.
The header is too tall and three bars in the top nav are too busy and don’t allow the user to focus on the meat of the site. Reduce visual clutter, drawing the user into the product and actions) with a couple of quick changes: reduce the header height and consider moving some of it’s elements to a sticky footer – still visible but not upfront.
Header should always be visible so users can jump around and see the status of their shopping cart. The Utility Nav can be reduced with the aid of icons. Search will expand to the left once clicked, which gives a nice balance to the header area with icons on the left and right side and big nav text in the center.
Product area thoughts
- Image gallery could be moved below; giving more weight to the large image. If too many images add a horizontal scroller
- Make Primary button 100% width of the column; allowing more room for options, colors etc horizontally. Also make the button orange so it stands out
- Add recommended products
- The Shoe rotates 360 degrees when the mouse is dragged over it
- Figure out a way to make the Add to Cart button follow you as the page is scrolled???
- Reinforce Add To Cart with micro-interactions: animate the button to say Added to Cart or something – show that the action was performed. Along with updating the cart icon in header as expected.
- I’ve intentionally removed SIZE and QUANTITY. Size will be exposed via popup once added to cart, and Quantity can live in the shopping cart.
- HTML5 Boilerplate w/Bootstrap, JQuery
- Designed/tweaked responsive elements on the fly in html: not 100% perfect but gives a good idea of final product
- Some other design occurred on the fly as well – I stopped designing in photoshop after the large product text area in white
900+ lines of code: HTML and CSS
- I would’ve liked to add more animations and micro-interactions – mostly to reinforce that the user did something or interacted with an element
User Testing Questions: Pre-planning
- Is the user profile/login link obvious, or should Log In be explicitly stated. A/B test this.
- Can the user find the Brands on the bottom left?
- Can the User find Help and Site Feedback on the bottom right?
- Does the User understand how to expand the footer?
- Is the Primary button easier to find?
- Add to Cart button: would like to test several options for optimal button placement.
Would it work better in the upper right area of the cart? What if it was 100% wide? Etc
- Does the Quantity control really need to be exposed here? It could easily just live in the
- Does selecting the Size via popup work? Are users uncomfortable/unsure if they want to
add to cart without seeing the Size control?
- Is the Image Gallery easy to use?
- Does the User understand how to interact with the 360 degree shoe view?
- How intuitive is the Product Customizer?
- Do users notice the Product Customizer?
- On mobile views – is it possible to be more economical. Turn more pieces off if they
detract from the experience?