Beyond Closed Doors — A Museum Collection, Digitally Reopened

Project Type

360° Virtual Tour

Client

Museum für Islamische Kunst, Berlin
 via Polyvista

Year

2022

Role

UX/UI Design and Concept — commissioned by Polyvista

When the Museum für Islamische Kunst in Berlin closed for renovation, its collections became inaccessible to the public for years. The challenge was to keep the museum present and its knowledge alive — not through a digital replica of its physical spaces, but through a new kind of experience designed specifically for the online medium.

01 — Challenge

Beyond the Physical Room

Designing a digital museum experience raises fundamental questions. How do you create a sense of space without replicating physical rooms? How do you guide a visitor through a virtual environment — establishing orientation, enabling movement from one space to the next, and maintaining narrative coherence throughout?

The content layer added further complexity. Individual artefacts needed to be presented in context — not as catalogue entries, but as part of a larger story. The experience had to be engaging and accessible, with key information communicable in under five minutes, while still offering depth for those who wanted to go further.

An additional requirement shaped the entire approach: the concept had to function as a blueprint — a reusable framework that could serve as the foundation for any number of future tours, each with its own theme and visual language.

02 — Approach

From Orientation to Discovery

The first layer is a 360° panoramic environment — the visitor stands at the centre, with no fixed start or end point, moving left or right to discover the different thematic entry points. Scene titles and subtitles provide orientation within the space, making the structure legible without imposing a fixed path.

Each scene is a visual collage — a distinct motif developed by illustrator Birgit Lang, commissioned by Polyvista. The illustrative language can vary from tour to tour, while the underlying interaction model remains consistent. Some artefacts include subtle animations within the illustrations, adding a layer of life to the environment without distracting from the content.

Clicking an entry point moves the visitor into the artefact scene — a more contained, focused view that mirrors the original scene with subtle visual shifts. Interactive elements are made visible through pulsing dots and media player icons, signalling the presence of text, image, video, or audio content without cluttering the visual environment.

Each tour opens with a short animated teaser — setting the tone, establishing the visual language, and inviting the visitor into the experience before the tour begins.

03 — Interface & Interaction

Designing the Interface Layer

The visual character of the tour is defined by the illustrations and the museum’s CI. My role was the UX/UI design: the interaction model, navigation structure, and interface elements that give the experience its structure and logic.

The interface had to coexist with the illustration without competing with it. Entry points are marked subtly — visible enough to signal hidden content, restrained enough not to overpower the visual environment. Interactive elements within the artefact scene are indicated through pulsing dots and media player icons, keeping the UI minimal while remaining informative.

The navigation bar is anchored at the bottom of the screen with a deliberately organic, non-strict border — a structural element that acknowledges the illustrative nature of the environment rather than imposing a rigid interface logic on top of it.

Text legibility in a 360° environment required a specific decision: text fields are displayed in 2D, without perspective distortion, keeping content readable regardless of the viewer’s position in the space. A short introduction text opens automatically upon entering each artefact scene — orienting the visitor and hinting at how many artefacts are waiting to be discovered.

Each tour opens with a short animated teaser — setting the tone and establishing the visual language before the experience begins.

04 — Reflection

In Retrospect

The blueprint proved durable — the concept and interaction model were adopted for three further tours, with only minor modifications. Ambient sound, one of the directions I would have liked to explore further, was picked up in a later tour.

The most persistent challenge of the 360° format was visibility: how does a visitor know what exists outside the current frame? The solution was motion — a subtle shift of the scene in the direction of movement, encouraging exploration rather than directing it. In retrospect, a small visual hint at the start of the tour might have helped orient first-time visitors before the exploratory logic became intuitive.

Looking back, there are directions worth pursuing further. The 3D possibilities of the format remain underexplored — foreground and background could be used more deliberately to create depth and layering. And visual entry points beyond text and headlines deserve testing: are there more intuitive or surprising ways to signal the artefact scenes?

View Tour

Designing for Expertise —Website Relaunch for a  High-Precision B2B Brand

Project Type

Website Relaunch, UX/UI Design

Client

Smart Material Corp.

Year

2025

Role

UX/UI Design and Webdevelopment

Smart Material Corp. manufactures advanced piezoceramic composites for aerospace, robotics, and research. The relaunch set out to make a highly specialised product range accessible to a diverse audience — while building a visual brand presence that matched the sophistication of the products themselves.

01 — Challenge

Structural Challenges Before Visual Ones

Smart Material’s existing website no longer reflected the sophistication of their products or the diversity of their audience. Navigation was complex, mobile was an afterthought, and the visual language no longer matched their market ambitions.

The core challenge was structural: a highly specialised product range needed to be accessible to a diverse audience — from engineers and procurement professionals to researchers and first-time visitors — through a single interface. A standard e-commerce approach was unsuitable from the start: every order requires a compliance check, making direct purchase impossible.

Brand assets were nearly absent. An updated logo and a color direction — blue and purple — were the starting point. Beyond product photography and a few technical drawings, no imagery, CI, or visual system existed. A coherent visual language had to be built from almost nothing.

Previous Website

02 — Approach

Bringing Order to Complexity

Restructuring the information architecture was the first priority — regrouping products into clearer categories, and introducing a visual mega menu that allows fast orientation without prior product knowledge. A new Applications section was developed to bridge the gap between technical specification and real-world use, making the product potential tangible for less technical visitors.

Product pages were rebuilt around consistent parameter presentation, tab-based organisation for technical details, and dedicated sections for data sheets and downloads. Table layouts were redesigned for legibility — improved contrast, clearer hierarchy, and consistent formatting across the product range.

03 — Visual Identity

From Color to Visual Identity

The project provided a logo and a color direction — blue and purple. Developing a coherent visual language beyond that was not required, but became a deliberate design decision — driven by the goal of creating a recognisable presence in a competitive market.

The key visual concept — fibers in motion, flowing forms, a sense of material precision and advanced technology — was developed through ideation and iteration, and realised using AI image generation. The resulting visuals foreground the material qualities of the products themselves, giving the brand a distinctive layer without misrepresenting what the products look like.

What started as a website visual language has since been adopted more broadly. The key visuals, typography, and color system now extend into the client’s offline communication as well, giving the brand a consistent presence across contexts.

04 — Reflection

In Retrospect

The relaunch was received positively across the client’s customer base. Brand visibility improved, and the new Applications section opened the product range to a wider audience. The site is currently being extended with multilingual support.

The hardest design problems on this project weren’t visual — they were structural. Every significant decision was an answer to a constraint: a diverse audience, no standard shop function, a product range of considerable complexity, and almost no brand assets to build from.

Making technical complexity navigable. The mega menu was restructured around a hierarchy developed with the client — primary product groups prominently featured, secondary groups receding into a side column. The Applications section connects specifications to real-world use, making the product range tangible for less technical visitors.

Solving the ordering problem. Without a standard shop function, the ordering process needed to be communicated proactively. A persistent Order button combined with a visual „How to Order“ schematic makes the process transparent from the first visit — accommodating both fixed-price products and those requiring individual consultation.

From information to communication. The most consistent change across the site was the shift from technical labeling to active, human language. Headers became communicative, calls to action were integrated throughout. For a highly specialised B2B product, this shift made the site feel approachable without sacrificing credibility.

smart-material.com