Nixon Product Detail Redesign (Mobile)

5 Attachments

Got bored, and was curious if I could find a way to make the Nixon Product Detail Page I did work for mobile. I really wasn't overly optimistic in retaining a similar experience as the desktop version, but I'm pretty happy with how this turned out.

The idea is that the watch (or any product) gets pushed into a left slide out type tray, but it still has a 1/4 of it visible from the static view of the page. The product can then be swiped out, or clicked out via the tab below the product to see the high-res image, alternate views, and the CTAs to add to cart or find a retailer. (It is also absolutely positioned along that left edge so it appears to scroll with you down the page similar to the desktop)

One of the other major changes is that the horizontally oriented anchor nav on the desktop version becomes a pulldown (which now includes another instance of the '+ Cart' and 'Locator' buttons, as those are not visible from the static view of the page). As a side note, I swapped the locator and wish list buttons as I feel that in the instance of a mobile experience, a dealer locator become more relevant. This is also why I felt alright hiding the primary CTAs in a hidden slide-out tray– I think the mobile version of the site is more for research than to actually make a purchase.

The rest is pretty standard transitions of the navs and content to the mobile platform– simpified primary nav, condensed copy, etc.

Follow me on Twitter for more

*Had to repost to add in iOS Header and adjust things slightly*

keyboard shortcuts: previous shot next shot L or F like Z toggle zoom