Suigenkyo
Intro
Design & Delivery
I led visual design for an independent redesign concept for Suigenkyo, a Japanese artisan retailer. My work spans user flows, wireframes, visual direction and animation concepts for a complete high-fidelity interactive Figma prototype. A 30-page presentation documents the reasoning behind the design. This self-contained concept was developed independently of the retailer.
Design objective
Premium pricing calls for more than attractive product imagery. I brought craftsmanship, makers’ stories and product details into the shopping flow to communicate what distinguishes the products and give customers a clearer basis for considering their value.
Research & Project Framing
I reviewed Suigenkyo’s original website and how other retailers presented artisan products. That work helped frame the redesign around the relationship between the products, the makers and the people considering a purchase.
-market research-
Insights & Art Direction
I shaped the visual direction around craftsmanship and the people behind each product. The user flow connects those stories with product information, giving visitors context as they explore the catalogue. The research materials and flow below document how I developed that direction.
-user flow-
Prototyping
I developed user flows and wireframes, then carried the visual direction into a high-fidelity interactive prototype. I designed layouts, information hierarchy and animation concepts around the makers’ stories and product details. The 30-page presentation documents the reasoning behind those choices.
Compare with original design · Product presentation
Let the product lead the experience.
The original page makes buying straightforward, but gives price and purchase controls greater prominence than the work behind the product. Materials, process and maker details sit behind separate expandable sections, leaving the opening view with little explanation of its premium price. My prototype uses large product and process imagery to establish that context within the main page.
-new product page showcase & slide deck-
Final Design
The finished Figma prototype brings together the page layouts, navigation and interaction design. My contribution was the visual direction and the design of the flows, screens and animation concepts. The examples below show how that direction appears across the website experience.
Compare with original design · Product context
More context for the craft.
The original product grid supports browsing by appearance and price. Long, widely spaced product names wrap across several lines, while the cards offer little context about materials or technique. The craft distinctions deserve more room than a catalogue label allows. My concept gives material origins and craft heritage dedicated visual sections, helping explain what distinguishes the products beyond their appearance.
Compare with original design · Maker storytelling
Give the maker a visible presence.
The original design places the maker’s story behind an expandable section below the purchase controls. Once opened, the biography relies mainly on long paragraphs, giving the person and their working process little visual presence. My design brings the maker’s portrait, name and craft imagery into the page, making that story visible as part of exploring the product.
-Final product showcase-
Next Work
