Jessica Siyuan Hu

Galleries and Goblins

UX/UI, Art Direction
Designed with Magdalene Ma and Meghan Sim
Tools: Figma, Procreate, Illustrator

Galleries and Goblins splash image.

Galleries and Goblins is an iPad app that combines information from the museums' arms and armory section with character and outfit customization and note taking capabilities so that users may learn more about artifacts while using real, documented items for their Dungeon and Dragons campaigns.

Context

The Art Institute of Chicago’s (AIC) Arms and Armory is an installation of nearly 350 items includes full suits, half suits, pole arms, cannons, a shield with two swords, and, for the first time at the Art Institute, a knight on a fully arrayed horse—something previously impossible due to the low ceilings in Gunsaulus Hall. It covers arms and armor across Europe spanning the 13th century to the 17th century.  

Dungeons & Dragons (DnD) is a tabletop role-playing game. Each player creates their own character to form a party that embarks upon adventures within a fantasy setting. A Dungeon Master serves as referee and storyteller for the game. Throughout the series of gaming sessions, characters level up and become more powerful. Players choose a class when they create their character which gives them special perks and abilities.


Design Approach

We faced the challenge of cohesively combining scholarly information with fantasy elements. We tackled this difficulty by combining images lifted directly from the museums with a saturated, children's book illustration aesthetic for the fantasy characters. We integrated the aesthetics changing the the images' style as they are worn. When an artifact is tapped on and worn, they move from the informational bio section into the character tab while changing aesthetics from photograph to illustration, highlighting the interaction between real-life artifacts and fantasy.


Explore

Browse through a variety of artifacts by filtering them by museum, item type, occasion, time, material, or location.

User Persona image.

Learn

Pick an artifact to dive deeper into its history and story.

User Persona image.

Record

Dress your character in different items, track what they’re wearing, and jot down notes along the way.

User Persona image. User Persona image. User Persona image.

Interact

View the records of your friend's characters.

User Persona image.

Commemorate

Capture and share pictures of you and your friends' characters together in different settings and moments.

User Persona image.

User Journey

User Persona image.