Digital Product & UX/UI Designer

Digital Product & UX/UI Designer

Digital Product & UX/UI Designer

BODEN UND WEIN

Boden & Wein is a digital experience created with the Bavarian State Institute for Viticulture and Enology (LWG).

The project transforms complex geological research into a clear, emotional, and intuitive storytelling website. Through soil profiles, stone layers, and Triassic epochs, the platform reveals how geology shapes wine character.

My role covered research synthesis, UX direction, visual storytelling, and responsive UI design.

01 — Challenge

Challenge

Translate complex geological and scientific data into an intuitive, emotionally engaging, and visually accessible digital narrative.

Key Tasks
  • Convert scientific soil & stone data into visual stories

  • Explain geological epochs without scientific overload

  • Connect soil → stone → formation → wine in one narrative

  • Ensure scientific accuracy while keeping the content simple

  • Build a responsive design for wine lovers, educators, students

02 — Process/Research

Research Focus
  • Geological soil analysis

  • Triassic time layers (Buntsandstein, Muschelkalk, Keuper)

  • LWG scientific literature review

  • Field mapping & expert interviews

  • Narrative modeling: epoch → stone → soil → wine

  • Wireframes + prototype flow

03 — Design System

Visual Direction
  • Stone & soil textures, geological violet accents

  • Neutral backgrounds for clarity

  • Organic shapes echoing geological formations

Typography
  • Weaser for historical tone

  • Noto Sans for scientific readability

Components
  • Scroll chapters

  • Soil profile diagrams

  • Tasting comparison modules

  • Circular “soil drop” buttons

04 — Outcome & Learnings

Outcome

A high-fidelity Figma prototype that demonstrates how scientific geology can be translated into an accessible and emotionally rich digital storytelling experience.

Key Results
  • Designed a scroll-based narrative connecting epoch → stone → soil → wine

  • Created educational value through clear illustrations and structured UX flows

  • Delivered a mobile-first and desktop-ready prototype showing responsive layout intention

  • Built a visual direction that merges scientific clarity with atmospheric storytelling

Personal Learnings
  • Translating complex scientific research into intuitive UX

  • Using illustration as a tool for explaining abstract geological processes

  • Structuring multi-layer information into digestible chapters

  • Strengthening narrative-driven prototyping within Figma