top of page
A still from Columbia College's Interactive Arts and Media capstone project for The SUE Experience.

The SUE Experience - Capstone

UX Design + Research, Animation, Illustration, Videography, Photography, Documentation, Fabrication, Debugging - 2018

Drag and drop different Chicago staples to see if the Field Museum’s SUE the Tyrannosaurus rex can crush that object!

My Interactive Arts + Media Team class collaborated with the Field Museum to come up with some prototypes for two different interactive elements to potentially be included in the new SUE exhibit when the dinosaur moved to their own room.

One side of a colorful brochure to highlight the process of our project for The SUE Experience.
The inside of the brochure highlighting our process of our project for The SUE Experience.

The Process

We started by all pitching project ideas then voting on the strongest concepts. We presented these ideas to the museum, and they gave us the green light to move forward. One group worked on a drag-and-drop entertainment piece aimed at all ages, where you can see if SUE would be able to destroy that object. The other group worked on a virtual fossil exploration, where users could explore points of interest of different fossils and artifacts that would be on display in the exhibit. 

Below are the posters that some designers on the team made for the event space we put together to show our process to folks at our school. This highlights the stages of our project's life cycle.

Two colorful, side-by-side posters to explain the first two stages- Research and Ideation- of our capstone project for the SUE Experience.
Two colorful side-by-side posters highlighting the third and fourth stages- Field Trip and Pitches- of our capstone project for The SUE Experience.

My team worked on the drag-and-drop concept. I made some animations for the "yes" and "no" responses as well as created various color and design style samples for our contact on the Field Museum's team to choose from for the final design. Before we got into the design process, we did some rapid paper prototyping, where we conducted A/B tests with prospective users. We figured out the logistics of the concept this way.

Below is a look at a few variations of the layout in the early iterations of the prototype. The paper prototype was a collaborative effort to get us started, but I made the two digital variations from our user feedback and team lead's suggestion to make the layout part of a cohesive design rather than have the isolated columns like we did in the original.

A paper prototype of our first iteration of the Can SUE...? project, where folks can see if SUE the Field Museum's T. Rex can crush or bite an object.
A rough draft of a digital prototype where users would use an aerial view of a map of Chicago to test whether SUE could crush those objects.
A rough draft of a Chicago scene juxtaposing various elements around the city, where users can drag and drop items to see if SUE can crush them.

Our contact at the Field Museum gave us some guidelines for the animation style, so I generated some styles and color palettes for her to choose from so we could continue toward making a more advanced digital prototype.

Below are the various options of dinosaur design, foliage, and color palettes that were sent over during different phases of the process.

7 different dinosaur style sketches in varying styles.
Three different color palettes for the client to choose from: Neutral, vivid, and playful.
5 different Crustaceous era plant style sketches in varying degrees of complexity.
The three different color palettes in use for the client to see them in context.

Once our contact chose a color palette, the final decision to be made was on the final coloring of the dinosaur, which ended up being #7. Below is the final coloration as well as the crude animations that would be used for the prototype.

Eight color combinations in use, showing the dinosaur depicted in color in different ways.
The final, full color illustration of SUE the T. Rex, based on the client's feedback.
The crude "yes" animation that tells users SUE can crush the object they tested.
The crude "no" animation that tells a user SUE cannot crush the object they tested.

The design elements all came together for a rough layout for a more advanced prototype that we could begin to build to be interactive. While the larger scene was being created, the developer created a rudimentary prototype that the team used to do some contextual inquiries with Field Museum visitors.

A variation of the Chicago scene for the prototype that crudely demonstrates a glowing function that allows users to see what they are able to interact with.
A colorized preliminary version of the Chicago scene.
A photo of the rough prototype the developer made to test with Field Museum patrons.
A photo of some of the user testing team at the Field Museum, where the prototype is set up for patrons to try.

The project was so fast-paced that I was out for two classes due to illness, and the team had to finish the design for the final iteration of the prototype, so the design is a bit less cohesive. This is the final prototype, with glows to illuminate the objects that can be interacted with.

The final full-color scene for the prototype.

While we were working on our deliverables, we also planned our project showcase that we would present to our peers and their families at our school's end-of-year event. We created an immersive experience, where we had ambient sounds playing and paper vines decorating the room. We had tables set up where folks could take informational brochures, stickers in three different colors with a link for viewing our documentation site, and key chains that I designed, laser cut, and assembled. We had a photo booth where folks could make gifs with their friends as they came to check out our project. These were all available for viewing on the site while it was active.

A perspective and aerial view of the classroom where we showcased our capstone project. There are annotations to label individual components of our space.
A photo of the acrylic T. rex skull keychains I fabricated for the event.
An aerial diagram of the space where we would be showcasing our capstone project, with labels to show where certain handouts, decorations, and interactive items would be in the space.
A variation of the digital file I created for our stickers that we put out for the event. This one is shown with SUE the T. rex in full color and our project page's website on a medium blue background.
A variation of the digital file I created for our stickers that we put out for the event. This one is shown with SUE the T. rex in full color and our project page's website on a muted lime green background.
A variation of the digital file I created for our stickers that we put out for the event. This one is shown with SUE the T. rex in full color and our project page's website on a burnt orange background.
bottom of page