SS17-1 Interactive Lookbook.
Hot Spots and Quickshop.

 

An interactive responsive lookbook on g-star.com. High quality imagery is optimised for retina displays and built for speedy loading. The main aim is to promote deeper engagement or 'time well spent' on site. Instead of a large list of product, the lookbook focuses on a curated collection of key looks. Rich materialisation in the digital space acts as a metaphor of concrete-steel construction, mimicing a physical product showroom space. This feeling is also conveyed in transitions, lighting and UI navigation. Fashion illustration is used in wireframes to quickly explore real designs across multiple devices. Quickshop action cards and hotspots make it shoppable and viewable in stores on large digtial displays. Role: #Design, #UX, #UI, #Concept.

Lookbook 16-1 online redesign-8Lookbook 16-1 online redesign-8
quickshop referencequickshop reference

Quickshop

On the webshop we wanted to avoid the user leaving the experience to see more about the product. Connecting e-commerce with inspirational photography the implemnetation of the quickshop overlay solves this problem and drives conversion for the interactive lookbook. This lets the consumer add an item to bag or save for later without stopping shopping on the lookbook page. Below you can see some process and explorations we did for the responsive layout and quickshop card design. The quickshop was so successful it is now on every featurepage or editorial page on the webshop.

 

 

Screenshot 2018-03-22 23.23.51Screenshot 2018-03-22 23.23.51
Screenshot 2018-03-22 23.22.39Screenshot 2018-03-22 23.22.39

UI to Elevate Photography

The challenge with responsive lookbooks is how to best elevate the photography for mobile exploration without sacraficing your desktop experience. The placement of hot spots on each item was done mobile first in terms of hit zones. This adds a pulsating interactive element (hotspot) to draw the users attention. Hotspots allow for direct access to the quickshop card for either 'Shop the look' or 'Shop single item'. Men and Women toggles let you filter by gender. Images work on single column lists on mobile but expand to show extra detail images on desktop.

Screenshot 2018-03-22 23.23.06Screenshot 2018-03-22 23.23.06
Screenshot 2018-03-22 23.23.14Screenshot 2018-03-22 23.23.14