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









