Nixon Product Detail Redesign (Mobile)

16 Responses

1. Pro Jon Vlasach

   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*

   1likes

   5 months ago

2. Pro Tobia Crivellari 

   Cool UI mate! @Jon Vlasach

   1likes

   5 months ago

3. Pro BEΔSTY DESIGN

   awesome !!

   1likes

   5 months ago

4. Pro Jon Vlasach

   @Tobia Crivellari ™ @❌ BEΔSTY DESIGN thanks guys!

   1likes

   5 months ago

5. Pro Grayden Poper

   Nice work all around.

   1likes

   5 months ago

6. Pro George Otsubo

   Really nice stuff. You should pitch it to Nixon :)

   1likes

   5 months ago

7. Pro Steven Schafer

   this makes me smile. love this

   1likes

   5 months ago

8. Pro Jon Vlasach

   @Steven Schafer thanks man!

   @George Otsubo I think a person or 2 over there might have heard about it :)

   1likes

   5 months ago

9. Pro Erwin Hines

   Im smitten

   1likes

   5 months ago

10. Zack Travis

    Very sharp. Love it.

    1likes

    5 months ago

11. Pro Jon Vlasach

    @Erwin Hines @Zack Travis Thank you, kind sirs– much appreciated.

    1likes

    5 months ago

12. Pro Chad Casper

    This turned out awesome, nice work!

    1likes

    5 months ago

13. Pro harwen

    Nice!

    1likes

    5 months ago

14. Pro Austin Neill

    CLEAN!

    1likes

    5 months ago

15. Pro Nathan Trost

    All the Nixon work is looking beautiful!

    1likes

    5 months ago

16. Pro Robinsson Cravents

    less is more

    1likes

    4 months ago