01 — Overview
The brief, in brief
Kayanoya is a premium Japanese food brand from Kubara Honke, a family-run food manufacturer founded as a soy sauce brewery in 1893. Its product range spans dashi, soy sauce, seasonings, soups, noodles, drinks, and gift sets, with Kayanoya Dashi as the signature product. The refresh rebuilt the US Shopify site as an education-first destination, pairing premium products with the recipes, guides, and chef endorsements needed to teach American home cooks how to use them. Scope covered UX, UI, content architecture, mobile-first design, and accessibility.
02 — Challenge
Engagement was there. Conversion was not.
The refresh had to close three gaps at the same time. Educate an unfamiliar American audience on what dashi and the broader Kayanoya range are and how to use them. Build buyer trust through reviews and chef endorsements throughout the UI. Translate a distinctly Japanese sensibility into a premium American digital experience.
The diagnosis reframed the problem. User engagement was strong but did not translate into conversion. The funnel was leaking, not the interest.
The evidence
Average session length of 7 minutes 27 seconds, well above typical e-commerce benchmarks. Attention was not the problem.
Add-to-cart rate of 5.7% across 4,477 sessions. Interest outpaced action.
Cart-to-order completion of 43%. A second drop-off downstream of the first.
Bounce rate on the products page peaked at a 2,000% increase during the audit period, with rage clicks and frustration events clustered around the SHOP dropdown.
Kayanoya Google Shopping ads displayed zero customer star ratings. Competitors like Ajinomoto Hondashi showed nearly five.
73% of online shoppers consult reviews before buying (Nielsen). None of Kayanoya's existing reviews reached Google Shopping placements.
Product instructions were only available in Japanese on the back of the pack, generating recurring customer support queries about use and expiration.
03 — Rationale
The thinking underneath
The site had to carry commerce, education, recipes, chef endorsements, heritage, and seasonal content without any of them competing. Six principles guided the work, each with its own logic and its own answer.
Interweaving, not stacking.
Commerce and education cannot compete for attention. They have to share every touchpoint, or the business case loses to the content and the content loses to the business case.
Recipes carry hotspots linking to the products inside them. Product pages embed related recipes and guides. A Learn dropdown mirrors the Shop dropdown in primary navigation. Every surface earns both trust and intent.
Content as conversion.
Every piece of content has to pull its weight in the funnel. Recipes, chef endorsements, guides, and press are not decoration. They are the mechanisms by which a new user moves from curiosity to purchase.
The homepage is sequenced to answer a first-time user's unspoken questions in order: what is this brand, who trusts it, what can it make, how do others use it. Chef endorsements from David Bouley and Ivan Orkin transfer authority. Product guides remove hesitation. Reviews and press build social proof. The product pages sit at the end of that sequence, not the start of it.
Cultural translation without flattening.
The Japanese character of Kayanoya is the brand's most distinctive asset. Removing it to suit US shopping norms would strip out what made the brand worth buying in the first place. The goal is accessible form, preserved essence.
Dashi stays dashi, with teaching wrapped around it. Micro Seasons are preserved as a concept but paced to a five-day rhythm that fits US shopping cadence. Japanese restraint, white space, and typography hierarchy carry through the design. American e-commerce patterns like filters, reviews, and Subscribe & Save shape the interaction layer. The Japanese soul stays. The American surface adapts.
Editorial layers as architecture.
Client-side customisation needs to be first-class, not a collection of one-off hacks that break the moment content changes.
A metafield and metaobject system turns editorial choices into structured features. Micro Seasons, seasonal recipes, featured articles, and curated bestsellers are all client-editable without developer intervention, using the same architecture as any other content type on the site.
Mobile-first hierarchy.
During the audit period, 69% of Kayanoya's users visited on mobile devices and 28% on desktop. The mobile experience has to earn the eventual desktop conversion rather than try to replicate the desktop experience in miniature.
Navigation is shallow by design, with a limit on how many layers deep a user can go. Product filters sit at the top of collection pages to avoid horizontal scrolling and excessive vertical scrolling on small screens. Large header images are reserved for the homepage only, so product and collection pages deliver content above the fold rather than hero treatments. Secondary sticky navigation sits on About and Product Guide pages, keeping dense content one tap away.
Progressive disclosure.
The site carries more content than any first-time visitor could absorb in one sitting. Showing it all at once would intimidate. Hiding it would undersell the brand.
Depth is revealed on demand. Mega-menus surface the range without burying the homepage. Recipe hotspots reveal products inside the image rather than listing them below. Filters, the Learn dropdown, and embedded content on product pages all work the same way. Show the surface, let interest do the digging. The difference between intimidation and invitation.
04 — Solutions
Key features
Fifteen design decisions anchored the refresh. Each answered a specific gap surfaced in the research.
Feature 01
Hero mega-menu.
A large, visually led mega-menu surfaces the product range, featured recipes, and seasonal highlights at the first moment of navigation. It doubles as a merchandising surface, giving the client a deliberate tool to direct traffic to specific products and recipes.
Feature 02
Learn dropdown.
Alongside Shop, a dedicated Learn dropdown groups product guides, brand story, rewards, wholesale, and related content in one place. The split between Shop and Learn makes the site's dual purpose architectural: Kayanoya sells dashi and teaches dashi, and navigation reflects both.
Feature 03
Micro Seasons header.
Custom animated icons rotate in the site header every five days, each tied to a traditional Japanese microseason. The feature signals the 1893 heritage and gives repeat visitors a reason to return. Ambient content, not a lecture.
Feature 04
Consolidated product pages.
Sizes, types, and sodium variants live inside a single product page rather than across fragmented listings. This solved the discovery problem driving bounce rate on the old site, and pairs with a mobile-first layout where screen real estate is precious.
Feature 05
Smart filters across products and recipes.
Collections filter by size, product line, sodium level, and price. Recipes filter by product type, season, cuisine, dietary need, and category. The recipe filter doubles as an education tool: a user wanting to cook Italian, Thai, or Mexican with dashi can find exactly that.
Feature 06
Recipe hotspots.
Recipe images carry clickable hotspots revealing which Kayanoya products appear in the dish. A shopper moves from recipe to product without leaving the image.
Feature 07
Unified search.
Search spans products, recipes, and articles in a single interface. A query for “miso” returns the soup collection, the recipes that use it, and the product guide alongside it.
Feature 08
Product Guides with step-by-step video.
Eight illustrated and video-led guides translate Japanese back-of-pack instructions for US shoppers, from How to Use Dashi to How to Prepare Chawanmushi Mix. Each guide is embedded directly inside the relevant product page.
Feature 09
Chef Index and Chef Single templates.
David Bouley, Ivan Orkin, Hisanori Yamamoto, and Yuko Kajino each have dedicated bio pages with signature recipes. The fastest credibility lever available to a first-time dashi buyer. The template is built to absorb more chefs as the US partnership programme grows.
Feature 10
Structured data for recipe rich results.
Every recipe emits a JSON-LD block with image, cook time, rating, and ingredient list. Kayanoya recipes appear as visual rich cards in Google search rather than blue text links, reaching cooks who are already searching for dinner ideas.
Feature 11
Judge.me reviews flowing into Google Shopping.
Reviews feed star ratings directly into Google Shopping ads, closing the visible trust gap against Ajinomoto and giving Kayanoya the review signal that three in four online shoppers rely on.
Feature 12
Subscribe & Save.
Dashi is a pantry staple once it becomes familiar. Subscribe & Save appears at point of purchase on every eligible product, letting shoppers lock in delivery at the cadence that matches their cooking. Retention infrastructure for a strategy that depends on teaching people to use the product regularly.
Feature 13
Favorites, Notify Me, and lifecycle email.
Premium products with short shelf lives move in and out of stock. Favorites saves what matters for returning shoppers. Notify Me captures intent from visitors who would otherwise leave empty-handed. Both feed into Klaviyo for abandoned cart, welcome, and post-purchase flows. The welcome series doubles as a dashi education sequence.
Feature 14
Accessibility as a design principle.
Accessibility was not in the brief. The designer advocated for it to be treated as a design principle. Four decisions at the design stage: clear focus states on every interactive element, a documented alt text approach for product and recipe imagery, mobile touch targets sized for thumbs, and Micro Seasons animations kept subtle enough to avoid triggering motion sensitivity. Honouring the heritage without making it a barrier. At delivery, the Accessibly widget was integrated as the user-facing layer, partially conformant with WCAG 2.0 Level AA.
Feature 15
301 redirect strategy at launch.
The refresh restructured several collection URLs. A full 301 redirect map at launch preserved every inbound link, search ranking, and bookmark pointing to the old site. /collections/noodle to /collections/noodles, /collections/drink to /collections/drinks, /collections/soups-miso-soup to /collections/soups. Invisible work until someone clicks a years-old link from an old email and lands exactly where they expected.
05 — Research
How the refresh got here
Stakeholder workshop
The refresh opened with a visual workshop and a round of group discussion and interviews with the client team. The direction that emerged was specific and useful. The client wanted a minimalist aesthetic, generous use of white space, and typography that read as Japanese-influenced without tipping into pastiche. They wanted the site to feel premium and to embody the sensibility of the people who founded the brand in 1893. The Japanese Kayanoya site was referenced as a tonal anchor. And they wanted education on every product, specifically how to use it. The last point became the organising principle of the entire refresh.
Behavioural analysis
Before Figma opened, analytics and session replay tooling came first. The patterns that emerged from the heatmap and frustration event tracking were unambiguous. Repeat rage clicks and shaky mouse events clustered around the SHOP dropdown. Session length was rising while conversions were not. Users were looking hard and leaving empty-handed.
Content and operations audit
A content audit closed the loop. The existing site had recipes but no teaching layer. Product instructions were only in Japanese on the pack, which was generating a recurring stream of customer support queries. There was no organised chef endorsement content, no pathway for seasonal product discovery, and no educational on-ramp for a first-time Kayanoya buyer. Three separate inventory systems were running in parallel, with no unified way to track expiration dates, which surfaced as a complaint theme in customer support as well.
The insight that pulled it together
The US market did not need a smaller version of the Japanese site. It needed an education-first version. From that point onward, every proposed feature was stress-tested against one question: does this help an American home cook understand, trust, or use dashi? The features that survived became the build list. Premium positioning, mobile-first delivery, accessibility, and cultural translation sat underneath all three verbs.
One constraint that shaped everything
Shopify does not offer native reference fields between blog content and product pages, which made the relational content structure the strategy required (recipes to products, chefs to recipes, product guides to products) technically impossible out of the box. The team engineered a custom metafield system to solve it, keeping content editorial in the back-end while behaving relationally on the front-end. It is invisible to the user and fundamental to the experience.
06 — Journey
User journey map
The team mapped the full user journey from first-time discovery through repeat purchase, overlaying the education, trust, and conversion touchpoints that needed to show up at each stage. The map became the coordination tool between content strategy, product design, and development. It made clear where to teach, where to reassure, and where to close.
07 — Architecture
Sitemap and flow
The sitemap below shows the fifteen-template architecture, organised around the dual thesis of shopping and learning. Each content type has a dedicated template, with a custom metafield layer bridging the relationships that Shopify's native CMS does not support. Recipes link to products. Products link to guides. Chefs link to recipes. The structure is editorial on the back-end, relational on the front-end.
08 — Outcomes
Engagement, converted
The refresh was designed to capture attention that was already there. The numbers since launch show it is working. Add-to-cart rate has increased nearly six-fold, cart-to-order conversion has risen by sixteen percentage points, and overall traffic has grown alongside the conversion lift rather than in place of it.
| Metric | Before | After |
|---|---|---|
| Add-to-cart rate | 5.7% | 32.4% |
| Cart-to-order rate | 43% | 59% |
| Sessions | 4,477 | 5,942 |
Add-to-cart and cart-to-order figures: January to April 2026. Session volume: 2025 full year compared to prior baseline.
Taken together, overall conversion has moved from 2.45% of traffic completing a purchase to 19.1%. That is roughly a sevenfold improvement in the funnel, built on top of traffic that was already engaged. The refresh did not need to generate new interest. It needed to capitalise on the interest that was already on the site.
— END —