Sammlung Goetz in Munich shows contemporary art in temporary exhibitions in its own exhibition building by Herzog & de Meuron and at various exhibition venues. The team around Goetz wants to make their art exhibitions accessible to a broad audience and therefore applied for a funding program of the kultur.digital.vermittlung of the Bavarian State Ministry of Science and Art, which resulted in this project with us.
The core objective was to develop a web app that offers tangible added values to the visitors and intensifies their exhibition experience – both in Sammlung Goetz's own premises and in other spaces. In other words, an optimal dovetailing of the stationary exhibition with accompanying image, text and sound information through the web app.
- User experience concept
- User interface design
- Technical concept & implementation
- System interfaces
- Teaser videos
- Illustrations
- Communication material
Digital guide through the exhibition
The web app allows the public to explore exhibitions digitally without having to resort to the labeling on the artwork itself. As soon as the guide starts, the aesthetics of the UI change – a dark mode signals that one is now in tour mode, the navigation fades out.
The tour guides visitors from room to room and provides information about the spatial concept and the individual exhibits. Orientation points can be found on an isometric map. Spatial interruptions, such as a change of floor, are resolved by intermediate screens. And at the end, the web app provides inspiration for further opportunities in discovering – analogue und digital.
Bottom sheet as picture frame
In order to not tear users away from the tour, the images of the artworks open in a bottom sheet, which is superimposed on the room page as a separate layer. The detail page of the artworks offers further and informative text and image content as well as exciting audio or video material. In order to show off a work to its best advantage, its respective background color can be customized.
The web app also makes it easy to digitally share exhibits or save them to your favorites. Navigation between the artworks in a room takes place via a slider, which creates a visual highlight with a coverflow effect.
Accessibility in all facets
A big focus was accessibility for as many target groups as possible. Accessibility options such as easy language, sign language, font size, and special content for children allow for highly individual visitor guidance. Key characteristics of the web app's interface are straightforwardness, subtlety and usability. The minimalistic and geometric forms are based on the architecture of the exhibition building and are supported by familiar design guidelines, e.g. activated icons in the navigation bar are displayed filled. A blurry glass filter adds lightness and is reminiscent of the windows of the exhibition building by Herzog & de Meuron. The dark color scheme of pages with high presentation content emphasizes colors particularly well, while text-heavy and informative pages appear on a light background. The color schemes are accessible and high-contrast, with the signal color orange used for interaction elements to ensure clear user guidance.
QR codes as the key to the web app
Scanning a QR code takes the user directly to the web app via the local WLAN. When the web app is opened for the first time, the onboarding screens allow users to specify settings such as language, location, and accessibility options. The appropriate exhibition location is suggested directly via the WLAN spot. And although the content differs from exhibition location to exhibition location, the structure of the web app remains the same to ensure a consistent user experience.
Analogue and interdisciplinary design process
In an interdisciplinary team together with the Goetz Collection, we developed a first LoFi prototype of the web app and a mood board for the user interface within five days. This design process was even presented in an interview for PAGE (issue 05.23) and thus made it into the cover story. At the end of April 2023, a first MVP of the web app was launched for the opening of the cooperation exhibition "(K)ein Puppenheim" at the Munich City Museum.
In subsequent expansion stages, a separate area is to be created for children, who can discover the exhibition themselves as part of a scavenger hunt. Furthermore, the 3D representation of some rooms is planned to enable an even more realistic navigation.
A specially designed Kids-Guide allows children to navigate through the exhibition step by step while completing various exciting tasks – similar to an exciting treasure hunt. From riddles to art activities, to audio experiences and puzzle challenges, there is something for everyone to discover. As they solve these tasks, the young explorers collect points and can work their way up the leaderboard. At the end of the discovery journey, the reward awaits: a digital badge, a placement on the leaderboard, and of course, a wealth of proudly presented art knowledge.
The technology behind
The web app is based on the CMS Neos and ensures a digital experience like in a native app by using Vue.js. Content can be easily and flexibly maintained by the content editorial team. Since some works may only be viewable digitally on site, the system has to recognize whether you are on site as a user. This is made possible by linking the local WLAN or IP information with the content-allowance settings of the factory images. An important part of the project is also the SVG map which is used interactively for navigation and was created individually for each exhibition. Finally, an interface to the TYPO3 system of the current website of the Goetz Collection was created in order to be able to play out current events and guided tours in the web app as well.
