Asian Art Museum

View Website
Description
Asian Art Museum of San Francisco is one of the largest museums in the western world, devoted exclusively to Asian art, housing a collection of over 17,000 artworks. I worked with AAM while I was employed at Lion Interactive. The museum was at the beginning of its digital transformation project and with the new logo and brand strategy from Wolf Olins, they approached Lion to translate the brand across digital ecosystem and redesign and rethink the whole digital experience - from the museum website to digital signage and interactive masterpieces app. We used the new brand idea “Awaken the past, inspire the next” as a guiding principle for our work, keeping in mind the importance of increasing the museum’s relevance to a wider audience, making it accessible for all.
Services
Website Design
Product Design (UI/UX)
Design System
Client
Asian Art Museum / Lion Interactive agency
Approach

We worked closely with the museum team to align on goals and vision for the museum's digital transformation, and support the grand re-opening in 2020. Some of the main goals we established at the begining of the project were to:Promote consistency, clarity and curiosity in every AAM digital brand experience.Expand brand vision and identity across the whole digital experience and multiple devices and channels, while keeping in mind the brand vision and creating an inclusive and accessible experience for all, regardless of age, ability or native languageCreate scalable system with reusable elements and templates, that’s easy for museum staff to use and update

Digital Strategy

Museum visits, brainstorming and testing sessions and workshops between Lion and museum team helped us in getting key insights that informed our design decisions.To create an experience that supports exploration and discovery we needed to dive deeper into different types of visitors and their needs and expectations. In collaboration with the museum team we captured main personas and also defined core goals and needs that span across all of them.I also worked on extending the brand identity to digital channels by refining color pallete (making sure all colors pass accessibility standards), creating typographic system and graphic elements used across digital touchpoints.

Accessible design system

We documented the digital design system containing typography rules, colors, and interactive components to keep UI consistent across touchpoints. We put accessibility and usability standards into practice and made sure that the museum is inclusive and accessible by designing for multiple reading and learning styles, supporting different devices and operating systems, colors and text are checked to pass legibility standards, all content is screen reader friendly and we minimized animation usage. Finally, our designs also support multiple languages and font-size controls.

New Website

The new asianart.org brings together the main marketing website, the education portal, online store and online collection — all as a single, comprehensive museum experience. While working on Information Architecture we were looking for ways to simplify user journeys and kept the majority of the website accessible in 3 clicks or less.We separated navigation into two levels and put focus into the most visited sections of the website first. The larger navigation is available under the hamburger menu and that way reducing the decision fatigue and giving visitors shortcuts to the info they will most often need. Visitors are clearly presented with hours of operation and admission. Ticket purchase is always easily accessible, without pulling visitors out of their browsing experience Content on a page level is structured to support exploration by offering relevant content, promotions and calls to action at the right time. Contextual ticketing information, membership promotion, featured events and store products are integrated seamlessly into page narratives, and supported by a modular design system.

Masterpieces Experience

Masterpieces is a special collection of museum objects, important historically, or rare, works of specific type and quality that you don’t often have the chance to see. We got a task to create iPad app that will be installed in the museum, serve as a self-tour and tell the story of these incredible objects in and engaging way and allow visitors to take a closer look above, below and behind objects that are always in a fixed position.App should serve both visitors and curators who lead museum tours. Table of contents was introduced specifically for curators to easily skip to specific section during the tour.And lastly, the app UI should work well for both 3D objects (figures, sculptures, vases etc.) and 2D objects (textile, paintings etc.)We took these requirements and developed the visitor experience in such a way that it feels like a private tour with a curator.

Experience and Environment

While we wanted visitors to notice these digital moments in the museum experience, it was also important that they fit seamlessly into the museum environment and do not disturb the artwork appreciation and exploration. While I initially had both light and dark visual concepts, we decided to move forward with dark option to avoid the white glow and stark contrast in the lower light environment. When the app is in sleep mode the screen shows cover UI with camera movement over the object to subtly draw attention and spark curiosity of visitors looking at the artworks.

Interaction Prototype

Results

In 2019, the final Masterpieces Experiences were installed in the galleries as they reopened following renovation. the Masterpieces Experience was popular with visitors, allowing them to take a closer look at objects and to learn more about their features, history, symbolism and significance.Unfortunately, a few curators had concerns with the quality of the 3D models, which had to be compressed in order to be displayed in a web browser. While the quality was not an issue with visitors, the curators decided they did not feel comfortable displaying the 3D models in the galleries, so the final Masterpieces Experience features the high-resolution photography in its place.

Digital signage

The last piece of museum’s digital transformation was digital signage - dynamic digital displays located throughout the museum that deliver admission information as well as program, exhibition and marketing promotions (cafe, store, membership)Some of the factors we needed to consider as part of our digital and experience strategy were display positions in the museum - at what point in the museum exploration can we offer the most relevant info, how can we expand design system and adapt it to this new media while making it modular and flexible, making sure content has good legibility and clear hierarchy.

Interaction prototype for switching to the next event in the list

Notification bar was included as optional element to be used for important visitor alerts.