Brief Description

As I was working in Reassemble, we worked in the same office as one of the owners of Temple Cellars. As a way to provide some of our UX services for them, we have been working on their Temple Cellars website.

Main Objectives

Instead of merely doing a UI re-design, we used our expertise -- UX design -- to ensure that the users of Temple Cellars can be better accommodated to. For this project, I wasn't involved in the User Research portion so I will be detailing more from the UI design and front-end development perspectives instead.

Other objectives include:

  • Re-designing the website with a modern look
  • Adding custom interactions such as a sliding cart overlay, product hover actions and integration with other API, namely Untappd.

Stacks

E-commerce Shopify

Integration tools AJAX, Liquid

Javascript Framework Vue.js (1)

Front-end tools Font Awesome, Lodash.js, Shopify Themekit

Languages Liquid Template, Javascript, HTML, Sass modules (1)

UI Prototyping Tools Figma

(1) See my blog on how I use Vue and Sass in Shopify's liquid template


Landing page - Picture tiles Landing page - Picture tiles
Mobile landing page Mobile landing page
Top header mega menu Top header mega menu
Mobile mega menu Mobile mega menu
Beer collection page with sticky filter column Beer collection page with sticky filter column
Mobile collection page with top sticky filter Mobile collection page with top sticky filter
Product page with untappd reviews integration Product page with untappd reviews integration
Mobile product page Mobile product page
Cart drawer accessible from all pages Cart drawer accessible from all pages
Custom cart application - Select new delivery address or pick from account Custom cart application - Select new delivery address or pick from account
Custom cart application - Select delivery date and time Custom cart application - Select delivery date and time
Custom cart application - Review details to checkout Custom cart application - Review details to checkout

Try this site in a new tab