![Setting up a Multi-Themed Application Hero](/_nuxt/image/7be53f.png)
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](/_nuxt/image/baf9ee.jpeg)
![Mobile landing page](/_nuxt/image/970528.jpeg)
![Top header mega menu](/_nuxt/image/45becc.jpeg)
![Mobile mega menu](/_nuxt/image/98e3e7.jpeg)
![Beer collection page with sticky filter column](/_nuxt/image/f6e8df.jpeg)
![Mobile collection page with top sticky filter](/_nuxt/image/32c24b.jpeg)
![Product page with untappd reviews integration](/_nuxt/image/9b4066.jpeg)
![Mobile product page](/_nuxt/image/479558.jpeg)
![Cart drawer accessible from all pages](/_nuxt/image/66487b.jpeg)
![Custom cart application - Select new delivery address or pick from account](/_nuxt/image/f70b5f.jpeg)
![Custom cart application - Select delivery date and time](/_nuxt/image/3250d0.jpeg)
![Custom cart application - Review details to checkout](/_nuxt/image/2d10d8.jpeg)
Try this site in a new tab