Yamamasa Koyomaen Landing Page - Study Case

Yamamasa Koyomaen Landing Page - Study Case

Time Frame

May - June 2025

Role

UI/UX Designer

Platform

Website

Introduction

Yamamasa Koyamaen is a renowned Japanese tea brand with over 300 years of heritage, specializing in high-grade matcha used in traditional tea ceremonies. Known for its commitment to quality, the company handles the entire production process, from cultivation to grinding — using time-honored techniques passed down through generations.

Brand Growth

Yamamasa Koyamaen has grown from a local tea maker into a globally recognized brand known for premium matcha and centuries of craftsmanship. With its products available in over 1,000 tea retailers across Japan and select global markets, the brand is expanding its digital presence to connect with a wider, modern audience while staying true to its tradition

Background Story

While browsing Yamamasen Koyomaen’s website, I noticed the landing page felt outdated and cluttered. The visuals didn’t reflect the elegance of the brand, and important content like products and heritage were hard to find. That experience pushed me to redesign the page to be clearer, modern, and more aligned with the brand’s story.

Team

Worked independently as the sole designer. Based design decisions on user behavior patterns, personal observations, and industry design best practices.

Findings

  • Outdated Visuals

    The page design felt old and did not reflect the elegance or premium nature of the brand.

  • Weak Storytelling

    The brand’s long heritage and authenticity in matcha were not communicated clearly, leaving users disconnected from its value.

  • Poor Information Hierarchy

    Important content such as product categories and brand background was hidden or scattered, making it hard for users to explore.

  • Low Product Visibility

    Products were not highlighted enough, reducing both discoverability and purchase motivation.

Defining the Problem

How might we refresh the design so it feels modern and elegant while still honoring the brand’s heritage?

Process

Define Problem → Wireframe → Prototype

I identified the problem of Yamamasen Koyomaen’s outdated landing page with poor hierarchy and brand storytelling, then created wireframes and a prototype to deliver a clearer and more elegant user experience.

Research and Ideation

Initiated lightweight research to validate assumptions and gather inspiration for improving brand storytelling and usability on the landing page.

Responsibilities included:

  • Browsed design references from premium tea brands and luxury e-commerce sites to understand how they present heritage and product offerings.

  • Synthesized insights to identify issues with weak hierarchy, outdated visuals, and unclear product presentation, then drafted opportunities for a modern, elegant layout that highlights both the brand’s history and products.

Result

Challenge and Most Interesting

The challenge was modernizing Yamamasen Koyomaen’s outdated landing page while keeping its rich heritage. The key was balancing tradition with clearer navigation and product focus, refining the hierarchy so users could explore easily without losing authenticity.

Key Takeaways

  • Clear storytelling and visual hierarchy are essential for brands with deep heritage.

  • Balancing tradition with modern design creates both trust and appeal for younger audiences.

  • Even small research inputs can reveal usability gaps and guide impactful improvements.

  • A refined structure and layout can elevate not only clarity but also the overall brand perception.

Create a free website with Framer, the website builder loved by startups, designers and agencies.