Tea Lovers is a family-run tea shop in Melbourne that do not currently have a website. The business has been operating through very manual processes: managing orders in spreadsheets and receipt books, and communicating with customers in-person or via email and phone calls.
Because of this, it's been difficult for them to keep their orders organised. They also feel as though they are not reaching a large section of their target market - young adults.
The main request from the client is to design Tea Lovers’ website with a trendy, minimalist aesthetic. Additionally, there is an opportunity to improve customer experience, giving the company the needed exposure to help them achieve their business goals.
The Problem
Who is this for?
The kind of information customers seek when purchasing their tea
Key workflows internal users would need to manage their store
Through discussion with the client, we were able to identify four primary personas. We quickly understood that this website would be used by employees and customers that would seek different things.
Each user has unique needs from this system, so what I wanted to understand was:
The Personas
As a regular tea drinker, Asuman usually spends her breaks, winding down and sipping a cup of tea. However, she has recently gotten bored of her go-to order and is interested in exploring new blends.
She wants to be able to find teas that align with her preferences, as well as her sensitivities and allergies.
The tea enthusiast
Persona 04: Asuman
As a skilled event planner, Lily often has to plan menus and catering. Many of her clients seek tea to pair with their food, both classic and unique blends.
Lily wants to be able to research each tea, and be able to easily place large orders for her events.
The event planner
Persona 03: Lily
As a barista and tea connoisseur, Toni is passionate about delivering excellent customer service and they enjoy being able to find the perfect tea blend for every customer.
They want to be able to do their work efficiently, and be able to focus most of their efforts on the quality of their brew.
The barista / sales assisstant
Persona 02: Toni
As the owner of Tea Lovers, Dan has been running his business for a few years, and loves introducing people to a unique tea experience through his variety of tea blends.
He wants to be able to connect with customers and communicate his passion and business story to his community.
The owner
Persona 01: Dan
Managing catering requests
As an employee at Tea Lovers, I want to view and finalise catering orders so that we can provide a tailored experience to each of our customers
03
As an event coordinator, I want to be able to customise a large order of teas so that I can provide an informed and unique experience for my clients.
Catering orders
02
As a day-to-day customer, I want to be able to quickly and efficiently order my tea so that I can focus my energy on other tasks.
Individual orders
01
Understanding user needs
User journey maps
Now that we know what each user requires from the website, it's time to start considering how to ensure all of their needs are met...
Website design
Tea Lovers is a tea shop located in Melbourne, a location that is quite competitive for cafes and other stores that serve hot drinks. The client wants to revamp their image with a trendy and minimalist aesthetic, while preserving the brand's cozy and warm identity.
To do this, we had frequent workshops with the client to establish their logo, typography, as well as colour palette. Each time, we approached them with several options, and allowed them to pick what best fit their vision. This process kept the client intimately involved with their brand identity, because Tea Lovers knows their shop and customers best -- I was just here to guide them on the journey.
The Brand
Colour Palette
Type
Logo
After deciding on the brand colours, I was able to finalise the design.
06
Final logo
Using Adobe InDesign, I got to work making the logo for Tea Lovers.
I also added options with the store name, which the client preferred.
05
Digital assets
Keeping the base teacup, we pulled back the design, and stuck with some simple outlines. The client was quite happy with this, so I moved to designing the reusable icons.
04
Keep it simple
The client then took a closer look at the tea cups. This design felt promising to them, but they felt it didn't meet the minimalist aesthetic they were aiming for.
03
The teacup
One of the first logos that the client liked was this teapot. However, we feared that the heart coming out of the might get lost in translation if the logo got too small, so we decided to go a different route.
02
The teapot
01
Brainstorm
Logo design process
I started the process of logo design by drawing icons that I believed would work with the Tea Lovers brand.
I then took this to the client to discuss if any of them fit their vision.
Enticing home page
Photo immediately showcases their product, while communicating their curated aesthetic. The slogan also gives an insight into their brand identity from a quick glance.
(Gong cha, 2023)
Pop-up dietary information
With the variety of teas on offer, they allow customers to explore their menu, and understand which items meet their dietary requirements.
(Gong cha, 2023)
Menu promotions
Seasonal items and other promotions are showcased on the website.
(Starbucks, 2023)
Catering orders
Catering is often separated by 'platters' or bundles, with customisation available once a baseline order is set.
(Subway, 2023)
Ordering through third-parties
For shops that leverage third-party systems to handle their day-to-day orders, the page is often set up as normal, with links or pop-ups to redirect to the chosen delivery app.
(iArepa, 2023)
As part of the analysis process, I gathered images and captures from comparable websites, including food ordering platforms and competitors in our market.
The aim is to understand current industry trends, so we can ensure that the website has all expected functionality. They also served as inspiration on different ways we could incorporate a minimalist and trendy theme.
Additionally, it helped to see the responsive behaviour of these websites and how they appear on mobile devices -- an important consideration given the young target demographic.
Competitor research
Prototypes
A menu page listing all offered teas
Links/navigation to order and delivery partners (i.e. UberEats, Deliveroo)
Minimalist and inviting interface with simple user flows, for ease of use
My main assignment in this team was to design the customer-facing screens. When building out the wireframes and prototypes, we had a list of requirements the clients wanted us to meet:
Catering service options for user to begin quote process
Key Functionality
Landing page
The home page will have a prominent 'order' button in the top right corner, and promotional material.
The order button will house the links to Tea Lovers' delivery partners.
Menu
Customers will be able to explore the range of blends offered by Tea Lovers through the menu.
Filters will allow users to refine their view according to their preferences.
Catering
Customers will be able to request a quote for a catering order with a form on the page.
This was the preferred workflow for the clients, who want to personally finalise larger orders.
As Tea Lovers is a small business, we wanted to make sure that the heart of their passion was promoted in this website, so they can connect with their community of tea lovers. I also wanted to keep the website minimal in terms of user flows so that it was easy for any customer of any skill level to find what they need.
This is why, for several functions -- like the redirection to delivery partners -- I chose to utilise modals over a separate page. This also means that there are fewer pages for the owners to maintain once we hand over the system.
Wireframing
Final designs
Proof of concept: To create the website, we coded using PHP, HTML and CSS. I acted as a front-end developer for the customer-facing portion of the project.
High-fidelity prototype: I created our prototype on Figma. This allowed us to show our ideas to Tea Lovers and facilitated rapid prototyping in our workshops. Additionally, it provided us with a place to experiment with changes before we implemented them in our code.
The project team adopted agile methodologies to complete this process. Every sprint, we would communicate with the client and adapt our output to their needs.
Primary pages
This project gave me a newfound appreciation for stakeholder management. Working with a client and helping their vision come to life is an amazing feeling.
For this particular project, I hoped to have focused more on the accessibility of the site, primarily its responsiveness; however, due to time restrictions, we weren't able to implement more than just a large size -- for computers -- and a small size -- for mobile phones.
This was also the first time I was able to use an industry-standard tool like InDesign to create a custom logo, and going through the process was quite rewarding.