Portfolio
Compass
Project Overview
The Compass Website, an ADV132 class project, was designed to raise awareness about coastal environmental issues and inspire action for their preservation. This was a project for a UX class offered at SJSU, and I worked in a team of two to create a complete case study and prototype based on an issue.
Timeline
Three months:
March to May
Areas
UX Writing, Prototyping, User Research, Case Study
Tools
Figma (Prototyping), FigJam (collaborative brainstorming), Adobe Express (presenting results), Google Forms (Survey), Illustrator (website icons)
Team Roles
Myself - Design, Research, and Prototyping
M. H. - Research, UX Writing
The Problem:
The California coast and ocean are significant resources requiring greater conservation attention. Unfortunately, human activities are causing significant damage to these areas. One of the biggest challenges is the need for more education and information about the value of the coastal environment and how human actions can impact it. Many people may need help understanding the importance of these areas or the consequences of their actions. This is especially true in developing countries and marginalized communities, where information about the coastal environment may be scarce or difficult to access. We must prioritize education and awareness efforts to ensure that everyone understands the significance of these vital resources and takes steps to protect them.
The Solution:
The comprehensive solution for addressing coastal environmental challenges in California comprises a multi-pronged approach, combining education initiatives to convey ecological importance with accessible online resources like the Compass Website. It also encourages community engagement through activities like beach clean-ups and advocates for policies supporting sustainable coastal development, all while leveraging digital media to foster awareness and responsible stewardship among Californians.
User Research
Overview: Survey
Interviews can provide valuable insights into coastal communities' complex issues and help researchers develop more effective and culturally appropriate solutions to climate challenges. Users' perspectives and insights are invaluable in validating research findings and building lasting relationships with the community.
For this reason, our team researched and collected local knowledge by interviewing people who lived in and outside coastal communities. Our aim with this survey was to understand the coastal climate better and explore ways to raise awareness through digital media.
Survey Questions:
-
What is your First Name and Last Initial?
-
How old are you?
-
Are you currently a student?
-
What do you do for a living?
-
In what city do you currently reside?
-
How often do you go to the beach?
-
If you are a surfer, has anything prevented you from surfing in the past (weather, emergency, etc.)?
-
Would you use a website to find information about the coastal environment?
-
How often do you use social media (Facebook, Instagram, etc.)?
-
How would you want to be informed about local environmental issues?
-
Do you notice any issues with trash or waste when visiting the beach?
-
On a scale of 1 to 5, how familiar are you with the topics below?
-
Marine Ecology
-
Pollution
-
Sustainable Coastal Development
-
-
Are you aware of any nonprofit organizations on coastal conservation and sustainability?
-
Do you feel like you are educated on the coastal environment?
Interviewees
The interviewees in our study encompassed a diverse demographic, representing individuals from various backgrounds and lifestyles. They included individuals of different ages, occupations, and geographic locations along coastal regions. We interviewed students and non-students, surfers and non-surfers, residents of different cities, and people with varying levels of familiarity with coastal environmental topics.
Top occupations of those we interviewed:
-
Freelance Photographer
-
Product Manager
-
Product Researcher
-
Fisher
-
Lifeguard
-
Retail Employee
-
Social Media Manager / Content Creator
-
Software Engineer Student
-
College Student
-
College Student + PT Worker
-
High school student
-
Librarian
-
English Teacher
Note: There is a wide variety of careers and jobs because we wanted to sample the general public, so it should be a great variety.
Cities:
-
Santa Cruz, CA
-
San Jose, CA
-
Mountain View, CA
-
Los Angeles, CA
-
Richmond, CA
-
Ithaca, NY
-
Charlotte, NC
-
Fort Lauderdale, FL
-
Dallas, TX
-
Salles, France
Survey Results: Interview Results
One way was getting in touch with the Santa Cruz surfer community. Another was students from SJSU.
Age range 17 – 31 years
How often do you go to the beach? Even though many people live near the beach, they are not as in touch with the coast and, therefore, need to be more in touch with coastal issues. We also had people who visit a few times a week, which is good as well; it means we are in touch with what people who are very familiar with the coast would want to see improved.
61.1% Rarely (Once every few months); 33.3% Often (Couple times a week); Rest is Never
The bottom 3 questions reveal why we went with a website that has social media functions and a community feature.
Would you use a website to find information about the coastal environment? 73.3% Yes
How often do you use social media (Facebook, Instagram, etc.)? 84.2% Daily
How would you want to be informed about local environmental issues? Highest responses show Social Media, Publications, and Friends
On a scale of 1 to 5, how familiar are you with the topics below?
Marine Ecology 2
Pollution 3
Sustainable Coastal Development 1
(all < 4/5, all low numbers)
Do you feel like you are educated on the coastal environment?
47.4% No ; 42.1% Maybe ; 10.5% Yes
Are you aware of any nonprofit organizations on coastal conservation and sustainability?
No: 11/19 = 57.89% said no (Over 50% of the responses listed no, they were not aware of any such organizations)
Listed: local government agencies, coral reef alliance, ocean conservancy, Monterey Bay Aquarium, Oceana, Rip Curl, Watershed Project, Santa Cruz Clean Oceans (SCCO)
Result Summary
#1
Problem:
Most people answered that they did not feel or maybe felt educated on the coastal environment, at a combined total of 87.5%.
-
Explanation:
This survey was conducted on people of various demographics, proving that there is a lack information across the general public on the marine environment and how to protect it.
#2
Problem:
Subject familiarity
-
Explanation:
Most people were not familiar with the subjects we want to educate the public on. They also had limited familiarity of a few environmental organizations.
#3
Problem:
Trash on Beach
-
Explanation:
Almost everyone said they had seen trash on the beach at some point that they had visited.
#4
Problem:
Universal / Wide - Range Issues Lack of Access to Sustainable Information
-
Explanation:
Despite interviewing a diverse demographic of occupation, location, etc. Almost all people surveyed reported feeling a lack of resources or information on ocean sustainability.
Ethnographic Research: Observational Study
UX Fly on the Wall Observation Study
Date: 3/22
Location: Sunset Beach, CA
Objective: This study aims to observe how users interact with the beach environment at Sunset Beach, Los Angeles, CA.
Methodology: This study utilizes a fly-on-the-wall observational method, where the researcher will observe users in their natural environment without interfering or engaging with them. The researcher notes their behavior, interactions, and other relevant data points.
Participants: The participants of this study are individuals who were present at Sunset Beach, CA, on March 22nd.
Observational Notes:
-
Few people were present on the beach during observation around noon.
-
Trash was littered on the beach, where the waves washed out seaweed and seashells.
-
Seagulls were wading in between the trash, foraging for food.
-
None of the people present were littering.
From the observational notes, users at the beach did not litter or leave behind trash. However, there was trash on the beach, likely coming from people who had left earlier or from trash that had washed up from the ocean. The presence of seagulls foraging for food among the trash suggests that marine debris is a common occurrence at the beach. It is important to note that the wildlife directly interacted with the trash, polluting the marine environment. Based on this study's findings, measures need to be taken to remind users of the importance of properly disposing of their trash to prevent environmental pollution. Additionally, efforts should be made to address the issue of trash at the beach to maintain a safe and clean environment for all.
Other methods include Contextual Inquiry and Walk-a-mile Immersion.
Competitive Research
We conducted the Alternative World Research and found these sites:
User Personas:
We chose Emily Williams (Age 28) as our representative persona to accompany our user journey. This is because we plan a web service to raise marine environment awareness. Therefore, our service's primary target is the younger generation with high Internet and SNS access.
Press the arrows to see our other user personas below:
Problem Definition Statement
A problem statement is an actionable summary of the user, their goals, and what needs to be solved to meet them.
Our Problem Definition Statement:
I am a person living by the coast trying to learn more about protecting the ocean from habitat destruction and industrial damage to the marine environment, but I’m struggling because I am occupied with life and don’t always have access to accurate and relevant information. This makes me feel indifferent and hopeless towards climate issues.
Problem Tree Analysis
A problem tree analysis (also called situational analysis) helps find solutions by mapping out the anatomy of cause and effect around an issue, similar to a mind map. Breaking down the problem into manageable chunks enables more apparent prioritization, enhances understanding of interconnected causes, and identifies critical issues.
Design Process Overview: Brainstorming Solutions
There is plenty of news about ocean pollution and its adjacent topics. This project's brainstorming phase focuses on determining the online resources needed for their initiative centered around ocean sustainability. The primary online resource identified is a comprehensive website offering information on critical ocean-related issues, such as coastal erosion, flooding, and microplastic pollution. To supplement existing online resources, the team plans to create an informational series that organizes information by topics and regional/local issues. Additionally, they aim to facilitate community engagement through partnerships with local groups and government agencies, survey-based matching of users to relevant organizations, education and outreach programs, and policy advocacy to protect coastal environments. The question of what specific services are required to support these endeavors remains to be addressed.
Top Solutions:
-
Online Resources
-
The website will have information about various issues related to ocean sustainability: coastal erosion, flooding, and microplastic pollution. Online resources can be a powerful tool for raising coastal environmental awareness, particularly among younger generations.
-
-
Informational Series
-
Organized information by topics
-
Features regional and local issues
-
-
Partnerships
-
As an organization, we partner with local groups and governments to bring resources to our website.
-
-
Survey matching users to organizations
-
Organizations are sorted by topic and what they do.
-
Questions will match the user based on what they are looking for
-
-
Education and outreach programs
-
These programs can educate the public about the importance of coastal environments and the impacts of human activities on these ecosystems. This might include workshops, seminars, and presentations on marine ecology, climate change, pollution, and sustainable coastal development.
-
-
Community engagement initiatives
-
Community engagement initiatives foster a sense of ownership and stewardship among residents and businesses. This might include activities like beach cleanups, coastal restoration projects, and citizen science initiatives that involve residents in monitoring and research efforts.
-
-
Policy Advocacy
-
Advocating for policies that protect and preserve coastal environments can raise awareness and drive change on a larger scale. This might include lobbying for legislation that addresses issues like coastal pollution, habitat destruction, and overfishing.
-
-
Partnerships and collaborations
-
Partnering with other organizations and stakeholders can amplify the impact of awareness-raising efforts. This might include collaborations with government agencies, non-profit organizations, and academic institutions to share resources and expertise and work together on initiatives that promote coastal conservation and sustainability.
-
Why we chose this format:
We chose to develop a website as our primary project product to consolidate information on various ocean sustainability issues, enhance educational outreach, and provide a platform for interactive features like surveys and user matching. This website will also serve as a central hub for community engagement initiatives, such as event listings and resources for citizen science involvement. Additionally, it will enable us to advocate for policies that protect coastal environments, showcasing campaigns and relevant legislation. In summary, the website aligns with our goal of efficiently disseminating information, engaging the community, and championing sustainable coastal practices.
Main Takeaways:
Website content will include...
-
Information on coastal ecosystems and their importance: This could include details about the different types of ecosystems found in coastal areas, such as beaches, estuaries, and wetlands, and why they are important.
-
Threats to coastal ecosystems: Explain the human and natural factors that risk coastal environments. This could include information about pollution, climate change, habitat loss, overfishing, and more.
-
Impact on human communities: Discuss the ways that the loss of coastal ecosystems can affect people, such as through increased flooding, reduced fish populations, and diminished recreational opportunities.
-
Ways to protect coastal environments: Offer tips and resources for individuals and communities to help protect coastal ecosystems. This could include information on recycling, reducing plastic use, participating in beach cleanups, supporting sustainable fishing practices, and more.
-
Success stories: Highlight examples of successful coastal conservation efforts and initiatives and how they have positively impacted local communities and the environment.
-
Relevant laws and policies: Provide information on relevant laws and policies that govern coastal conservation, including pollution, land use, and wildlife protection.
-
Resources for further learning: Offer links to other websites, books, and articles that provide additional information on coastal environment awareness, conservation, and related topics.
Prototype
Wireframes
Final Design
Style Guide
Logo: Created in Illustrator, the Compass Logo features the cardinal directions over a wave.
Meaning behind the name Compass:
-
We aim to lead people to save the ocean (survey, community, volunteer). We will navigate users interested in ocean sustainability to the opportunities that are right for them.
-
Steering/leading people in the right direction, Compass used by sailors to navigate the ocean.
Typography: (Font)
Text/Paragraph: Montserrat (sans serif) 16px
Display/Headers: Montserrat (sans serif) 32px, 40px
Base font size: Montserrat (sans serif) 20px
Montserrat
Text Sizes:
Paragraph/small: 20
Medium/buttons: 32
Titles: 40
Big: 80
Montserrat: Regular, medium, bold
Colors:
Complementary color scheme. Overall, incorporating a complementary color scheme can help create a captivating and well-balanced web design that engages users and enhances the visual impact of our website.
Color Scheme
Colors: Sea blue, cyan, green, dark blue
Color palette
Accent color
Meaning
Theme: Light colors
Complementary color scheme:
Iconography:
We set the concept of our web page icon as a compass. A compass is used at sea and is like a helper that tells people the direction. Like a compass on the sea, our web service aims to become a web that provides ways and directions to improve people's awareness of the environment through various resources and features.
Grid: 6 column, margin 50, gutter 50
Corners: 30
Effects: drop shadow, drop shadow dark
No strokes
Features
01 Main Page
Donation button (main page hover)
03 Quiz Page
With result page
05 News / Update Page
Title: News / Update pages
02 Volunteer Page
With survey : match person-organization
04 Profile Page
With Badges
06 Social Page
Reels-base forum
Reflection
Learnings
What we would improve
In retrospect, we could have conducted more extensive user testing and usability studies earlier in the design process to identify and address potential issues sooner. A more thorough competitive analysis could have revealed additional features or design elements to consider. In future projects, we would allocate more time for early-stage user testing and usability studies to gather feedback before committing to a final design. We would also broaden our competitive analysis to explore a broader range of similar products, ensuring we know all potential features and design approaches.
Response / Impact
The project yielded insights that underscored the need for better education and awareness about coastal environments. As a response, we developed a website that consolidates information on coastal sustainability, aiming to fill this knowledge gap. The project has the potential to make a positive impact by providing accessible resources and fostering community engagement around coastal conservation. The website's effectiveness in achieving these goals will be evaluated as users engage with it and provide feedback, allowing for ongoing refinements and improvements. I learned much about the process and the different research methods used in User Research. We created a prototype website based on our conducted research and brainstorming. It was a very educational and hands-on experience that left me and my teammate more knowledgeable.