hero
hero

Temple Cellars

Redesigning an alcohol e-commerce with custom Vue Shopify theme

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

Mobile landing page

Top header mega menu

Mobile mega menu

Beer collection page with sticky filter column

Mobile collection page with top sticky filter

Product page with untappd reviews integration

Mobile product page

Cart drawer accessible from all pages

Custom cart application - Select new delivery address or pick from account

Custom cart application - Select delivery date and time

Custom cart application - Review details to checkout