Interactive Multimedia Exhibition

Physical Prototype, HCI
A Physical Prototype and Interaction Design Project that Introduces the Users to the Rich Purdue Aerospace History
Client
Class Final Project
Project Type
Physical Prototype, HCI
Project Duration
Feb. - Apr. 2024
My role
UX Researcher, UI/UX Designer, and Interaction Programmer.

The Goal

This physical prototype aims to provide a potential solution to change the current landscape in that media consumption is a single-channel experience. By utilizing image projection, RFID tags, and programmable Arduino kits, we investigate the possibilities of creating an interactive multimedia exhibition piece that introduces the users to the abundance history of Purdue Aviation. Join us in celebrating this heritage in aviation and aerospace technology as we delve into the autobiographies of the Purdue Alumni and celebrities.

Team Composition:

Hugo Li - UX Researcher (Secondary Research), UI/UX Designer (Physical Interaction, such as Card Design), and Interaction Programmer (RFID code and interactive UI code).

Hassaan Waqar - Main Programmer (Arduino connections, P5.js and web sockets), and Leader of Technical Setups.

Graham Allgood - Project Lead, Project Manager, UI/UX Designer (monitor and map screens), and Content Designer.

Hyperlink button

Findings/Deliverables:

This interactive set-piece aimed to let users ponder the boundary between the physical artifact and the digital projection. By interacting with the projection using the physical magnifying glass, users are able to view the contents tied to each Purdue Hero Card.

Introduction Video
Demo Video

00. Understanding The User

We delved into exhibition design, physical prototyping, and multimedia design through this hands-on investigation and endeavor. This exploration focused on the principles of Human-Computer Interaction (HCI) and interaction design, fueled by the core tenets of user experience (UX) design.

Painpoints

Traditional Media Consumption

We aim to change the way we consume media. Normally, people consume media in a single-channel fashion, the only interaction concerned is the browsing phase. Once the channel of information was located and set, the experience was fairly static and mono-channel.

Persona & Problem Statements

User Journey Maps

Our proposed user flow includes: Tourists first got their own pack of Purdue Hero Cards. They can keep it as a souvenir andtrade it with their friends. When they arrive at the airport, the users can use the card to interactwith our kiosk to learn more about the history of Purdue aviation and its heroes.

Imagine the card acting as a “character selection,” based on the card, the table-top display (using the projector) will change to the table of the said “target hero.” From there, the visitor could use the attached “Magnifying glass (a.k.a. RFID Reader),” to interact with the pre-programmed touchpoint, which are RFID tags embedded beneath the projection screen on the table. Once activated, the related information and videos will be played on the monitor on the wall.

Proposed User Flow

01. Starting The Design

After finishing the primary research, the persona, and the problem space, we started the design phase. Firstly, we drafted the sitemap for the product. We sketched several paper wireframes and combined them into the first-draft version of the paper wireframes. We then designed the digital wireframes by referring to the paper counterpart. We connected the pages and came up with our first lo-fi prototype.  Finally, we conducted usability studies and recorded our findings.

Planning & Sitemap

We designed a wide range of scenarios for the users to experience. For example, visitors will be given an opportunity to delve into the lives of Purdue Heroes such as Amelia Earhart, Sully Sullenberger, and Neil Armstrong. Visitors first select the scenarios by tapping the corresponding RFID Hero Card on the reader to choose the scenario.Once the scenario is set, a short introduction video will be played. Followed by showing a projection of the protagonist’s “Life Map.” We hid multiple RFID tags underneath the projection. Users use the provided magnifying glass to interact with the touchpoints, which will, in turn, select the chapter to be played on the background moni-tor. The magnifying glass has been embedded with an RFID reader.

By following the aforementioned user flow, a sensation of interacting with the projection will be produced. Further, by moving the magnifying glass, users can peek into different phases of our Purdue Pioneer’s life, so to speak. In a sense, we aim to recreate the analog experience of flipping through a picture book or following a map into the digital world.  Similar to the general concept and idea of skeuomorphism, this design philosophy has the beneficial effects of: increasing user intuition, enhancing engagement, providing a stronger sense of emotional connection, and building on existing knowledge.

We believe this hands-on experience can bring fresh air to the common digital products in our lives. The experience is further accessible to both the young and the elder generations.

Sketch of the Design

After considering various user input methods like figurines and scrollable maps, the project opted for collectible Purdue Hero RFID cards to promote the concept of collecting and Purdue spirit. When it came to the interactive map, the team weighed the pros and cons of touchscreens and physical maps. Touchscreens were crossed off because they offered an experience too similar to tablets. Physical maps, on the other hand, required complex calibration. To create a unique and engaging experience, we ultimately decided to use a projected interactive map.

Paper Wireframes

Digital Wireframes

Usability Study

Our evaluation protocol will involve a combination of observational, empirical, and qualitative data. We will begin by setting up the entire system ready to be used by the public. Participants will interact with the system independently on their own, without any help or context provided by the testers. The testers would however observe the participants.

We tested our design and prototype with 3 individuals and received positive and welcoming feedback. All three participants appreciated the idea and creativity, the interactive elements and the combination of physical and digital computing involved. They also left us with some useful feedback, most of which we incorporated for the final version.

Findings and Changes:

  • Added a glowing spotlight effect to the numbered icons on the projection to make the tabletop interactive and provide more feedback.
  • Added signage to the tabletop to help users navigate. These included ‘Tap Hero Card Here’ and ‘Start Here’.
  • Added instructions on one side of the magnifying glass which said: ‘Tap on the numbered icons’.
  • Changed the instructions on the screen to clarify how to use the magnifying glass.
  • Setup the projector vertically above the tabletop and put the monitor at the front to provide a more immersive experience.
  • Changed the placement of the RFID tags and the magnifying glass to encourage people to begin from the first tag, and go all the way to the last.

02. Refining & Iterating The Design

Combining our findings, we iterated on our design. You can find the closeups of some mockups screens below. We had also listed some accessibility considerations made during the design process.  Finally, you can find the hi-fi prototype along with some demo screens illustrating the user flow.

Mockups

Circuit Design

What is interesting about this physical prototyping project was that we encountered quite a number of troubles and bugs throughout our journey, both in terms of hardware and software. Some of the troubleshot issues include: insufficient pins for two RFID reader, insufficient voltage for longer wires, async dual-monitor display and projection, and adding interactivity to the projection. Please view the documentation for detailed elaboration.

Arduino Kit with 2 RFID Readers
Magnifying Glass Touchpoint
Programming the RFID Tags as Touchpoints
Coding Session

Demo ImageDemo ImageDemo Image
Before Usability Study
Demo ImageDemo ImageDemo Image
After Usability Study

Card Design

We studied and referenced a number of collectible game cards and basketball trading cards to design our very own Purdue Heroe Cards.

Card Design For Purdue Heroes

Demo ImageDemo ImageDemo Image
Before Usability Study
Demo ImageDemo Gif Animation
Demo Image
After Usability Study

Screen Design

The design pays tribute to the tried-and-true treasure-hunt map design to help elicit a sense of exploration on the user’s end. Once the user tapped the map with the magnifying glass, chapters will be played. Some are embedded with videos to help reduce the mental workload of reading the contents and to provide a more engaging narrative.

Interactive Map For Amelia Earhart

Photo-book Chapters For Amelia Earhart

Considering the span of this project, we made two use case scenarios, specifically, for Amelia Earhart and Chesley Sullenberger. As such, one of the future improvements is to cover all of the heroes of the designed cards.

Interactive Map For Chesley Sullenberger

Photo-book Chapters For Chesley Sullenberger

Photo Album of the Process, Visitors' Interaction, and Final Setting:

Demo ImageDemo ImageDemo Image
Before Usability Study
Demo ImageDemo ImageDemo Image
After Usability Study
Demo ImageDemo ImageDemo Image
Before Usability Study
Demo ImageDemo ImageDemo Image
After Usability Study

App Mockups - Main User Flow

Mockups - Main User Flow

No items found.

Accessibility Considerations

Hi-Fi Prototype

Final config of our work
Me Demoing the Final Product
Poster Display
Demo ImageDemo ImageDemo Image
Main User Flow
Demo ImageDemo Gif AnimationDemo Image
Other Features
Safety Tips
Other Features
Demo ImageDemo Gif AnimationDemo Image
Emergency Categories
Mobile Main User Flow
Search

Screen Variance

Demo Gif Animation
Main User Flow
Demo Gif Animation
Safety Tips
Demo Gif Animation
Emergency Categories
Demo Gif AnimationDemo Gif Animation
Homepage
Demo Gif AnimationDemo Gif Animation
Main User Flow
Demo Gif AnimationDemo Gif Animation
Shopping Cart

03. Going Forward

You have reached the end of the project. You have followed through with our entire design process. Below you can find the impacts we made and what I learned in this process. We have also listed some steps we could take for future iterations to further evolve our design.

The original concept for this final project was aviation data visualization of live flight data. Graham pitched this concept in class.

He identified a market of individuals passionate about their local regional airport. Many private pilot license holders keep tabs on their local airport, and the concept was to passively show their local airport's flight activity — possibly in a professional's home office. The product concept was exciting but niche and didn't allow for much input from the user to interact with the data.

Once the full team was determined, after the class pitch, Graham opened the floor to adjust the concept based on what others were interested in. The collective team decided to pivot the project based on: interests, what could realistically come to market, and current skill stack. This process lasted a couple of weeks as team members presented ideas and brainstormed back and forth.

The collaborative approach and ”riffing” helped land the updated concept of an interactive multimedia exhibition for Purdue Airport. The pivot in the project concept brought a collective interest in the topic, boosting enthusiasm, and drive. The new concept broadened market potential and allowed for more user interaction, making it a more engaging and dynamic project.

This shift opened up exciting new possibilities, igniting a wave of motivation and inspiration within the team.

The project finished exceptionally well, and each member learned how to rapidly prototype to bring a new product idea from 0 to 1. The team was in sync and respectfully executed their duties above and beyond what was asked out of respect to each other.

Thank you, my awesome teammates

Other Projects

Let's Connect

If you are interested in working with me, please feel free to contact me using the form below!
I look forward to connecting with you, Cheers!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.