Duration
20 weeks
Type
Senior capstone project
Role
Lead UX Designer
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. To combat this lack of awareness, our team was tasked with creating a comprehensive, accessible, and engaging mobile web application for visitors to use.
Stakeholder Collaboration
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. My team developed the following research question to help guide us throughout these preliminary stages:
How can we better educate and engage visitors about LOF and the conservation of Laguna Beach?
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. Together, we were able to craft a general concept for the application and would continue to provide updates and solicit feedback.
Member 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.
LOF members were interviewed on-site at the beach with the permission of the foundation. General research questions that guided our interview process included:
-
What does LOF do?
-
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?
Overall Insights
After reviewing the notes from our biweekly meetings and analyzing our interview responses using methods such as thematic coding, we discovered three reoccurring themes regarding beach visitors: educating visitors about conservation and LOF's mission, assisting them in their navigation of the beach, and encouraging their participation in conservation efforts.
Educating the Public
LOF members 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.
Visitor Assistance
LOF members 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.
Citizen Science Program
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. LOF members stressed that this not only enriches their data but also empowers visitors to actively participate in and learn about beach conservation efforts.
Personas
To better organize the findings from the interviews and clarify our user needs and challenges, I crafted three different personas representing a diverse range of beach visitors.
The Fifth Grader
The Elder
The Activist
Features
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 The application would be divided into the following four primary features:
Field Guide
Comprehensive resource for visitors to learn about Laguna Beach, its wildlife, its conservation and LOF.
Interactive Map
Allows visitors to self-navigate the beaches by tracking their location. They can also view others' observations via location pins.
Citizen Science Program
Visitors input their ecosystem observations directly onto the map, where they are pinned and added to LOF's database.
Observation Posts
Users can log and post their observations at the beach for others to see and like.
Design Evolution
After finalizing our app's features, myself and my fellow designers collaborated on transforming our conceptual ideas into visual representations. I sketched a few preliminary ideas which were then converted into wireframes using Figma. As the lead designer, it was my responsibility to effectively communicate our designs to LOF and our developers, iterating on them as needed. Upon approval, we would translate them into high fidelity prototypes for referential use by our developers. Additionally, we created style guides and a transition network diagram to streamline development procedures and visualize user flows. The evolution of each feature's design, alongside the style guide and diagrams is depicted below.
Landing Page
Sketch
Wireframe
Prototype
The landing page serves as the central hub of the application. There were many possibilities that we discussed with our partner for what this might look like, hence the numerous iterations of sketches and wireframes shown above.
We ultimately opted for a more simple approach where users could access the map, field guide, and a log book to view their past observaitons. Visitors can also use their camera to take a picture of an organism and identify it (via the Seek/iNaturalist API).
Field Guide
Sketch
Wireframe
Prototype
The field guide is a comprehensive tool containing information about wildlife, the beach, and the foundation. To organize this vast range of information, we created a main menu where users could easily access specific sections.
Map & Data Submission
Sketch
Wireframe
Prototype
The interactive map allows beach navigation and MPA zone identification, promoting education awareness amongst visitors about the different types of MPA zones. Visitors can also report any MPA violations through the reporting button, further contributing to beach safety.
Additionally, the camera feature integrated into the homepage extends to the map. Users can identify species via their camera and submit observations, which are then pinned to their location for others to view. This fosters engaging data visualization for both visitors and researchers at LOF.
Observation Posts
Sketch
Wireframe
Prototype
Visitors can choose to post their observation publicly for others to view and like. The post will be displayed under the respective page of the species they observed.
Style Guide
To solidify our design direction and facilitate a smoother development process, we created a style guide that aligned with the foundation's brand. We created a color scheme using the colors found in the foundation's logo and chose a font that reflected a professional yet lighthearted tone, being mindful of accessibility requirements for contrast and sizing. After further discussion with our partner, we opted to switch to the font featured in the LOF logo to better adhere to the foundation's existing brand.
Generalized Transition Network
The generalized transition network diagram is intended to map out the flow of interactions within our application. Because our app has many features and complex user interactions, creating the above diagram was beneficial for our developers to understand the overall flow and relationships between various components.
Iteration & Development
Overall, the design process was highly iterative in nature, as numerous challenges arose throughout the development process. Our developers would realize 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.
Issues with iNaturalist API
Our developers had discovered that species identification via a user's camera would not be possible to implement in time for the project deadline, due to certain restrictions imposed by the iNaturalist API.
As a result, myself and the other designers had to reiterate all aspects of the design that involved the species identification feature. An example is shown on the left, where our main menu's camera element was replaced with a tidal chart. The map's camera feature was altered to allow users to take and upload pictures of wildlife instead.
Field Guide Menu Changes
Another obstacle our developers encountered was implementing the visual notebook concept utilized in the field guide's main menu. Although visually engaging, we later realized it may not be as intuitive to use as a conventional menu format. As a result, I was asked to reformat the entire menu to be more straightforward and simple, as shown on the right.
Eliminating Features
There were several instances where we had to forego certain design concepts due to logistical concerns and time constraints.
For example, our partner raised concerns regarding the efficacy of the reporting feature. Allowing users to self-report beach violations could result in false reports and inaccuracies. Ultimately, we decided with our partner to scrap the idea entirely. I replaced the reporting button with an option for users to upload a photo from their camera roll as a temporary fix.
Due to time constraints, we were also unable to include the observation posts. Without it, the app could still achieve the goal of being educational and informative, but would lack a sense of community engagement and interaction. As a temporary replacement, the designers suggested to provide a photo library with images sourced from iNaturalist for users to view at their leisure.
Final Outcome
Once the project deadline had arrived, our team presented the project at a capstone showcase. Our partner was very pleased with what we were able to accomplish within the given timeframe.
Unfortunately, we were unable to deliver a complete product due to time constraints and development issues. We struggled with scope creep and unforeseen challenges, sacrificing secondary components of the application and leaving others incomplete. Dealing with these difficulties also led us to forego usability testing in the interest of time.
While we were unable to deliver a complete product, my team and I are still extremely proud of what we accomplished. We gained invaluable insights about the product development process and hope that our design concepts will be helpful to those who continue this project in the future.
Scan the QR code to the right or click on the button 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 accounts 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 and complete our initial vision.
Takeaways & 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 have given me a glimpse of 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. Creating the application and seeing its potential for mobilizing visitors was incredibly fulfilling and I cannot wait to see the application's continued evolution.