Nixon Product Detail Redesign (Mobile)

17 Responses

  1. Jon Vlasach 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*

    likes

    over 1 year ago

  2. Tobia Crivellari  Tobia Crivellari 

    Cool UI mate! @Jon Vlasach

    likes

    over 1 year ago

  3. BEASTY BEASTY

    awesome !!

    likes

    over 1 year ago

  4. Jon Vlasach Jon Vlasach

    likes

    over 1 year ago

  5. Grayden Poper Grayden Poper

    Nice work all around.

    likes

    over 1 year ago

  6. George Otsubo George Otsubo

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

    likes

    over 1 year ago

  7. Steven Schafer Steven Schafer

    this makes me smile. love this

    likes

    over 1 year ago

  8. Jon Vlasach Jon Vlasach

    @Steven Schafer thanks man!

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

    likes

    over 1 year ago

  9. Erwin Hines Erwin Hines

    Im smitten

    likes

    over 1 year ago

  10. Zack Travis Zack Travis

    Very sharp. Love it.

    likes

    over 1 year ago

  11. Jon Vlasach Jon Vlasach

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

    likes

    over 1 year ago

  12. Chad Casper Chad Casper

    This turned out awesome, nice work!

    likes

    over 1 year ago

  13. harwen harwen

    Nice!

    likes

    over 1 year ago

  14. Austin Neill Austin Neill

    CLEAN!

    likes

    over 1 year ago

  15. Nathan Trost Nathan Trost

    All the Nixon work is looking beautiful!

    likes

    over 1 year ago

  16. Robinsson Cravents Robinsson Cravents

    less is more

    likes

    over 1 year ago

  17. Andrey S. Rodrigues ☝ Andrey S. Rodrigues ☝

    its really great Jon :)

    likes

    7 months ago

keyboard shortcuts: previous shot next shot L or F like