75% feel that the overall experience (theatre & speakeasy) is accessible for all users
95% believes that the interactive touchpoints included in the 4D theatre and speakeasy will fully immerse the visitors
80% of participants identified the main purpose and concept from the introduction
Timeline
INTRODUCTION
RESEARCH
Contribution
User Group
Collaborators
My contribution was completing the design and development of the web experience, concept testing, touchpoint iteration, usability testing, addressing all pain points, and writing/designing the documentation and presentation.
We will choose a period of history that will serve as a theme for our museum exhibit. Based on this theme, we will identify appropriate technologically-rich and meaningful interactions that allow visitors a sense of embodied participation in the exhibit, enabling them to learn about the period of history through immersion and participation.
Our goal is to design a museum experience with multiple digital and physical touchpoints, with reasonable accommodations for a range of participant abilities.
The major takeaway from analyzing competing museum exhibits with a similar theme is that other experiences spotlight the speakeasy while neglecting the historical aspects of the prohibition era.
Offers speakeasy lounge with live music performances and food
Properly immerse the audience into the roaring 20s feel
Water/mist effects: "At one point, the movie showed a shot of it raining outside and it felt like I was in the middle of the rain, even though I didn't get that wet."
Smoke/fog effects: "Smoke combined with wind effects, (which was really cool) produced a mysterious emotion during the scene."
Air blasts (both at your feet and head): "A lady enters an attic and the seats blast air at your feet to simulate rats scattering the floor."
Focuses heavily on the speakeasy experience not educating their visitors
Interactive experiences are not captivating enough
Not accessible to people under 21
Exhibits get crowded and are hard to navigate through
Pleasure Points
Thoughts on Effects
Pain Points
18+ without parental guidance
Accommodations for the hearing and visually impaired
Claire O'Malley,
Damaris Adeniji
Logan Carter
Madison Braile
Seoyeon Lim
Daphnee
Haptics, mist, and motion chairs
Guests use guns attached to seats to aim at the surrounding screen and earn points
Through the web experience, guests are able to customize and order their mocktails
Fully interactive 4D movie
Scents that immerse the users into the scene
Audio sounds, story narration, and music
Our analysis of concept testing helps us frame our next steps in the design process. We plan to implement the insights gained from our participants into our final design to maximize the experience.
Once we finished all our mid-fidelity mockup pages for the website, we brought it to our participants to test. Our goal for usability testing was to understand the user’s experience with organization, functionality, and visual design. Similarily to our design round of testing, we synthesized all the data into pain points.
A design system ensures a consistent visual and interactive language throughout a product by providing a set of rules, concepts, and reusable elements. This consistency, which provides a library of standardized components, not only improves usability but also speeds up the development process. Design systems' scalability makes it possible to add new features with ease and still provide a consistent user experience. We hope that the branding we create with the elements in our website can stick with our users for a while. And possibly excite them to come back and experience it again.
Wine Glass
Drink Shaker
The video below displays a 360-degree model of the physical environment. Using Autodesk Maya Animation software, we built the theatre screen and seats to assist in envisioning the exhibit.
The seats will arranged in stadium seating, so the screen is easily viewable regardless of where they are sitting. A holder will be fixed on the right side of the chair for them to keep their laser gun, before and after the game. The walls of the room will have surround sound speakers installed and the technology in the chairs will readily be able to turn on and off depending on the user’s preference.
This project was a fun challenge as we switched perspectives from human interaction with digital products, to human interaction with spaces and environments. Through thorough rounds of research and constant iterations after testing, we were able to present a final experience for visitors in our exhibit. Along the way, I picked up numerous web design skills as well as visual design concepts when creating the vision board for the multimedia component. After this project, I feel confident enough to take on even larger initiatives because of my experience in overcoming obstacles and perfecting our strategy, all the while putting the needs and happiness of our users first.
Interactive museum exhibit that uncovered the journey that smugglers experienced when transporting alcohol to speakeasies.
FALL 2023
THE PLAYGROUND
DESIGN (Exhibit)
The first room of the exhibit will take place in a 4D theater to strengthen the immersion the audience's will experience when learning about the smuggling journey. The quotes below are from reddit deep dives that support the theory of immersion that we wanted to evoke.
To ensure robust facilitation between the exhibit and visitors, our team must design 3 touchpoints that embody participation. To meet this goal we designed to activate 4 senses in the theater to maximize immersion, engage the audience by having them participate in a mobster shooting competition to continue learning about the smuggling journey, and end with them being able to relax and order a non-alcoholic cocktail in the speakeasy lounge.
Physical Environment
Three Touchpoints
4D Theatre
Shooting
Speakeasy
Concept
Engagement
Inclusivity
Concept
The quality/quantity of the 4DX effects most likely depends on the theater that you go to, this theater made the movie feel 10x more immersive
If the 4DX effects are implemented poorly, it can make the experience feel more like a gimmick and distract the viewers from the screen
Pleasure Points
Pain Points
TESTING (Concept)
DESIGN ITERATION (2 Multimedia Comp.)
Direction:
Give a demonstration on how to use the laser gun before the movie begins so the users are ready when the game starts on the screen.
Engagement:
Offer incentives to increase active engagement with the story to make it more immersive
Give the visitors a free small souvenir to capture their time at the exhibit
Accessibility:
Offer the choice of whether to have the 4 senses effect turned on or off during the movie. This way they can still be educated about the concept without putting themselves in harm
Add subtitles/closed captions to the movie
Pain Points
4D Theater
Speakeasy Lounge
Goal
Theater Details
Goal
Using concept testing feedback and new research we designed a mood board to display the aesthetic and ambiance of the speakeasy. The research that informed our design decisions is published on the following page.
DESIGN (Web)
TESTING (Usability)
DESIGN (Unity)
DEVELOPMENT
FINAL
The purpose of a user flow chart is to graphically depict the path a user will take on our website, from the first interaction of viewing the menu to the accomplishment of ordering their drink in the speakeasy. It acts as a thorough and organized depiction of the user experience, describing the interactions, decision-making opportunities, and processes that a user will have to take.
The images displayed below represent our design journey. Once we figured out our flow and researched features similar to the ones we would like to incorporate we began working on the mockups for the web experience.
User Flow
Low & Mid Fidelity Mockups
Hierarchy of Information
This acts as a framework for attentional navigation, content prioritization, and efficient user interaction with digital interfaces. We were asked to enlarge the image and reduce the size of the ingredients, so users can rapidly find and concentrate on the most relevant information.
Display Order Summary:
The final confirmation step lets customers check the products, quantities, and other modifications they've chosen before completing the transaction. Ensuring that users are informed of exactly what they are about to order, helps prevent errors. To promote confidence between the user and the platform, the order summary serves as a transparency measure.
Restart Button:
Adding an option for the user to start over in case they messed up a previous choice, allows for more flexibility and comfort. Including a button next to “Confirm” can take the user back to the “Menu” or “Create your own” page.
Pain Points
Coding Rationale
addressing pain points from usability testing
Microinteractions give instantaneous feedback and give the website a responsive, dynamic feel. These brief animations can provide context, direct users through the UI, and establish a feeling of flow between their interactions.
Its main purpose help users feel less anxious before making big decisions like placing a purchase. It also serves as a safeguard against errors, enabling users to check and fix any faults right away.
This design strategy reduces friction in the user flow by offering a simple and eye-catching route from item selection to order fulfillment. Which makes it possible to incorporate visually appealing features on the same page.
Parallax Scrolling
Order Confrimation
Microinteraction
Setup & Order Process
Web Experience
All pain points were addressed! We restructured how information was perceived on our website, offered a restart button, and displayed the user selections. To understand the functionality, click the screen above.
REFLECTION
Multiple self-standing screens along the side of the speakeasy to order their drinks.
The visitors will use a fake smuggler ID to purchase the drink
Once submitted, the receipt printed will provide the user with their order number
This process is to guarantee that each visitor receives only one free drink and they’ll be able to pick up their drink at the bar similar to what men and women did during the 1920s!
