An 80,000 m² campus you can explore digitally.

The starting point

The Ullsteinhaus was built in 1925 and 1926 as a printing house and is a listed building. The campus has almost everything a workplace needs: a gym, canteen, café, medical center, 24/7 security, underground parking and its location on Tempelhof Harbor. The line from asset management: we have a lot, but nobody knows.

Berlin has more commercial space than demand. In this market, a PDF with floor plans no longer decides anything. What was needed was a presence that reaches three very different groups: prospective tenants looking for 500 to 6,000 m², large tenants who come through brokers, and the tenants already in the building.

The requirements were clear. Real photos instead of renderings and stock images. No glossy brochure. A scroll experience that makes you want to be there. And a site that doesn't stutter despite the 3D.

What we did

Workshop and concept

It started with a three-hour workshop with the leasing and asset management teams. We then analyzed 14 comparable sites, nationally and internationally. The result was a concept document covering target groups, style direction, hero concepts, site structure and the 3D showcase.

We deliberately kept the site structure lean: home, campus and surroundings, available spaces with the 3D model, and contact.

Brand Direction

The direction sits between editorial and heritage. The building's history is a selling point, not a costume. We show what's really there: large interior shots, warm daylight, the loft character of the historic building. The effect we're working toward is simple: I'd love to work here.

• a warm, earthy color palette with brick-toned orange as an accent, used very sparingly on light surfaces
• Aeonik as the house typeface, with web licenses
• Core values: community, focus, creativity, productivity, connection
• Logo as a wordmark in Aeonik, developed over several concept rounds
• LinkedIn banner and icon in the same direction

The 3D model

On the Available spaces page, the entire campus is shown as a 3D model. You can rotate and zoom it, with the mouse on desktop and by touch on mobile. By default, the model shows an X-ray view: the building is semi-transparent and the rental spaces appear as pulsing dots. If you like, you can switch to the material view.

Hover over a dot and an info card appears. A click selects the space and opens the details. There's also a directional pad for navigating.

Available spaces with filters

Next to the model runs a list of all spaces with filtering and sorting. Filters and model are linked: the 3D view only shows the dots that match the filter. Every space has its own link you can share.

The building names are the ones the property uses itself, such as Altbau Haus 1 or Neubau Türme 1 bis 3. Only spaces that are currently available are shown. Each space links to its listing on ImmobilienScout24 or to a PDF brochure.

• Filter by building, floor and size
• Sortable results
• Deep link for every space
• Listing or brochure right at the space

Image and motion

The site lives on real footage of the campus. We retouched photos and videos and color-graded them to match the site's look, edited the hero video ourselves and added our own material. Scrolling is smooth, and page changes run through transitions instead of hard reloads.

Tech and integration

From CAD model to the web

We received the master plan model from SketchUp: 33 MB as SKP, 150 MB as OBJ, 1.57 million faces, exported in millimeters. In Blender, we scaled it to meters, isolated the buildings from the urban context and optimized it for the web.

The model is delivered as a GLB with Draco compression, which turns 27 MB into 2.1 MB. We host the Draco decoder ourselves.

Spaces from the floor plans

The rental spaces come from the floor plan PDFs, level by level. We traced the spaces as polygons and calculated their size from the polygons. Partial areas such as terraces carry a suffix in their name and are added to the main space. That's how 97 objects became 78 rental spaces.

Our rule: the floor plan is the truth. Visual corrections must not overwrite the data. Wherever a space looked wrong, we rendered the original plan and laid the polygon over it. We adjusted the position of the floors by hand. For approval, there was a prototype as a single HTML file that runs with a double click.

Viewer in three.js

The viewer is written in three.js, without any additional framework. We tested several material variants, including real clinker brick textures. In the end, the X-ray view stayed the default because it runs smoothly on mobile and desktop without overloading the graphics card.

When you switch pages, the viewer fully clears its memory. RAM usage drops from 212 MB to 10 MB.

The website around it

The site is built statically with Astro 5 and runs on Vercel. All design values come as tokens straight from Figma, each with a reference to its source in the design. The font is self-hosted. Scrolling and transitions run on Lenis, GSAP and Barba.js.

For search engines, there's a sitemap, structured data, preview images and an llms.txt. The cookie banner is a custom solution, and Google Maps only loads after consent.

The result

Since September 2026, the campus has been online at ullsteinhaus.de, with the 3D model, space list and contact in one place. The math behind it is simple: a single lease signed through the site saves around €30,000 in broker commission.

Mobile

This is how the website looks on a smartphone.

Metrics

Measured with Google PageSpeed Insights on October 21, 2026. View report

Project details

Client

Ullsteinhaus

Industry

Real estate & finance

Year

2026

Services

Workshop and Concept, Brand Direction, Logo, UI/UX Design, Development, 3D and Motion

Technology

Astro, three.js, GSAP, Lenis, Barba.js, Vercel