Brand Presence / Kettl / Satisfy Running

A brand presence project rarely begins with the homepage. It begins with the question of what the brand needs to hold.

For Kettl Tea, the material is quiet but highly specific: Japanese tea regions, producers, harvests, cultivars, brewing methods, teaware, freshness, hospitality, education, and the trust built between farm, shop, and customer. For Satisfy Running, the material is physical and psychological at the same time: technical apparel, product drops, running rituals, subcultural codes, fabric systems, field testing, and the feeling of belonging to a very specific running world.The two brands sit in different categories, but they share the same digital problem. Their websites cannot behave like flat brochures. They need to behave like systems.

Kettl needs a surface that can turn origin, preparation, product knowledge, and purchase into one calm ritual. Satisfy needs a surface that can turn performance products into a complete world of use, desire, and identity. In both cases, the work was not to add more visual style. The work was to build a structure strong enough to carry the style that already existed.

The Problem

Strong brands often appear coherent from the outside and fragmented from the inside.

For a Japanese tea brand, the fragmentation happens between product, origin, producer, harvest, cultivar, brewing method, teaware, education, wholesale, and repeat purchase. A visitor may enter through matcha, sencha, gyokuro, hojicha, a regional collection, a brewing guide, or a gift set. The system has to help them understand what they are buying without turning the experience into a technical manual.The platform needs to feel calm, but not vague. It needs to be educational, but not academic. It needs to sell, but without flattening the ritual into ordinary e-commerce.

For a performance running brand, the fragmentation happens between product, culture, and commerce. A runner may care about weight, temperature, fabric, distance, terrain, storage, layering, and breathability. A brand follower may care about image, attitude, collaboration, scarcity, archive, and release rhythm. A buyer may move between both positions in the same session.A normal website treats these as separate pages. A stronger brand system treats them as connected objects.

The central question became: how do we make the website feel like the brand, while also making it easier to operate, update, extend, and sell through?

What We Diagnosed

We separated the work into four layers.

The first layer was the public face: the homepage, the entry points, the rhythm of scrolling, the use of images, and the way a visitor first understands the brand.

The second layer was the content structure: teas, regions, producers, harvests, cultivars, brewing guides, teaware, products, materials, drops, field notes, articles, and campaign pages.

The third layer was the movement path: how a visitor moves from one object to another. From tea type to region. From product to producer. From brewing guide to teaware. From origin story to purchase. From product to material note. From field test to product page. From archive to current release.

The fourth layer was the publishing system: how the team creates new entries without rebuilding the site each time. A strong brand presence is not a static design asset. It is a repeatable operating model.

What We Built

For Kettl Tea, we rebuilt the site as an origin and ritual system.

A tea was no longer just a product card. It became an entry point into region, producer, cultivar, harvest, processing method, tasting notes, brewing parameters, storage guidance, and related teaware. A region page became more than a place label. It became a way to understand climate, craft, flavor profile, and the role that location plays in the character of the tea.

The buying path was designed to educate without slowing the customer down. If a visitor was looking at gyokuro, matcha, sencha, hojicha, or soba-cha, the system could connect the product to the right water temperature, steep time, vessel, serving context, refill logic, and related products. The goal was not to overload the visitor with information. The goal was to make confidence feel quiet and natural.

The content model was designed around relationships:

  • Tea
  • Region
  • Producer
  • Cultivar
  • Harvest
  • Processing Method
  • Tasting Note
  • Brewing Guide
  • Teaware
  • Wholesale Use Case

This made the site easier to browse and easier to maintain. New teas could be added as structured objects, and the system could automatically suggest meaningful relationships between origin, preparation, equipment, and customer need.

For Satisfy Running, we treated the product page as a cultural object, not only a commercial one.A product drop became more than a grid of items. It became a campaign system with material notes, field testing, running context, product logic, archive status, and related stories. Technical details were not hidden at the bottom of the page. They were translated into use cases: distance, climate, terrain, storage, layering, and training condition.

The system was designed to answer practical and emotional questions at the same time.

What is this product made for? When would I use it? What makes it different from the previous release? How does it fit into the larger world of the brand?

Automation Layer

Automation was kept quiet. The visitor should never feel the machinery, but the team should feel less manual work behind the scenes. When a new tea is added, the system can prompt the team to connect it to a region, producer, cultivar, harvest, brewing guide, teaware recommendation, tasting note, and wholesale use case. It can also prepare related modules for product education, reorder logic, seasonal availability, and partner-facing descriptions. When a new product drop is created, the system can generate the required modules: product group, campaign landing page, material notes, field-use copy, email assets, inventory tracking, and archive entry.

For Kettl, this supports the relationship between product knowledge, freshness, education, and repeat purchase. A café buyer should be able to move from product discovery to menu description, staff training, and reorder without asking the brand team to repeat the same explanation manually.

For Satisfy, the same logic supports product education, drop operations, inventory awareness, and archive continuity. A technical product can keep its cultural edge while becoming easier to understand and easier to operate.

The goal was not to automate taste. The goal was to remove repeated coordination, so taste could be applied with more attention.

Visual Direction

The visual direction had to respect two different kinds of intensity.

Kettl needed calm precision. The interface should feel like a tea room, a field note, and a product archive at the same time: warm white space, dark typography, careful photography, precise brewing details, and product information handled with restraint. Images should stay close to material and ritual: leaf texture, ceramic surface, water, hand movement, packaging, counter, field, and quiet preparation.

Satisfy needed controlled tension. The interface should feel fast, dry, technical, and slightly obsessive. Product photography, running surfaces, fabric details, sweat, distance, weather, and field notes should sit inside a system that feels more like equipment than advertising.

The shared principle was restraint. A strong brand presence does not need to explain itself loudly. It needs to organize attention.

Result

The outcome was a brand presence system that could grow without losing its tone. For the tea brand, the website became easier to navigate, easier to educate through, and more faithful to the relationships between origin, preparation, product, and ritual. For the performance brand, the product experience became more complete: product, material, field use, archive, and culture were held in one continuous system. The work made the website less like a finished object and more like a living surface.