Role: UX research, UX/UI design, Usability testing
Tool: Adobe XD, Adobe Illustrator, Adobe Photoshop
Duration: March - April 2022 (2 months)
OVERVIEW
Filoli is a historic country house and garden located 30 miles south of San Francisco with over 100 years of history. Visitors are increasing year over year. In 2019, the visitor number hit 230k.
‘Discover Filoli’ is a mobile app that provides immersive audio guides and interactive maps for visitors to get a better visiting experience by implementing Bluetooth beacon technology.
PROBLEM STATEMENT
Filoli lacks enough staff narrators to guide the visitors. In the meantime, the site has limited space to display all the descriptions and stories for visitors to read and learn. That makes a lot of visitors can’t fully appreciate the charm behind the scenes and leave the site with less of an impression.
THE GOAL
Our goal is to help visitors get enough information and knowledge during the tour through their personal devices. Design an app for Filoli that allows users to listen to immersive audio guides in the field and provides supportive information on-site and off-site.
Status Quo
These photos show the scenes of how people get information in the field currently. One is through a group tour with a narrator, and the other is through the description boards placed on site. The downsides are they don’t have enough staff for the tours and the description boards are plain and hard to read.
The Concept - Bluetooth Beacon
Bluetooth beacon positioning and tracking solution offers low-cost, energy-efficient and easy to deploy indoor positioning and tracking technology. The technology allows the visitors to navigate through different sections and can provide maps and audio guidance hence improves the user experience.
When visitors, with Bluetooth devices such as smartphones and apps, approach specific areas in Filoli, the system will determine their locations and consequently send relevant audio guides to smartphones. Visitors can listen to the audio guides without searching by themselves whenever they are near specific points of interest.
USER RESEARCH
Interview
I interviewed 10 people who have visited Filoli within a year. Their ages range from 18 to 70. I asked them questions about:
-
Your last Filoli visiting experience, including planning the tour.
-
The most impressive part of the tour.
-
Any frustration during the tour.
-
Your previous experience with an audio guide in other museums or galleries.
Analyze data - affinity map
After conducting the interview, I analyzed users' current touring experience by creating an affinity map that captured their common feelings, thoughts, and behaviors. The interviewees expressed a fondness for Filoli, but also frustration with not having enough knowledge about what goes on behind the scenes. Through the interview process, I gained insights into how visitors typically plan and tour Filoli. Additionally, they expressed an interest in using audio guides for their tours, but noted that there is still room for improvement in this area.
Insights
The user research confirmed the initial assumptions that the current guiding tour and description boards in the field couldn’t satisfy visitors’ needs during the touring, and an audio guide app for Filoli is a good solution for it. The research also revealed that visitors like a more immersive and automatic audio guide experience.
Here’s a summary of users’ pain points:
1
Lacking preparation
Visitors lack time to research prior to visiting and feel their research efforts are directionless.
2
Inaccessible guides
There are inadequate on-site guides and the description boards are difficult to read.
3
Limited understanding
Visitors have limited knowledge and a shallow impression of Filoli after leaving.
4
Immersive
audio
Audio guide is helpful but visitors desire more immersive experience.
Empathy with users
The user problem statements (...is... who needs...because...) clearly show the needs of users.
Rebecca is a landscape designer who needs to learn about Filoli onsite and offsite; because she wants to make the most use of the tour to learn practical designs.
Jeff is a dad of two kids who needs a touring plan and guide;
because he wants the visit to be both fun and hustle-free with two kids to be taken care of.
Sally is a retired teacher who needs easy access to the information in Filoli because she struggles to see the text on the description boards and wants to get some rest during the tour.
How users are going to use the designed app to assist them is mapped out here:
DESIGN PROCESS
Starting the design - Paper wireframes
Lo-fi wireframes
Usability Findings:
-
Need smooth transition from audio to audio in “Near me”.
-
“Near Me” looks scattered which stress users especially when they are walking.
-
The symbols on “Map” are not prominent and intuitive.
-
People want more appealing storybook’s covers.
Initial paper wireframes
The feedback from the user testing on the initial paper wireframe revealed that photo search is not the most immersive way for users of tours like Filoli.
Updated paper wireframes
After doing research on current technology, I used the Bluetooth beacon in the tour so that users can listen to audio guides without touching phones.
Iteration
Before usability study
After usability study
The usability study revealed that for the real product, users need fluent and efficient transitions from screen to screen.
Users reflect the content on the current audio page in Near Me is scattered around which stressed users especially when they are walking. So I applied Gestalt principles on this page to group the relevant content and emphasize action items.
To make the storybook’s cover sheet more appealing and easy to read, I increased the image size and changed the layout.
HI-FI MOCKUPS
Near Me
“Near Me” is an immersive audio guide that plays automatically when people are near some points of interest.
The card of current audio contains the play bar, image, and text narration. Considering most users are using this function while walking, the play bar is designed to be big and front so that it’s easy to control.
The text narration is for people who have hearing loss. It also benefits people who are unable to turn on their speaker at that moment.
The functions hidden in the backdrop are to facilitate users while they are listening.
All stories
Users can view all the audio guides nearby, and their current location on the map.
Filters
Some visitors may have already been to Filoli several times and they are only interested in the special exhibits.
Map
The Map let users find audio guides manually. Besides, it provides information on the site other than audio guides.
Stories
The app has a non-geo-based “Stories” for users to get access to the stories in Filoli even when they are not on site.
Interactive prototype
Accessibility consideration
1
-
Used the Abode Color Accessibility Tools to check the color I used to make sure the design is friendly to users with weak visual ability.
2
-
In the design of settings, multiple languages are provided for users speaking different languages other than English.
3
-
Used icons to help make navigation easier.
TAKEAWAY
Impact
“Potential users” use this Discover Filoli app and they all love it! Here are some quotes from them:
-
“I definitely need to go to Filoli again with this app.”
-
“This is so amazing. It helps me to learn a lot of Filoli with no effort.”
-
“This is the most effortless audio guide I’ve ever seen.”
What I learned
-
Exploring and utilizing relevant technology expands my design space. For the design of this app, the Bluetooth beacon technology makes the immersive experience a true thing.
-
Iteration happens not only to wireframe or prototype designs. As the working process goes on and we learn more about the users and the product, persona and user journey should be updated accordingly.
The next steps are to study the situation when GPS or Bluetooth is off or the situation when users are not in the field but they want to use “Near me” function. And conduct more user research to determine any new areas of need.
