The Steamy Teahouse

BRANDING & E-COMMERCE WEBSITE DESIGN

Project Overview

Purpose & Tools

The purpose of this task was to create a fictional brand, and make marketing material/assets and a website to support that brand. This is a UI showcase project, and was not made for a client, but simply to develop my skills. I also wanted to experiment with using Canva (free version) instead of Figma, as I wanted to familiarise myself with this well-known and powerful design tool. This project was also an opportunity for me to create my e-commerce site for the first time. I decided to use Shopify (Partners program), which is a giant in the e-commerce landscape, to develop the website.

Concept

I noticed that many cafes/coffee shops sell their own brand of coffee, but it is far less common to see a cafe that sells specialty teas. That inspired me to come up with the brand, the Steamy Teahouse, which is a fictious cafe and teashop, located in Melbourne CBD, where they also organise High Tea events. The Steamy Teahouse is beloved small business that sells speciality teas in-house and through their website.

The main demographic/customers of the Steamy Teahouse include employees of nearby companies, those who celebrating special occasions with High Tea, and those who who love (specialty) tea. While the main objective is for the Steamy Teahouse to sell their teas directly to consumers, they may also potentially begin selling teas wholesale to other businesses.

Deliverables

For the Steamy Teahouse brand and business, I used Canva (free version) to produce:

  • A brand identity, displayed using a branding board, featuring the logo, submark, colour scheme, typography, personality and atmosphre of the business.

  • A menu booklet

  • A loyalty (“loyal-tea”) card (business card size)

  • E-mail newsletter template

I used Shopify (Partners program) to create the e-commerce site that is used to sell the Steamy Teahouses’s teas, as well as advertising what the business offfers. I built five main pages on this website: Homepage, Shop pages (including product listings for 27 types of tea,) Menu page, High Tea page and Contact page.

Timeline

Completion of all assets (mentioned above) was done in approximately 10 days, in early January 2025.

Team

All work on this project was completed by me, myself and I.

Brand Identity/Branding Board

When designing the Steamy Teahouse’s logo, I wanted it to include a teapot, rather than a mug/cup which is commonly featured in cofffee shop/cafe logos. The teapot graphic helped to convey that the business sells/serves teas. I also wanted to emphasise the word “tea” in the logo, as that is why I had picked the name “Steamy” for this business. I did that by underlying the word “tea” and adjusting the size of those letters.

I chose the “Railey” font because the curvy nature of the font seems representative of steam, and I believed the motif of steam exiting the teapot to form the letter “S” in “Steamy” was very fitting for this brand. Additionally, I felt that this font captured the slightly playful charm that I wanted the brand to embody.

Competitors / Inspiration

When designing the brand identity, I came across several other Australian tea e-commerce stores, and one cafe (which is actually a social entreprise initiative) that utilise black and white brand colours. I drew some inspiration from these websites for the layout and organisation of content of the Steamy Teahouse’s website. The similarities in the branding accross these sites also gave me confidence that the Steamy Teahouse’s branding is likely to appeal to its target demographic of tealovers.

Menu Booklet

I wanted to design a menu that could also be printed on standard paper and used as a marketing pamphlet, as I have seen other food retailers do this. I made this 4-page menu in A4 (portrait) size, but the print is large enough so that it could be scaled down to A5 (portait) size and still be readible.

Loyal-tea (Loyalty) Card

This dual-sided business card sized loyal-tea card was a coupon reward system for returning customers that enabled them to recieve a 10th cup of coffee or tea for free. The card is given to customers who wish to have one (1 card per customer), and it is valid for up to 1 year.

Since this card is for those who attending the store in-person, the information on the card focuses only on the details of the physical cafe, and not on the online store or social media channels. By providing only this relevant information, the card is not cluttered with information. However, in retrospect, I could have designed this differently and made it more of a membership point system that is also linked with the e-commerce site. But I think this card still fulfils the original purpose for which it was designed.

E-mail Newsletter

This e-mail newsletter includes content and information for those who will recieve this email upon first subscribing to the Steamy Teahouse’s e-mail list, which includes a 10% discount on their first online purchase.

E-Commerce Website

Using Shopify, I customised the free Dawn template to built a website for the Steamy Teahouse which enables people to purchase their loose-leaf teas online, and also provides information about their menu and High Tea experience. I also included product listing pages for each of the 27 teas which the Steamy Teahouse offers. Shopify websites are responsive across different screen sizes. This demo site is live, and you can visit it using the URL and password mentioned below.

VISIT THE WEBSITE: https://thesteamyteahouse.myshopify.com/

Password: chai

Conclusion & Learnings

This project gave me the opportunity to step into the shoes of a small business owner, and utilise free or affordable tools like Canva to create marketing material for a business.

Canva is a highly functional, intutive and free-to-use design tool, and one can easily use it to create marketing material, especially if they choose to use Canva’s many pre-made design templates (which I did not use, since I wanted to create something original.) Furthermore, Canva contains many advanced features like translating designs into mockups, or automatically generating colour palettes to match an image, which are often more tedious to generate manually or with other design tools.

Shopify is a powerful website builder, and it is easy to see how it reamins a dominant choice in the e-commerce space. I will say that it may not be as intuitive to use as some other more drag-and-drop style website builders, but with a couple of YouTube tutorials, putting together a basic site is relatively straightforward. Shopify also has many features and app integration options for those who need more advanced functionality in their store. The website responsivity across devices and plentiful theme options also add to Shopify’s appeal.

This unlimited scope of this project enabled me to simply be creative and play with tools I did not have much previous experience with. I believe it helped me to cultivate my skills as a designer, as well as furthering my understanding of what business owners may consider when going through the process of creating a brand identity and marketing material.

Credits

For the creation of the Steamy Teahouse’s demo website, brand identity and marketing material:

  • Logo, submark, menu (pdf), loyal-tea card, e-mail newsletter template, branding board were created using Canva (free version)

  • Tea product listing photos are from the Australian Tea Masters website

  • Other marketing images are from Unsplash and Pexels

  • Tea product listing copy (and some other marketing copy) was generated by artificial intelligence (AI)

  • Website powered by Shopify (utilising the Spotify Partners program)