ISCU TEA REDESIGN

👤 UX/UI Designer

🕒 June 2024

⭐ Personal Project

THE INSPIRATION

Iscu Tea in Downtown, San Jose

March 26th, 2024 @ 3:12 PM

Iscu Tea was a small student-owned pop-up specializing in Asian-inspired matchas, teas, and lattes. At that time, high-quality matchas around SJ was non-existent. Drawn in by their social media buzz and adorable logo design, I visited for the first time in March 2024. Iscu Tea has since is closed, but the inspiration it left me was unforgettable.

THE PROBLEM

Inconsistent Web Branding

Upon curiosity for the small business, I looked up their website to learn more about their origins, culture, and drinks! Unfortunately, I was met with a plain design that didn’t align with their whimsical social media presence.

  1. Streamlined user experience – Users land directly on the menu page, making it quick and easy to access all available drinks without extra clicks.

  2. Minimalist and functional – The design is simple, avoiding unnecessary visual clutter or overwhelming effects.

PROS:

  1. No visual previews of drinks – The website lacks images of the drinks unless users navigate to the “Order Ahead” link, which redirects to Snackpass. Even then, it’s not intuitive for users to know they need to go there just to see what the drinks look like.

  2. Lack of branding consistency – The website design doesn’t match their personal and aesthetic on social media (posts have been removed now).

  3. Limited storytelling – There’s little to no information about Iscu Tea’s origins, culture, or inspirations, which could strengthen the brand’s connection with customers.

CONS:

LO-FI

The Initial Ideation

catchy hook & short description

menu with visuals

integratabtle order screen

about us/contact page

HI-FI

Finalizing Designs

home page

menu

order menu

order screen

about us

Changes From Lo-Fi:

  1. The Navigation Bar has been shifted from center alignment to right alignment for a cleaner, more modern look.

  2. The Home Screen has been enhanced with more detailed visuals and content, giving users a better sense of the brand and offerings.

  3. The design now includes a full order screen, not just a basic order menu, providing a smoother and more intuitive ordering experience.

DESIGN SYSTEM

Earthy & Whimsical

Beige, green, and brown emulate a natural and earthy aesthetic, reminiscent of matcha, tea leaves, and warm, handcrafted lattes.

To not make it feel overly traditional or rustic, the soft tones bring a whimsical energy, making the brand feel fresh and approachable.

ENJOY :)

Prototype 🍵

🏡 Home Page

Read about Iscu Tea’s ethics and values, emphasizing high-quality ingredients and care in every cup.

☕ Menu

Browse all of Iscu Tea’s drinks with a image and detailed description of their key flavor notes.

Order directly from Iscu Tea’s website without needing to navigate to an external platform. Each drink is displayed with an image, a percentage rating based on customer favorites, and a mini description.

💰 Order Online

Learn more about the brand’s inspiration, values, and dedication to quality drinks. The page also provides essential details like where Iscu Tea is based, its exact location, and contact.

🫖 About Us

Final Takeaways

At the time of this project, I was still fairly new to Figma—components? What were those??? If I were to revisit this project with the knowledge I have now, I would incorporate interactive elements like button hovers and leverage component variants to streamline the design process. This would have significantly improved efficiency and addressed the lack of content in my design system.