UI Graphic Exhibits – Kristina Rudolph

Ann Arbor Hands-On Museum (AAHOM) is a 501c3 hands-on children’s science center located by the University of Michigan’s campus

Four images from left to right.
1. A black looking vertical drum with white lines shows off to the left of the screen showing a white label affixed to the right of it. The white sign is covered with a bunch of unreadable black text.
2. The same drum but the graphic is updated with a red background and black boxes containing a much more visual design flow that is clearly more organized but still unreadable from the distance.
The third image shows a round stool with green top and a purple base. The top says ball bearings and had an arrow pointing to the middle. The far right image shows the same stool with a new graphic on top of it. This graphic says Sit and spin with directional white arrows on a dark blue background. There is also some information and a cut away graphic on the image that can't be read from the distance. These design of these images and the evolution of this design system and these signs will be explained below. — Two different exhibits show before and after with a cohesive design identity

Overview

Why / How / What

WHY: Older exhibits looked tired and lacked a unified design or spacial flow within each room. Reading content was long and avoided because of the high cognitive load for children and distracted parents
HOW: Qualitative ethnographic Ux research revealed a lack of engagement or reading of exhibit content and many heuristics were unclear on how to use some of the exhibits
WHAT: Exhibit outcomes (below)

Exhibits in shared spaces lacked flow and unity. Exhibits were made of various materials in different shapes and colors. UI interactive experiences and labeling lacked continuity.

Outcomes

New and returning donors stepped forward with larger-than-ever donation amounts after seeing the transformation
Visitor engagement time increased in areas that were formerly abandoned in the museum
The museum and exhibit director’s awareness realized the potential ROI on creating new design and material clarity
A design system with themed backgrounds and logos were created with the exhibit director to create a cohesive identity
Less text with larger fonts improved accessibility for young readers and distracted parents, while microcopy reduced cognitive load

A graphic with a red background showing wavy lines has big black capitalized text and reads wave machine.
Underneath are two black boxes with white writing inside of them saying try this in one and what's happening in the other.
To the left of try this there is a round icon that looks like red button with a white magnifying glass looking iconography.
This is followed by three rows from top to bottom with red orange and yellow inner boxes to the main black box. They are labeled at the right with the numbers 1, 2, and 3 respective to their rows.
The bottom half of the graphic has a yellow looking button at the top left of the white words followed by a green/blue gradient box with three short paragraphs of black bold text underneath. This other text is too small to be read here. — One of the finished UI graphics shows relatable iconography similar to mobile device icons. Color-coded numbering system guides users through a “Try This” exercise.

Discoveries

The exhibit tech role required servicing, cleaning, and potentially updating the museum’s 250+ exhibits. After test piloting part of new brand identity proved successful the museum director gave clearance to work with the exhibit director to develop a complete brand identity of UI labels for a cohesive UX brand identity

A wood shop space shows Kristina crouched down and smiling over a thick yellow vertical tube with an inner diameter that is larger than her head. She has brown hair tied back, safety goggles on her head and gray, teal, and black grip gloves on her hands. She is wearing a white shirt. Behind her is a long yellowed table and a metal high back studio chair. Off in the distance there are rows and rows of various thin wood looking materials placed in a giant vertical looking orientation. — Kristina at the off-site shop poses next to a new exhibit being built

The success of the project grew to necessitate working with the marketing director to develop marketing materials to raise donor opportunities and awareness.

Pages from the complete donor/sponsorship packet developed for the museum

Proven design success extended further to the development of various internal signs, labels, and banners created for other areas of the museum. For these projects visit http://uxkris.com/portfolio-aahom-gd/.

Original Layout & Flow

Text-heavy label reading was ignored or the entire exhibit was abandoned
Labels lacked consistency or a brand design system within shared spaces
Every sign had different shapes, fonts, and hard-to-read hierarchy
Spaces and exhibits were dirty, worn, and tired, needing facelifts
The “Try This” and “What’s Happening” headlines appeared on many of the exhibits as a reoccurring element which was kept

Images below show text-heavy labels lacking design consistency or a cohesive brand identity

A row of four images shows the eclectic nature and variances of exhibits labels all of which use different fonts.
1. A Zoetrope exhibit shows a black cardboard wheel inside a clear polycarbonate box on a wood base. On the top of the exhibit is a neon green sign with the words Zoetrope in purple capital letters. There are some blue swirls on the image and lots of black unreadable text.
2. A red round label on a blue/purple background says solve-it central In orange and blue respectively. The word extras is capitalized in a yellow funky font. Lots of smaller yellow text is below these titles and covers flows to each edge of the circle to the bottom.
3. At the top of the image is a scrawling cursive unreadable title in white on an orange bean shaped label. Underneath are paragraphs of illegible white text with a QR code at the bottom of the label.
4. A red rectangle background contains some large circles of yellow, green, orange, pink, and tan. Each circle is filled with black unreadable text.

Three images from left to right show more of the museum's eclectic labels.
1. White lima bean shaped graphic says Bernoulli Principle in red with a picture of two red filled circles on top with some blue lines flowing on either side of them. Below the Try this and what's happening red titles are a bunch of bullet points in black text.
2. A white bowl-shaped graphic is hard to read with a light blue text title saying how does the ball get to the top? The rest of the graphic is also filled with smaller light blue unreadable text.
3. A rectangular label on a yellow background says giant zipper. The graphic has a large red zipper around it looking like it is being unzipped downward toward the lower left corner. The yellow background has a bunch of black text inside of it.

Two rectangular graphics from left to right.
1. On a light blue background read the words Pipes of Pan in a thin long font of blues and purples. An oval near the upper left below the title says Try this in pink text with unreadable text below the left third of the page. The center of the page has rows of alternating purple and pink dots and the right side says What's happening in purple text with other unreadable blue text below it.
2. An unreadable graphic with a big yellow background has some purple cursive text followed by lots or rows of text in two columns. Three is a large orange music note graphic going off to the upper left side of the page.

Initial meeting

Tasked with taking care of the exhibits via the direction of the exhibit director I cleaned, painted, and updated each exhibit’s look.
I proposed a series of exhibit UI labels to unify the eclectic looking exhibits and began to create a design system.

Two images of the siren exhibit show a before of yellow busy graphics (previously discussed above earlier) and the new green cleaner design based on the earlier explained color number system with the magnifying glass and lightbulb icons and black boxes.
Below each graphic are a series of buttons and knobs in a row. The first button is a large green lit button followed by a small round wheel dial and four large yellow unlit happ buttons to the right. — One of the first redesigned exhibits show the new UI design system labels

Research

With the exhibit director’s approval, after trying some prototypes and watching visitors interact with the heuristic of temporary taped-on labels I sent the designs out for print production. The positive visitor response and cleaner look intrigued the museum’s director.

I was given the green-light, from the museum director, to update all exhibits and graphics on the first and second museum floors after he saw the incorporation of the new graphics and cleaner exhibits.

Working with the exhibit director, we created a cohesive set of different scientific-themed backgrounds as a basis for the new design system.

Background themes for exhibits show waves, digital dots, reflection/refraction lines, magnetism plus and minus signs, motion dots regressing into space — Background themes mimic waves, digital, reflection/refraction, magnetism, and motion

The new graphic exhibit labels were created to be colorful with easy-to-read text and easy-to-navigate visuals to guide them.

Personas / Interview / Observation

Non-verbal observational heuristics were collected nearby so that engagement with the exhibit experience was not hindered or altered. Personas and interviews were not part of this work.

Design

Icons, resembling apps, were used to guide users through their discovery process with familiar-looking elements
A color-coded numbering system with matching color bars let users of all ages follow suggested steps
Each color bar had a step of the “Try This” process, carried over from the original museum labels
The bottom area had further reading to understand what was happening as the user played
Each label had a background representing a scientific-based theme (waves, digital, reflection/refraction, magnetism, and motion)
The content was simplified, shortened, and reorganized for easy readability
When space allotted, hand or “in-use” drawings provided clues on how one could engage with the exhibit

Three round icons from left to right show a red background with a white outlined icon of a magnifying glass, a yellow background with a white outlined lightbulb, and a green background with a white icon resembling a world with two perpendicular ovals inside of a circle
Underneath these three buttons is a red number one with a red bar next to it and below that a orange number two with a shorter orange bar at its right. — Icons resembling mobile apps and a color-coded bar number system

Below are some examples of the 50+ exhibits that were refaced throughout two floors of the museum.

Stationary “UI” layouts show potential ways to discover or interact with the tactile hands-on exhibits. Labels include drawings and cutaways showing mechanical details when applicable or in-use drawings with hands.