The Teaguy

TeaGuy on different devices

Overview

The Teaguy is a boutique tea vendor that aims to supply the growing demand for premium tea in the foodservice industry. They offer a range of microbatch blends in both loose and bagged form for purchase by cafes, restaurants, coffee roasters, caterers etc. They also provide training services, consultation, and custom blending services for their clients.

The purpose of their new website is to strengthen their online presence and capitalize on their brand recognition that has grown over the years. Customers that have had their tea at another establishment want to know more about them, and be able to purchase their products directly online. The Teaguy wants to accurately depict their focus on quality, history, and expertise with the launch of a new website.

Design

The overall design emphasizes the usage of vintage elements like gritty colour and textures, sleek typefaces to communicate a stoic and rich history, but with a modern twist.

Parallax is used to create an illusion of ‘peeking’ behind the scenes at the workings of the Teaguy. A darker, gritty image is often used in these areas as an attempt to install historic value to the brand.

High quality images & photographs are used to not only create visual appeal but also intuitively introduce site features. One example is the Shop Tea by Ingredient carousel on the home page.

Shop Tea by Ingredient details:

  • We carefully chose the recognizable image piece to represent each tea ingredient
  • Customers find this feature visually interesting and it immensely improves the shopping experience at the same time.
  • Being able to see an organic representation of ingredients allows the user to make visual correlation between a tea and it’s flavour.

Development

By default, Shopify does not allow much content manipulation on page & product templates. We utilized the metafields to give us total freedom of layout, and at the same time help the clients manage their content better. We are able to have ‘Steeping Essentials’ on every tea product page to give that extra bit of information customers want to know. Even though the Teaguy website is responsive, we managed to create a Parallax effect that works seamlessly across all devices. The new website is the perfect place for customers to learn about tea and purchase products while focusing on the Teaguy branding.