Nov 1, 2025

Trauffer

Heritage Brand Rescue

Web Design

Development

Role

UX Lead + UI + Dev Handoff

Timeline

25 Hours

team

Solo

platform

Astro / WebGL

Nov 1, 2025

Trauffer

Trauffer is much more than the wooden cow: a hotel, two restaurants, an experience world, events and a shop, all under one roof. The first design direction had stalled. I came in through Comvation with 25 hours on the clock and fixed the structure before anyone argued about a button. Once the information architecture worked, the visual system fell out of it. One brand that still lets each world feel like itself.

Web Design

Development

Role

UI/UX Designer Lead, Comvation

Timeline

25 Hours

team

PM, client, dev team

platform

Neos CMS / custom frontend & shopify

0
Turnaround
From takeover to final handoff, a complete redesign under a hard constraint.
0
Pages Architected
A stalled project turned into a 42-page high-fidelity system.
0
Business Units
Shop, Hotel, Restaurants, Events and HQ unified under one architecture.
Information Architecture

Visualizing Logic

Navigation was the whole problem. I built a single hub that routes people into all five business worlds and never makes them stop to think about it.

Home
Shop
Wooden Toys
Manufactory
Brands
Sustainability
Experience World
Cow Universe
Flagship Store
Bretterhotel
Rooms
Your Stay
Offers
Excursions
Restaurants
Alfred's
Rosa's Bistro
Events & Seminars
Seminars
Groups
Occasions
Social Program
About Us
History
Team
Careers
Contact

Dual Identity Strategy

Trauffer had to hold two things at once: the heritage of the wooden toys and the premium feel of the Bretterhotel. I built a system that shifts from light, airy layouts to high-contrast dark ones depending on where you are, so each world feels distinct but still part of one brand.

Landing Page

Landing Page

Dining Interface

Dining Interface

Experience Interface

Experience Interface

Design System

Design for Velocity

25 hours forced the right discipline. I grouped 42 pages into a handful of reusable types and built the UI kit alongside the designs, so one structure carried hotel rooms, restaurants, activities and company pages. The handoff shipped dev-ready.

Typography
Display
Lorem ipsum
Caslon Pro · Bold Italic
h1
Lorem ipsum
Caslon Pro · Bold Italic
h2
Lorem ipsum
Inter · Semi Bold
Body XL
Lorem ipsum
Inter · Light
Body
Lorem ipsum
Inter · Regular
Mono
Lorem ipsum
DM Mono · Medium
Colors
Primary
Red
#C03D3C
Dark
#191919
Sand
#CCA674
Neutral
0
#FFFFFF
50
#FAF9F6
100
#F3F1EC
200
#E6E1D9
500
#B8B8B8
700
#404040
900
#141311
Brand
50
#FFFFED
100
#EADECF
300
#E4D0B6
500
#E3A565
700
#9D8875
Spacing Scale
xs
4px
sm
8px
md
16px
lg
24px
xl
40px
2xl
64px
3xl
96px
Iconography
Trauffer
Shop
Hotel
Plate
Calendar
Arrow
Core Components
Input Field
DefaultActiveOutline

Outcome

Five business worlds. One navigation, one system. Solved structure-first, in 25 hours.

What shipped

A dev-ready, 42-page high-fidelity prototype that unifies Shop, Hotel, Restaurants, Events and HQ under one information architecture.

What improved

A reusable set of page types kept all 42 pages consistent and fast to build, and made the handoff to the dev team clean.

The proof

A stalled project and a 25-hour budget in. A 42-page system, shipped dev-ready, out. Constraint is where I do my sharpest thinking.

Let's Talk

I'm most energized by projects where I can dig into complex problems, collaborate with smart people, and ship things that genuinely improve someone's day.

Comment

Shain

Open to contract work, full-time roles, and interesting conversations about hard design problems.

1