Project Overview

The Brief: Kenson Vino is a boutique importer bringing elite Italian wines to Taiwan. They needed a digital home that felt less like a warehouse and more like a private cellar. I spent 4 weeks building an interactive portfolio that helps people explore wine through the land it comes from.

• Role: Solo UI/UX Designer
• Duration: 4 Weeks
• Tools: Figma, Competitive Benchmarking, Interactive Prototyping
• Main Focus: Information Architecture & Visual Storytelling

The Challenge

Italian wine is a maze. For many buyers in Taiwan, the sheer number of regions, DOCGs, and grape varieties is intimidating. Most importer websites make this worse by using dry, cluttered lists that provide no context.

Why it matters: If a user can't find a region or understand the history of a bottle, they won't buy it. Kenson needed to bridge the gap between "just a bottle" and the "story of the land." The goal was to turn a search for wine into an exploration of Italy.

Research and Discovery

First, I started looking at how luxury wine collectors and sommeliers shop.

Insights:

• Geography is the anchor: People often remember a region (like Piedmont) before they remember a specific producer’s name.

• Data is trust: Professional buyers aren't looking for marketing fluff; they need technical specs like pH, soil type, and aging methods immediately.

• The "Luxury" Gap: Local competitors often look dated and "techy." Kenson needed a "Quiet Luxury" aesthetic to match the price point of their collection.

Competitive Analysis: I analysed both local Taiwanese importers and global leaders like Berry Bros. & Rudd. Most local sites failed on mobile responsiveness and visual hierarchy, while global sites were often too corporate. Kenson needed to be Artisanal and Human.

User Research & Strategic Discovery
Wine e-commerce has an unusual problem: it serves two completely different users who want opposite things from the same page. To understand where existing sites were failing, I interviewed four people across the buying spectrum — a head sommelier, a prestige collector, an intermediate hobbyist, and a casual explorer.

When I spoke with

• David (Head Sommelier): Builds wine lists professionally. Needs technical data to train staff and justify selections to clients. Has zero patience for marketing copy.

• Mr Wang (restige Collector): High-net-worth buyer. Associates visual clutter with low quality. Buys on reputation, provenance, and aesthetic trust signals.

• Sophie (Weekend Hobbyist): Intermediate drinker, feels lost with Italian classifications. Wants to explore but needs a safety net — something to guide her without making her feel ignorant.

• Anna (Marketing Manager): Shops by mood, occasion, and food pairing. Doesn't think in vintages or regions. Buys when she can picture the wine at her own table.
  

Four friction points emerged consistently: 

Geographic Blindness: Users recognise producer names but can't place them. Without spatial context, regions feel like arbitrary labels rather than real places with distinct character.

The Data-vs-Story Split: Professionals need pH levels and soil composition to do their jobs. Casual buyers need the romance—the story of the land and the winemaker's philosophy. Most sites pick one audience and lose the other.

Terminology as a Barrier: DOCG, IGT, Superiore—these classifications gatekeep rather than guide. The taxonomy doesn't match the mental model of buyers who want to shop by occasion, food, or mood.

Aesthetic as a Trust Signal: For collectors, a cluttered or visually "loud" product page doesn't just look bad—it signals low quality and undermines confidence in the source.

How this changed the design

The most important finding came from David, a head sommelier: he said technical spec sheets aren't reference material — they're sales tools he uses to train staff and build wine lists. That reframed the Cartellino from a "nice to have" data layer into a primary professional feature. It needed to be scannable in under five seconds, not buried at the bottom of a page.

The collector insight (Mr Wang) settled a visual design debate I'd been having with myself. I'd been treating whitespace and typography as aesthetic choices. He framed them as credibility signals — the digital equivalent of the weight of a physical bottle. That's locked in the Paper & Ink direction.

The result was a Dual-Layer page architecture: an emotional top layer (photography, heritage story, food context) for Sophie and Anna; a functional bottom layer (Technical Cartellino, downloadable spec sheets) for David and Mr Wang. Neither group has to wade through content meant for the other.

Design Process & Strategy

Taming the Taxonomy (Information Architecture)

Italian wine is notoriously complicated. A single bottle has a producer, a region, a sub-region, a grape, and a classification (like DOCG). My first major task was organizing Kenson’s inventory into an Information Architecture that wouldn't give users a headache. I decided to build the primary navigation around three core pillars: Regions (for discovery), Producers (for brand loyalty), and Wines (for specific inventory filtering).

Designing for Two Distinct Behaviours

Through my initial mapping, I realised the site needed to support two completely different user flows:

• The Explorer: A user who wants to learn and be inspired. For them, I designed the interactive "Origins" Map. It turns the browsing experience into a visual journey across Italy.
  
  
• The Sommelier/Buyer: A professional who knows exactly what they want and doesn't have time to browse. For them, I created the A-Z "Producer Index" and a robust filtering system on the "Our Wines" page so they can jump straight to a specific Nebbiolo or price point.

Wireframing: Balancing Emotion and Data

The biggest layout challenge was the Producer and Wine Detail pages. They had to serve two masters. On one hand, Kenson sells high-end luxury, so the pages needed large, immersive photography and a compelling "Heritage" story. On the other hand, trade buyers need hard facts.

In my early wireframes, the pages felt either too much like a blog or too much like a spreadsheet. I iterated on the layout until I found the right rhythm: leading with the emotional story at the top, and anchoring the bottom of the page with a highly structured, scannable "Fact Sheet" and "Technical Cartellino" detailing the pH, altitude, and soil type.

Solution

Key Features:

The Interactive Atlas: A live map where hovering over a producer highlights their region. It turns navigation into an education.



The Technical Cartellino: A structured data grid on every wine page. It gives professionals exactly what they need—Residual Sugar, Total Acidity, Aging—in a clean, "label-style" format.



Editorial Layout: A producer index that uses oversized letters and generous whitespace to create a high-end, curated atmosphere.

What I'd Validate First: 

Does the Origins Map aid discovery — or just look good? If users consistently skip it for search, it's a beautiful dead end. I'd run one task: "Find a producer from Sicily you haven't heard of." Fewer than 70% using the map unprompted = reconsider its homepage prominence.

Does the dual-layer page serve both users — or satisfy neither? I'd give a casual buyer and a trade buyer the same Producer Detail page and ask what's missing. The gap between their answers tells me whether to split the view or hold the layered approach.

Is "Region" the right primary nav pillar — or should it be "Grape Variety"? Taiwanese buyers may shop by grape first. If card sorting showed Variety as the dominant mental model, the entire IA needs revisiting. That's the riskiest untested assumption in the current design.

Lessons Learned

Aesthetics need logic behind them. The Paper & Ink direction felt right instinctively — Mr. Wang confirmed why: whitespace and typography aren't decoration, they're credibility signals. That reframe changed how I justified every visual decision after it.

Test navigation taxonomy early. I built the IA around Regions, Producers, and Wines without validating whether that matches how users actually think. That assumption should have been challenged with card sorting in week one, not left untested through delivery.

The sticky map had a flaw I caught too late. When users scrolled past it, they lost spatial context without realising it. A breadcrumb or fixed mini-map would solve it — but it should have been a wireframe-stage catch, not a visual QA note.