Matcha Cafe

Research

Competitive study

I studied the websites of three matcha related companies and restaurants to gain a better understanding, and learn from designs already in the market.

Nana’s Green Tea

Nana’s Green Tea is a restaurant offering drinks and food with ingredients sourced from Japan. The website default language is in Japanese with an option to switch to English at the top right corner. The tone used is formal and polite.

Strengths:

• Website is available in two languages
• Strong emphasis on authenticity and quality of their ingredients
• Many visuals like photos and videos of the food, drinks and store
• Clear brand identity including fonts, colours and photography
• Links to social media at bottom of page

Weaknesses:

• Dropdown for menu shows a list of stores which may be confusing for users
• First item on top navigation is “top” which is also confusing. This button brings users back to the top of the page

Matchaya

Matchaya is a tea company that innovates tea products and prides itself as a responsible company sourcing only for small-batch, artisanal tea. The website design is elaborate and ornate.

Strengths:

• Consistently strong UI, including use of high quality images
• Visually appealing and makes users feel welcome
• Clear CTA buttons to shop now or visit the store
• Plenty of product pictures, store photos and ongoing promotions
• Clear brand identity - logo is centred at the top of the page when scrolling, clear green matcha colour used for background and CTA buttons

Weaknesses:

• There is only one customer review on the website which may seem a little dodgy

Maccha House

Maccha House is a cafe serving matcha-based drinks and desserts. Their website is very basic, only providing three photos and the locations of their outlets. They mainly use Facebook for marketing.

Strengths:

• Outlet locations including a map is provided on the homepage
• Facebook page is constantly updated with promotions
• Branding is clear on facebook page with consistent colours and fonts used in the social media postings

Weaknesses:

• Website is overly simple and does not provide much information

Starting the design

Wireframes

• I created a top navigation menu which includes the logo prominently displayed in the center, and our menu, promotions, contact, delivery and reservation options.
• A single image fills the hero section, with a clear CTA to visit the store.

• Next, I included a short paragraph as an introduction of the cafe, placing emphasis on the authenticity of our tea leaves and brewing process.
• I also included many photos of our products as users are drawn to images. I intend to use photos of modern matcha desserts in these images.

• I created a section of customer reviews to add credibility to our brand. This not only improves the level of trust of users who research our brand, but also allows our customers to do our marketing for us.

• I created a photo carousel section for our ongoing promotions.
• Finally I added our store information including the address and opening hours

Mockups

In this step, I followed the structure of the low-fidelity design and added typography, images and colours.

Development

Building the website

Having no experience with coding, I decided to use Webflow to build the website. I learned the basics of HTML and CSS from courses on Udemy and tutorials on Webflow University. I adjusted the look of the landing page across different screen sizes from mobile, tablet and desktop. Check out the responsive landing page here.

Takeaways

I had a lot of fun with this project. It was my first try at graphic design and website building, and it was definitely a challenge! With plenty of resources available online, I learnt many new things - such as creating a brand guideline, a photo carousel and grids on Webflow, and using gradients and offset paths in Illustrator. In this process, I learnt that there is always a solution to every obstacle, even if it takes a while to get there. Sometimes, the solution is as simple as taking a break and re-looking at my work again, with fresh eyes!