PROJECT OVERVIEW
The Laguna Ocean Foundation (LOF) is a nonprofit organization dedicated to the conservation of Laguna Beach and its wildlife. In order to better inform the public about LOF's mission, my team was tasked with creating a mobile web application focused on educating, engaging, and inspiring visitors to help contribute to conservation efforts.
THE PROBLEM
Laguna Ocean Foundation operates within a marine protected area (MPA)*. However, many visitors remain unaware of this and are severely uninformed about the conservation efforts of the organization, leading to disruptive behavior in the protected area and unintentional damage to the ecosystem.
of snowy plover nesting
attemps fail due to human
disturbances on beaches.
THE SOLUTION
To combat this lack of awareness, our team was tasked with creating a comprehensive, accessible, and engaging mobile web application for visitors to use.
DISCOVERY: STAKEHOLDER COLLABORATION & RESEARCH
The first few months of the project were dedicated heavily to gathering requirements, defining scope, and planning for development. This process was strongly dependent on our collaboration with LOF & its volunteers.
Biweekly Meetings
The most significant portion of our collaboration with LOF was our biweekly meetings with LOF's program manager. Throughout these meetings, we worked with them to discuss the beach, the foundation, and gather requirements for the application
Volunteer Interviews
In addition to our biweekly meetings, we had the opportunity to visit the beach and interview some of the foundation's biologists and volunteers working on-site. This was crucial in helping us understand what would be most beneficial to conservation efforts from the perspective of those who are most familiar with and knowledgeable about the beach's ecosystem, visitors, and challenges. Our interviews aimed to answer the following core questions:
What does LOF do and
what is the current effect
of their work?
What methods are already
in place to educate visitors?
What challenges does LOF
currently face in executing
their work/educating visitors?
DISCOVERY: INTERVIEW INSIGHTS
From our biweekly meetings with our partner and interviews with the beach volunteers, we were able to identify the following three areas that the mobile app needed to address regarding visitor needs and behaviors at Laguna Beach.
Lack of Awareness
Volunteers expressed that most visitors are unaware of crucial MPA rules and regulations necessary to preserving the beach's ecosystem. Visitors, especially children, often unknowingly break these rules, highlighting a need for clear and accessible information regarding beach conservation.
Assisting Visitors
Volunteers reported challenges in efficiently assisting beach visitors with essential amenities such as finding parking, restrooms, and general directions. This is due to the scarcity of volunteers as well as visitors simply being unaware that volunteers are available to help. Existing resources are described as outdated and difficult to find or navigate.
Getting Visitors Involved
Our partner highlighted a key requirement for the app: a citizen science program enabling visitors to contribute their observations of beach wildlife to the LOF database. Volunteers and LOF staff stressed that this not only enriches their data but also empowers visitors to actively participate in and learn about beach conservation efforts.
PERSONAS
Creating user-personas based off of our findings to further clarify our goals.
To better organize the findings from the interviews and clarify our user needs and challenges, we crafted personas representing a diverse range of possible beach visitors. The following persona represents the youth demographic that LOF's educational programs are targeted for.
IDEATION
Using our newfound insights, we ideated on possible features through sketching and wireframing.
Based on the collective insights gained from our meetings, interviews, and personas, we were able to solidify a foundation for the concept of the app through extensive sketching and wireframing as pictured below.
Ideas that stood out were: an educational field guide to help visitors access relevant and important information, an interactive map allowing visitors to navigate the beach and log their findings as part of the citizen science program, and a logbook that allows visitors to save their findings
HIGH-FIDELITY PROTOTYPING
Translating our ideas into a finalized design concept in Figma to be used for development.
As the lead designer, it was my responsibility to effectively visualize and communicate our ideas to LOF and our developers, iterating on them as needed. Upon approval of our preliminary ideas, we would translate them into high fidelity prototypes for referential use by our developers.
FEATURE #1:
The field guide.
The field guide is a comprehensive tool containing information about wildlife, the beach, and the foundation.
Each species at Laguna Beach would have it's own respective page containing relevant information and images taken from observations submitted by visitors.
The field guide also includes other forms of informative content such as details regarding MPAs, tidepool safety, and locations.
FEATURE #2
The interactive map.
The interactive map allows beach navigation and MPA zone identification, promoting education awareness amongst visitors about the different types of MPA zones.
Additionally, the camera feature integrated into the homepage extends to the map, where users can identify species by taking a photo. Their photo can be submitted to the LOF database as an observation and is then pinned to the map. This fosters engaging data visualization for both visitors and researchers at LOF.
FEATURE #3:
The logbook.
The logbook serves as an engaging way to encourage visitors to participate in the citizien science program. They can view their past observations, save their favorite species, and collect stamps for their efforts.
ITERATION & DEVELOPMENT
The development stage faced numerous challenges that resulted in several iterations of the design.
Our developers realized that certain tasks exceeded their skillset or proved to be more time-consuming than they initially anticipated. As a designer, it was my job to address these and adjust the design accordingly, being careful as to not take away from the intended goals of the app. A few examples of a few of the iterations we had to make are described below.
Adjusting the Field Guide
Original Design
The visual notebook concept in the field guide menu was too difficult to implement for our developers.
Although visually engaging, we later realized it also may not be as intuitive to use as a conventional menu format. To address this, I reformatted the entire menu to be more straightforward and simple.
After Development
Issues with Species Identification
Original Design
Species identification via a user's camera would not be possible to implement in time due to certain iNaturalist API restrictions.
As a result, myself and the other designers had to reiterate all aspects of the design that involved species identification. Example: Our homepage's camera element was replaced with a tidal chart for visitors to readily access daily tide levels (for surfing, tidepooling, etc.)
After Development
Replacing & Removing Features
Original Design
Due to time constraints, our developers were also unable to include certain features, such as the community observation posts under the respective species pages.
As a temporary replacement, we provided a photo library of images sourced from iNaturalist for users to view at their leisure. The logbook was also unfortunately removed from our final demo.
After Development
FINAL OUTCOME
Presenting the developed project demo at the UCI ICS showcase.
Once the project deadline had arrived, our team presented the project at a capstone showcase. The final product included a functioning homepage, map, and wildlife directory.
Unfortunately, the development team was unable to implement the full design due to time constraints and technical issues. Dealing with these difficulties also led us to forego usability testing in the interest of time. Despite this, our partner was still satisfied with the end result and what we were able to accomplish within the given timeframe.
Scan the QR code below to try out a demo of our group's version of the app!
*(app prototype does not work on desktop)
PROJECT HANDOFF & FUTURE DIRECTION
Future goals for the app include the following:
Implement visitor logbooks and observation posts.
Receive permission to integrate the Seek API for species identification.
Create a database for LOF to efficiently store observation data.
Conduct usability testing.
To help achieve these goals, we handed off our project to another student-led team for the following school term. This handoff involved transferring all relevant documents and materials, ensuring that the new team has the resources they need to continue our initial vision.
REFLECTION
Through this project, I learned a significant lesson about scope creep. Although our app's concept was innovative and promising, our initial scope was still overly ambitious for our team's skill set and time constraints. As a result, we couldn't complete everything as planned, highlighting the importance of setting realistic goals and managing scope to ensure a successful project delivery.
This project also offered me a different perspective of working within a cross-functional environment. Regular in-person meetings with an LOF representative allowed us to effectively gather requirements, exchange ideas, and foster a more dynamic and productive collaboration overall. I also gained insights into managing client expectations and adapting to feedback. Furthermore, working with developers required me to consider technical limitations and iterate on designs more frequently, refining my ability to problem-solve in the face of any obstacles or constraints. Overall, these experiences introduced me to what it's like to work in a professional and collaborative UX design environment.
Lastly, one of the most valuable lessons I have gained from this project is what I learned about conservation and the impact UX design can have on environmental activism. During our meetings, I was educated on topics and issues I was unfamiliar with before, such as the significance of MPAs and the threats facing certain tidepool organisms, along with current efforts to mitigate these threats. We also had the opportunity to visit the beach for ourselves and see the wildlife that was there, putting our work into a more tangible and meaningful perspective.