National Musem of Qatar: Interactive Exhibit Design

Overview

The National Museum of Qatar commissioned AllofUs to design and implement 25 interactive digital exhibits leading up to the museum’s grand opening in early 2019. I led interaction design efforts for the project, including initial prototyping and the creation of a (atomic design based) pattern library. I contributed end-to-end UX/UI screen designs across multiple exhibits.

Team

I worked with an amazingly talented team dispersed across three geo’s (Doha, San Francisco, London) comprised of a UX/UI lead (me!), an art director / head of studio, project managers, 2 visual / graphic designers (Nicole Manzanero and Adrienne Gehan), and a rotating team of developers.

Defining an interactive identity

Prior to my involvement in the project, the exhibits’ overall visual and brand identity had been broadly defined, drawing inspiration from the building’s architectural motifs (designed by Pritzker Prize-winning architect Jean Nouvel). Still, quite a few more interaction and interface standards needed to be created and maintained throughout the project’s next set of phases.

STANDARDIZING SCREENS AND LAYOUTS

One challenge we faced was the variation in content volume and type per exhibit. Each exhibit varied in both the amount of media assets (historical or high resolution photographs, custom infographics, and videos) and the amount of written copy (from a few lines to pages of descriptive paragraphs and historical anecdotes). Variation in screen sizes added yet another layer of variation and complexity — they ranged from standard 1920 x 1080 24” monitors to ultrawide stretch touchscreens (3840 x 600).

I ended up creating a “pick and pull” design system of sorts using Sketch, capping us 9 major types of screen layouts across all exhibits.

An example of a standardized template (2 columns; left zoomable image and right vertical scrolling) mapped to the exhibits using it:

STANDARDIZING UI COMPONENTS

The same principles had to be applied at the component level. Drawing inspiration from AllofUs’s past work in the museum space along with other design-driven organizations with well-established design languages (Airbnb, Atlassian, Audi to name a few atop the alphabet), I built out an atomic-style library in Sketch for our team. UI components are organized into several categories and ‘symbolized’ for reuse and easy variation.

STANDARDIZING INTERACTIONS AND ANIMATION

It was imperative to the client that the movement of elements, transitions between screens, and loading of media content 1) match the brand above, and 2) communicate the cultural significance (and in some case religious reverence) of any included images and descriptive copy. Historical context was also an important factor here, as exhibits often followed a timeline-based narrative (older content should load first, fades as user scrolls, etc.).

Screen iterations and evolution

Our team put out 7 major versions of designs for 20+ exhibits, over a 9 month period. Sensitivity of cultural and religious content affected visual hierarchy of how content was displayed, even down to the specific treatment of text overlapping and object animation. All designs also had to take into account both R2L (Arabic) and L2R (English) versions of each screen. (language switcher component for each exhibit).

Grand opening-worthy

The National Museum of Qatar opened its doors on March 28, 2019. Though I left the project prior to final user testing and production implementation, the 25 exhibits I contributed designs to are dispersed across multiple sections of the museum’s floorplan today!