Overview
For this project, I needed to plan and design an entire brand identity from scratch. I chose to create a herbal tea cafe based in my hometown of Memphis, TN. In order to advertise the restaurant and allow customers to access menu and store information online, a website for the cafe was made. The platform additionally allows users to book reservations and learn about our mission of educating people about tea.
Problem
How can we create an online presence for a tea cafe where users can be successfully marketed products and be updated on information about the business?
Solution
I designed a responsive website that allows users to access menu items, learn about the mission, and access store information about the tea cafe.
Timeline
My Roles
3 months
UI Design
UX Design
Wire-framing Prototyping
Animation
Graphic Design
Brand Identity
Illustration
Final Product
Brand Identity & Research
Before designing the website itself, I spent a couple of months creating the brand identity of Milk & Daisies: curating the brand voice, designing the logo and stationary, illustrating assets, etc. This allows me to get a clear idea of what goals I want to meet for my website that aids to fulfill the mission of my brand.
The main mission of Milk & Daisies is to educate our community on tea cultivation and foster appreciation for the craft while offering a serene space for guests to relax and enjoy their afternoon tea.
Besides doing research for the brand, I also took a look at real-world examples of websites for restaurants to see elements that can enhanced the user experience of my website.
Aquarius
Some of the elements I took note of include:
customer testimonies
galleries
usage of imagery in the menu section
reservation information
taglines and mission statements
By adding additional marketing material like testimonies and taglines on top of essentials like store hours and menu items, we can better resonate with existing customers and attract a new audience as well.
Wireframing & Prototyping
Information Architecture
I then created a site map of the website and sketches out the wireframes, before refining them in Figma.
.png)
Animation & Final Thoughts
After finishing the designs and final touches, I started animating the components. UI animation was something I struggled a lot with at the beginning, but I made a lot of progress since starting UX/ UI a couple of years ago. Out of all the prototypes that I have done, this one best showcases the improvements I've made. I definitely refined the smoothness in my animations and the consistency of layout. I think the next steps in this project are to test this website out on real users, and if successful, find a way to build this out into a fully functioning website through web-building platform like Framer.
Information Architecture UI Design
UX Design Animation Wire-framing Prototyping Graphic Design
Brand Identity Illustration