AR App to Learn About Cultural Heritage
Oct, 2017- Dec, 2017
Indiana University Bloomington is a beautiful campus with a lot of history, but it's not fully exposed to prospective students and their parents. We want to design a mobile app to help prospective students and campus visitors to learn about cultural heritage. I worked with Yuki Zhang and Gege Gao, who is a PHD student interested in pervasive technology and AR, to ideate, design interfaces. conduct user study. Specifically, I was responsible for creating mockups and interactive prototypes with principle. Process and result of this project was published in 2018 (Full Article), Digital Heritage International Congress.
To understand currently how people learn about cultural heritage and plan their tour, we signed up for IU's campus tour. After the tour, we interviewed a few people to gain insights.
We learned that people are:
Interested in the stories of different buildings
Would like to have an overall idea of how long the tour takes and where they have been
If information is displayed on the phone, would want it to be glanceable. Do not want to look at phone all the time while walking
Research for Design
Initial research makes us realize what the overall scope is. The goal of this project is to understand how AR and pervasive technology can help people learn about cultural heritage in their community. A few discussions led to the decision on just design for one tourist attraction, the iconic landmark Sample Gate, for research purpose.
We went to IU archive to learn about Sample Gate's history. It turns out there are a lot of controversies around whether Sample Gate should be built. We curated a few articles, and decided to present the information in a interactive storytelling format.
People is the key when we were reading about the history. It was IU faculty, staff and students that created those stories. We want the design to be interactive and encourage people to learn about what happened in the past. Meanwhile, we also provide a way for people to participate in creating stories. This allows the digital device differentiates from brochures who only show information, but do not allow people to relate with the content.
Start with a Scan
With camera open, user is instructed to place the mobile device in front of Sample Gate.
Learn the Story
Landing page shows various relevant historical people with AR images. Users can interact with the people with a single tap to find out who they are.
Edson Sample had been working in the Office of Scholarships and Financial Aids for almost 30 years. In 1987, he funded construction of Sample Gates, which he dedicated to his parents.
Newspaper on the ground aims to show it used to be very controversial. In school newspaper, comics show students are not happy about spending that much money on building a gate, while some students do not get financial aid.
IU students, school faculties' opinions on building Sample Gate.
More Historical Information
More historical information is displayed through AR filter for users who are curious in knowing more cultural heritage. Each chronological filter has a collapsable text box and includes a summary title and a short paragraph of text.
Long press to compare the past and the present.
View Photo Album
We found a lot of IU alumni's picture and their stories with Sample Gate through research. This inspire us to add view photo feature.
User can press the album icon to view previous photos left by other people in front of Sample Gate.
User can also long press to like a photo.
We recruited 10 people to the lab for user study to gain insights from our users on the concepts, namely how they feel about various features of the app, rather than usability. Thus, we use paper prototypes by printing out our design in phone size paper and transparent films. Transparent films with AR elements are overlaid on camera interface on the phone.
The concept was well received, especially around the idea of being able to take pictures with historical AR images and share them with public. Learning about cultural heritage is more engaging when people feel they can relate to what happen in the past. However, reading long information is not favored
Make information more glanceable and less text-ladden. Add summary title to each info slide.
Taking pictures with AR filters
AR chat/thought bubbles need to be expandable in digital version so that text is clear
Good to Have
More multimedia to make it engaging (add animations and sound switch)
Provide more relevant historical information for users who are very interested
Practical tourism information such as open/close hours
Have text comment under pictures
What I've Learned
Define scope through having clarity about design purpose . This design lack details and I was concerned at the beginning, raising questions on how to user get to a certain page, and what do they do after taking a picture with AR images. However, as I worked on it, and have consensus with team members that the purpose of creating prototype is to visualize a concept and answer research question, I become clear on where should I focus. In such situation, adding too much detail would become a distraction from the research goal.
Use paper prototype creatively. Since we're testing concept of AR images, it's important to have high-fidelity mockups in order to convey the idea. However, we also don't want to spend time building the app to test a concept. Having images print out on transparent film helps set the context for participants to understand what we are testing and getting quality feedback.