CoNCerve
A desktop website that allows North Carolina residents and visitors to learn about local conservation issues and opportunities.
Web
Project Overview
With public awareness around conservation concerns increasing each year and the worldwide web at our fingertips, the demand for accessible information about local needs and involvement opportunities is higher than ever. Still, much of the information available to people is highly technical and can be difficult to understand for those without a background in the sciences. Additionally, there are very few sites that allow people to search for volunteer and involvement opportunities in their areas.
The Problem
How might we develop a website that makes conservation information and involvement accessible to citizens of North Carolina?
Design Process
Research
What solutions already exist and how effective are they?
Competitive Analysis
What conservation issues do North Carolinians care about?
User Surveys/Interviews
Research Goals
Determine what conservation issues are most important to NC citizens.
Discover how users search for conservation information currently.
Determine what information is currently available to users and how that information is presented.
Gain insight into the common pain points users face when researching conservation issues and involvement opportunities.
Understand the breadth of conservation issues facing North Carolina.
Competitive Analysis
What solutions are already out there?
I conducted a competitive analysis of existing direct and indirect competitors in order to understand how they approach the problem and determine their strengths and weaknesses, as well as any gaps that currently exist in the market.
Overall Findings
North Carolina Wildlife Resources Commission
Direct Competitor
Pros:
This website contains only information about North Carolina specific conservation issues.
This is a state government run website, which gives it authority and credibility.
Contains all information about state programs and laws pertaining to conservation efforts.
Cons:
Language is full of jargon and can be difficult to understand.
Text blocks are dense and not well spaced out, making reading any information overwhelming.
“Ways to Conserve” is buried deep within the site and is difficult to find.
No easy way to share information on social media.
World Wildlife Federation (WWF)
Indirect Competitor
Pros:
Each page has a “Take Action” button in the top navigation.
Navigation is clear and consistent.
The information presented is thorough and gives a sense of trustworthiness to the site.
Cons:
Conservation issues presented are on a global scale, and there are no options to explore localized issues.
Some of the information is presented in large blocks of text that can be difficult to read.
There are social media links for the landing page of the website, but no easy way to share specific pages.
Wildlife Conservation Society (WCS)
Indirect Competitor
Pros:
Text is broken up well by graphics and bullet points and feels easy to parse information out of.
All statistics are accompanied by charts that make them easy to understand at a glance.
“Ways to Support” is present on the main navigation bar.
Cons:
Conservation issues presented are on a global scale, and there are no options to explore localized issues.
The website is geared more towards helping companies get involved in conservation through monetary donations, rather than individuals.
There is little emphasis on social media sharing of information or involvement opportunities.
Wildlife Conservation Network (WCN)
Indirect Competitor
Pros:
All of the text is laid out in digestible sections that users can click through as they explore.
“Get Involved” is present on the main navigation bar and leads to a page where users can learn about several different involvement opportunities.
There is a clear emphasis on sharing information and donations on social media to spread the word.
Cons:
Conservation issues presented are on a global scale, and there are no options to explore localized issues.
There are several areas where text is laid over photos, making it difficult to read.
User Surveys and Interviews
What do users want?
I conducted a user survey which consisted of 22 questions, broken down into four sections: general conservation knowledge, conservation opportunity experiences, website design preferences, and demographics. I then conducted interviews with 5 survey respondents to gain further insights about their preferences and pain points.
Survey Results
of respondents reported that wildlife conservation was of high importance to them.
of respondents who had searched for involvement opportunities reported that not enough information was available to them.
of respondents reported that they preferred bulleted lists for large quantities of information.
40.7 % of respondents reported that they get conservation information from social media. 29.6% reported getting this information from in person advocates.
Respondents reported that the most important conservation issues to them were:
Maintenance of protected lands
Endangered animal species conservation
Habitat conservation
Respondents reported that the top three ways they were likely to contribute to conservation needs were:
Education opportunities
Volunteering
Advocating
Interview Takeaways
Users identified that finding local conservation opportunities could be difficult because there is no centralized place to search.
Users identified that complicated jargon could sometimes make learning about conservation feel overwhelming.
Key Takeaways
Users have a desire to learn about and get involved in local conservation work.
Social media engagement is underutilized by existing conservation resources to increase awareness.
Existing resources focus on large scale global issues rather than more actionable local issues.
Available information is written with complicated jargon that can make it intimidating for people to research.
Refine
Building a better resource
Using insights from market and user research, I began to refine the target audience and prioritize the features and information that would make up the user flow of the prototype.
Persona
Based on the information gathered from user surveys and interviews, I developed a main persona that represents the average citizen who wants to engage in conservation work, but does not have the expertise to do so without resources to help.
User Stories
Based on the persona and the insights from user research, five key user stories were developed to guide the flows that would be created for the website to ensure that it is built with user needs in mind.
User Flow
Conservation Information with Ease
This is a user flow showing how users can browse the website to learn about conservation issues, browse involvement opportunities, and share what they find on social media.
Site Map
Creating Structure
This is a diagram of the pages that will be required to fulfill the selected user stories, as based off of the user flow.
Lo-fi Wireframes
Using the main user flow as a guide, I began shaping the website through wireframing. In this step, I established basic layouts and navigation. A key challenge during this step was ensuring that the information would be able to be laid out within the structure in a digestible and welcoming way.
Design
Merging Visuals with Education
Using insights from the website preferences section of the user surveys and insight from competitive analysis, I began creating a brand identity for the website. The key challenge during this step was to create a brand that invokes both trust and delight in users.
Style Guide
The branding for CoNCerve was built from the natural habitats present in North Carolina, resulting in a color palette with muted earth tones and a simple logo that evokes the purpose of the website. A traditional Serif font was chosen for headlines to give a feeling of authority, while a geometric Sans Serif font was chosen to maximize the readability of the information on the site.
Hi-fi Wireframes
When combining the lo-fi wireframes with the established branding, I wanted to create a website that felt rustic and natural, while avoiding becoming too dark and heavy. I focused on evoking the comfort and wonder that can be found in nature while ensuring that information was well broken up into digestible pieces and complimented by images where possible.
Accessibility Considerations
During the entire design process, several accessibility considerations were taken to ensure that the finished site can be used by anyone. Detailed below are a few of the notable aspects that were considered.
Contrast and Legibility
The color combinations used throughout the project were tested against the WebAIM standards and passed with AAA for the formats in which they were used.
Alternative Text
This is an image heavy site, so it was important to include alternative text for all of those images to ensure that the site was accessible and enjoyable for those with vision impairments.
Language and Readability
According the the WCAG, accessible writing should fall within the range of 7-9 on the Flesch-Kincaid test. Below are the scores for all of the text heavy pages in this project:
State Overview: 7.9
Endangered Animals: 8.2
Endangered Plants: 8.2
Habitat Preservation: 9.0
Protected Lands: 8.8
Invasive Species: 7.9
Volunteer: 8.2
Donate: 7.3
Visit: 8.4
Social Media Impact: 7.8
Test
After prototyping the hi-fi wireframes, I conducted 10 unmoderated and 3 moderated usability tests to evaluate the overall usability of the design and to uncover any pain points in the design.
Testing solutions with users
Usability Test Tasks
Scenario: You are an adult living in North Carolina who wants to learn more about your local conservation needs and share what you learn with your friends.
Task 1: Explore the home page of this website, then choose a conservation topic to learn about and navigate to that page.
Task 2: Explore the ways that you can get involved in local conservation.
Task 3: Find out how social media can impact conservation work.
Task 4: Choose a page that you find the most interesting and share it to social media.
Test Results
Successes
100%
of users were able to navigate to a conservation topic page that interested them.
92%
of users were able to navigate to ways to get involved through various paths.
Improvements
46%
of users were unable to find information on social media impact without additional prompting
77%
of users were unable to successfully complete the Share to Social Media flow.
Iterate
Improving based on feedback
Based on the results of usability testing, improvements were made to several aspects of the website to increase usability and alleviate pain points.
Improvement 1
Social Media Engagement
Pain Point:
During usability testing, users had a difficult time finding a way to share pages of interest to social media.
Solution:
In addition to the Share Page button at the top of each page, an additional button was added to the bottom of each page so that it is easy for users to share articles once they finish reading them.
Improvement 2
Completing the “Share” Task
Pain Point:
During usability testing, users expressed confusion about how to share a specific page to their social media due to an incomplete dropdown menu on the Share page.
Solution:
A functional dropdown menu was added to the Share page to allow users to navigate there via the navigation bar and choose any page to share.
Improvement 3
Adjusting for the viewport
Pain Point:
During usability testing, users expressed frustration that some of the information cards were too large to see in a single screen, which made the information feel disjointed.
Solution:
Everything in the website was condensed within spacing best practices to ensure that the cognitive flow does not become disrupted by screen breaks.
