Microsoft teamed up with TheFind to create a new kind of shopping experience. We chat to the designers about this innovative use of HTML5 and JavaScript.
Items are arranged in a Pinterest-style layout, with minimal text
Online shopping has been taken in a new direction following the launch of Glimpse Catalogs, developed as a partnership between Microsoft and TheFind.
Items are displayed in a Pinterest-style layout, with the focus on image and minimal product details. Clicking the image provides a pop-up box containing full information.
Clicking each image produces a pop-up box with full product details
Clicking "Explore this catalog" lets you back and forth through the pages as you would a physical magazine, and save favourite items.
Catalogues are presented an "online magazine" format, ready to flick through
You can also sign in with Facebook to "like" or share an item on the social network, and Glimpse will curate options specifically for you based on those likes.
How they built it
Glimpse Catalogs is a merging of TheFind’s shopping search engine and its successful social shopping app on Facebook. As part of the project, the team released the framework created as part of the development, which relied heavily on Turn.js, a flipbook library for JavaScript.
"Our goal, from the start, was to implement Glimpse as a web app and not just as a plain website," TheFind’s co-founder and CTO Shashikant Khandelwal explains. “This resolution led us to explore the depths of both JavaScript and CSS while building Glimpse.
Social discovery is a key part of the retail strategy
"We employ a model-view-controller paradigm wherein both server-side and client-side templates render the model represented in Thrift or JSON, depending on the computational power of the client (desktop or tablet)," he continues. "We use both jQuery and custom-built JavaScript libraries in our application.”
Turn.js was used to manage the page turn effect
Khandelwal also describes the usage of Turn.js. "While developing magazine-style catalogues, we used Turn.js, an open source jQuery plug-in flexible enough to be adapted to our needs. We also liked that it was managing the page turn effect entirely with DOM elements."
Complex CSS and JavaScript was used to transform plain 2D images into a more immersive experience. "We converted the static 2D images into a more dynamic 3D experience by including shadows and stacking pages, to give it the appearance of a magazine," Khandelwal adds.
Product highlighting and hotspotting overlays make the pages more interactive
"Additionally we integrated product highlighting and hotspotting overlays to make the pages more interactive. Both of these together helped create an HTML5 magazine with interactive markup. It also gave us a great deal of satisfaction to contribute some of our code back to the developer community."
