Overview
A freelance UI/UX project for UniTea – SD Cafe. Our team of four outlined a hi-fi prototype alongside style guides and branding for this locally loved home cafe. With a new polished online presence, UniTea is easy to browse, find, and order from.
The Challenge
Translating a cozy in-person feeling into a website
UniTea has a devoted and local following, but relies solely on temporary posts through social media for business; customers relied on scattered social posts to find hours, the menu, and location. The challenge: translate the hominess and local personality into a clean digital experience, practical for the owners to maintain while focused on what customers came looking for.
User Research
Interviews and personas
We ran short interviews with 12 UniTea customers and two longer, in-depth proxy interviews to understand how people find UniTea, read the menu, and decide what to order. From those patterns we built three personas, each with two scenarios and the use cases that came out of them.
Heard about UniTea through mutual friends and wants to support a small business. She is curious about the owners and the culture behind the drinks.
- About Us story and the people behind it
- Hours, socials, and clear contact options
- Where the matcha is sourced
- Recommended drinks to start with
Found UniTea through an Instagram repost and is drawn to the Filipino-inspired matcha flavors, but unsure about the quality of a home-based business.
- Brand story and legitimacy
- Ingredients and preparation methods
- High-quality drink photos and reviews
- Flavor profiles and sweetness levels
Saw a friend post a UniTea drink and wants to decide quickly whether it is worth visiting, then pick his order ahead of time.
- Drink photos and easy-to-read names
- Pricing, location, and hours
- Milk and ingredient customization
- A way to compare drinks
USE CASE SUMMARY
Site Architecture
Four pages built from the use cases
The use cases became a four-page sitemap. The homepage introduces the cafe and surfaces featured drinks, a monthly calendar, customer reviews, and Instagram. About, Menu, and Contact Us branch from it, with the menu organized by drink type.
- Intro
- Ingredients
- Community
- Matcha
- Coffee
- Hojicha
- Sago
Sitemap · UniTea website
Design Process
From the owner's vision to a hi-fi prototype
After talking with the owner about the cafe's story and customers, I mapped a simple structure: landing/home page, menu, about, and contact. The team and I built a hi-fi Figma prototype defining layout, type, color, and imagery.
Wireframes
Structuring the About page
The team first wireframed each page to settle content order on mobile. The About page tells the cafe's story from top to bottom: who UniTea is, where its ingredients come from, and the community around it.
Who is UniTea? mission statement
Local & Quality Sourced Ingredients
Our Communitea
LO-FI WIREFRAME · SCROLL TO VIEW THE FULL PAGE
- 1NavigationLogo and a hamburger menu on a cream bar.
- 2HeroCommunity photo with the page title.
- 3Mission nametag"Who is UniTea?" mission statement on a nametag card, signed by the owners.
- 4IngredientsLocal and quality-sourced: calamansi from Lola's tree, homemade syrups, and ceremonial matcha, each with a Read More link.
- 5Our CommuniteaA community photo and a block on community and values.
- 6FooterHours, email, location, and socials.
Style Guide
One reference for color, type, and imagery
The style guide pairs Playfair Display headings with PT Sans body text and organizes color into brand, secondary, and neutral tiers.
Playfair Display · Headings
PT Sans · Body
Visual Design
Warm, minimal, and easy to maintain
Soft creams, muted greens, a dusty pink, a handwritten touch in the type, and generous whitespace was built as a small, reusable component set so the owner can update the menu without touching layout.
Interactive Prototypes
Explore each page of the hi-fi prototype
Click through live prototypes of each page.
Hi-fi prototype · Figma · Home page — interactive
Hi-fi prototype · Figma · Menu page — interactive
Hi-fi prototype · Figma · About page — interactive
Outcome & Learnings
The prototype gave UniTea a confident blueprint for its first website. Designing for a small business reinforced that a focused site has the ability to balance brand personality and realistic needs of both owner and customer.