Land Conservancy of SLO
✳ IN THIS PROJECT I WAS TASKED TO
design a QR-based audio tour progressive web app for LCSLO
TIMELINE
Oct 2024 - June 2025
SOFTWARE
Figma
ROLE
UX Design
User Research
TEAM
Design Team:
Caitlyn Chailitilerd
Apoorva Gowda
Project Manager:
Rohit
ORGANIZATION DESCRIPTION
Land Conservancy of San Luis Obispo County
The Land Conservancy of San Luis Obispo County (LCSLO) is dedicated to caring for the diverse wildlands and critical habitats of the Central Coast through conservation, restoration, and stewardship, all while connecting people to the land and one another. They manage various properties including Nipomo, where this project will be implemented.
TIMELINE
CURRENT DESIGN ??
The LCSLO needs a new solution to provide educational audio tours at their Nipomo property. Their previous system using the "Visit" app is now obsolete, leaving visitors without access to the audio content. The property currently has interpretive signage, but LCSLO wants to enhance visitor experience through QR-based audio narration that triggers and plays an audio file when visitors scan a QR code at a POI. The user goes around the property (Kathleen’s Canyon Overlook) scanning the QR at each POI and listening to the corresponding audio.
Here is the current Graduate Status Report Dashboard:
RESEARCH
Getting to know our users
Before entering the ideation phase, we first started with creating user stories to better understand the user’s perspective and align with the client’s functional requirements, we developed a set of user stories for the mobile web application. These stories reflect key tasks and goals from the viewpoint of a visitor:
Competitor Analysis header
Building on our research findings, each team member explored various screen concepts tailored to an audio mobile tour app. Much of our inspiration came from existing museums, hiking, and fitness tracking applications.
Through this exploration, we identified a core set of essential features to incorporate into the app:
A tracking feature to log completed visits
A settings option to change language preferences
A screen displaying a full list of available tour areas for easy browsing
A caption section that appears during audio playback
A navigation tool to help guide users to the designated QR point
IDEATION
Finding the right design
We started with Crazy 8's exercises where everyone quickly sketched design ideas. This helped us explore many different layouts and interactions all at once.
Pivoting our strategy
When we first began, we had a crucial misunderstanding. We didn't realize this was a Progressive Web App (PWA) rather than a native mobile application. This discovery changed everything about our approach.
The actual constraints:
We learned that users couldn't freely browse through all audio files from a centralized list. Instead, they had to physically visit each location and scan a QR code, which would open content in a new browser tab.
There was no location tracking or GPS functionality as we had initially assumed.
This new understanding forced us to completely rethink our approach. Our original app-like features wouldn't work in this context. We had to step back and develop solutions that would function within a PWA environment.
Combining the best ideas
With these new constraints in mind, we mapped out a revised user flow. We focused on making each standalone audio experience intuitive, knowing that users would access content in separate browser instances.
Combining the best ideas
We noticed some screens did similar things in different ways. Instead of picking just one, we took the best parts from each and combined them into simpler, better user flows.
Several key solutions emerged from this process:
solutions here
ROLE
role and responsibilities
As a UX Designer for this project, my primary focus was on designing the 'Location' screens, where users can pick a location and receive visualized data of the top jobs and industries in that area.
PROTOTYPING
Implementing feedback
Our client and project manager provided important insights that improved the user experience. At the same time, we had regular check-ins with the development team to understand what was technically possible within the PWA framework.
Based on all the feedback, we made several key changes:
We enhanced the point of interest screen with more meaningful statistics to give visitors richer context
We removed the distance indicator feature once we understood that visitors wouldn't follow a set path but could start the tour from any location
We addressed language accessibility concerns differently than initially planned
When we learned that supporting multiple audio languages wasn't feasible, we pivoted. Instead of abandoning multilingual support entirely, we introduced a language toggle for the transcript page. We chose Spanish as the secondary language since it's the second most commonly spoken language in San Luis Obispo County, making the experience more inclusive for more visitors.
After finalizing our user flow, we identified five primary features to focus on during the low-fidelity to mid fidelity prototyping:
A point of interest (POI) screen displaying key information about each location
An audio playback screen that appears when the user taps “Play” on a POI
A full-screen transcript view accompanying the audio
A list view showcasing all available points of interest
A navigation sidebar that appears to support user movement throughout the app
DESIGN SYSTEM
Through a voting system, and consulting our client, we landed on this design system to ensure that it also stays within the guardrails of Cal Poly’s design system.
Based on our research findings, each team member explored different screen concepts suited for an audio mobile tour app. Many ideas were inspired from existing museum, hiking, or fitness tracking applications. We ultimately identified a set of essential features to include in our app:
A tracking feature to log completed visits
A settings option to change language preferences
A screen displaying a full list of available tour areas for easy browsing
A caption section that appears during audio playback
A navigation tool to help guide users to the designated QR point
LO-FI WIREFRAME
I began crafting my lo-fi screens to brainstorm ways for users to effortlessly search through popular industries roles, and salaries for different locations. Below the search is a list displaying popular US cities for job seekers.
USER TESTING
Uncovering navigation challenges
Our client and project manager provided important insights that improved the user experience. At the same time, we had regular check-ins with the development team to understand what was technically possible within the PWA framework.
We recruited 6 participants across various age groups and tech comfort levels to match our target audience.
We focused our testing on six essential functions that form the core experience:
Location awareness
Audio information identification
Audio playback
Language switching
Navigation to audio list
Progress tracking
MID-FI WIREFRAME
We discussed the layout of all the screens and we decided that the locations page would only be accessible through the ‘Role‘ and ‘Salary‘ pages instead of having its own filtering system.
Components & Styleguides
Our brand system balanced a fresh design and familiar identity. We crafted a visual language that feels natural and refreshing while honoring the Land Conservancy of San Luis Obispo's established presence.
HI-FI
We discussed the layout of all the screens and we decided that the locations page would only be accessible through the ‘Role‘ and ‘Salary‘ pages instead of having its own filtering system.
⚠️ PROJECT STATUS
This project has not been shipped yet and is still in development, so all of my work & final designs are not reflected here.
REFLECTION
Special thanks to Cal Poly Hack4Impact
If you made it this far – thanks for reading! Thank you again to my lovely team at Cal Poly Hack4Impact. Here’s what I learned during this project:
01
Balancing Digital and Physical
While improving digital access, we needed to remain mindful of the app's supplementary role. The primary goal is to enhance the physical experience, not replace it.
02
Working Alongside Developers
This project is planned to be built out, not just remain as a concept. We learned how crucial it is for technical discussions to happen early in the design process to ensure our concepts are feasible.