Prairie Protection Colorado

Prairie Protection Colorado

Prairie Protection Colorado

Prairie Protection Colorado (PPC) is a non-profit organization that advocates for prairie dogs by drawing attention to the mass exterminations of prairie dog colonies through organizing and resisting the destruction of the last remaining prairie communities. Designed to promote awareness around prairie dog endangerment, our team explored with PPC's stakeholder areas where their website would align with their business goals and designed a new and improved website.

Prairie Protection Colorado (PPC) is a non-profit organization that advocates for prairie dogs by drawing attention to the mass exterminations of prairie dog colonies through organizing and resisting the destruction of the last remaining prairie communities. Designed to promote awareness around prairie dog endangerment, our team explored with PPC's stakeholder areas where their website would align with their business goals and designed a new and improved website.

My Role

My Role

My Role

UX Designer

UX Researcher

UX Designer

UX Researcher

Team

Team

Team

3 Designers

3 Designers

Timeline

Timeline

Timeline

3 weeks

3 weeks

Tools Used

Tools Used

Tools Used

Figma

Google Drive

Miro

Trello

Zoom

Figma

Google Drive

Miro

Trello

Zoom

Figma

Google Drive

Miro

Trello

Zoom

Problem

Problem

Problem

My team and I observed that users often have trouble finding the information they need and found the unprofessional/sketchy look of the PPC's website off-putting, preventing users from engaging with PPC in meaningful ways likes volunteering or working with PPC to save their own local colony. This results in missed opportunities for involvement from potential supporters—leaving the prairie dogs to fend for themselves.

My team and I observed that users often have trouble finding the information they need and found the unprofessional/sketchy look of the PPC's website off-putting, preventing users from engaging with PPC in meaningful ways likes volunteering or working with PPC to save their own local colony. This results in missed opportunities for involvement from potential supporters—leaving the prairie dogs to fend for themselves.

Outcome

Outcome

Outcome

To redesign and organize the PPC's website so that (1) our users feel empowered and informed about the PPC and its cause, (2) users can easily find the information they need, and (3) get users returning to the website.

To redesign and organize the PPC's website so that (1) our users feel empowered and informed about the PPC and its cause, (2) users can easily find the information they need, and (3) get users returning to the website.

Research

Research

Research

Initial Impressions

Initial Impressions

Initial Impressions

One of our designers encountered PPC's website and identified growth opportunities. Through qualitative interviews, we identified key elements that make a nonprofit's website appear legitimate and reliable:

  • Sleek, modern design

  • No ads

  • Thoughtful, organized navigation

  • Donation CTA button


While these insights helped shape our vision, they didn't pinpoint specific issues. To address this, I suggested conducting a usability test to identify precise problems on PPC's website.

Some of the tasks we gave to our participants included:

  1. Find PPC's mission

  2. Locate campaigns

  3. Navigate and learn about how to save a colony

One of our designers encountered PPC's website and identified growth opportunities. Through qualitative interviews, we identified key elements that make a nonprofit's website appear legitimate and reliable:

  • Sleek, modern design

  • No ads

  • Thoughtful, organized navigation

  • Donation CTA button


While these insights helped shape our vision, they didn't pinpoint specific issues. To address this, I suggested conducting a usability test to identify precise problems on PPC's website.

Some of the tasks we gave to our participants included:

  1. Find PPC's mission

  2. Locate campaigns

  3. Navigate and learn about how to save a colony

Prairie dog with a sign
Findings
Prairie dog with a sign
Findings
Prairie dog with a sign
Findings
Torn piece of paper

Lack of Readability

Torn piece of paper

Lack of Readability

Torn piece of paper

Lack of Readability

Torn piece of paper

Non-Professional

Presentation

Torn piece of paper

Non-Professional

Presentation

Torn piece of paper

Non-Professional

Presentation

Torn piece of paper

Navigation Bar Affordances

Torn piece of paper

Navigation Bar Affordances

Torn piece of paper

Navigation Bar Affordances

Business Needs

Business Needs

Business Needs

We interviewed the stakeholder to find out their goals and needs for PPC's website. They needed:

  1. To find more actionable activists to join the fight not only for the prairie dog, but all of the wildlife along the Rocky Mountains that are being encroached upon due to developments

  2. To obtain more donations to use in processes of saving the prairie dogs

  3. To have an overall more professional, sleek, and inviting look to the website

We interviewed the stakeholder to find out their goals and needs for PPC's website. They needed:

  1. To find more actionable activists to join the fight not only for the prairie dog, but all of the wildlife along the Rocky Mountains that are being encroached upon due to developments

  2. To obtain more donations to use in processes of saving the prairie dogs

  3. To have an overall more professional, sleek, and inviting look to the website

Define & Ideate

Define & Ideate

Define & Ideate

Getting To Know Our Competitors

Getting To Know Our Competitors

Getting To Know Our Competitors

Our team wanted to see what other organizations were doing and how they were successful. Some of our takeaways of ideas other sides were doing well included:

  • Hero Image

  • Content Chunking

  • CTA Buttons

Our team wanted to see what other organizations were doing and how they were successful. Some of our takeaways of ideas other sides were doing well included:

  • Hero Image

  • Content Chunking

  • CTA Buttons

Feature Priority Matrix

Feature Priority Matrix

Feature Priority Matrix

We then narrowed in on 3 main features we'd like to implement from the feedback we got from our users and stakeholder:

  1. A more sensible navigation bar to help users find what they need

  2. UI: Typography hierarchy, fonts, page content into separate blocks

  3. Easier way to find social media/newsletter sign-ups

We then narrowed in on 3 main features we'd like to implement from the feedback we got from our users and stakeholder:

  1. A more sensible navigation bar to help users find what they need

  2. UI: Typography hierarchy, fonts, page content into separate blocks

  3. Easier way to find social media/newsletter sign-ups

Feature Prioritization Matrix
Feature Prioritization Matrix
Feature Prioritization Matrix
Feature Prioritization Matrix

User Flow

User Flow

User Flow

Because this was a multifaceted website, the re-design was centralized around users saving a prairie colony near their home.

Jake's User Journey Map
Jake's User Journey Map
Jake's User Journey Map
Jake's User Journey Map

Design

Design

Design

Prototyping

Prototyping

Prototyping

Working off of the original site, we wanted to ensure each page had:

  1. A majority white background for contrast and clarity

  2. A section on the homepage that clarified user goals - in this case, saving a colony

  3. Simplifying content so that it is more digestible for users


Participants testing the original website had a difficult time finding the mission statement. With this in mind, I prototyped the homepage's hero to include the statement, so users knew immediately what kind of site they were getting in to. I prioritized user goals with the next section under the hero to let users know what they can do on this website.


The confirmation page allows users to know that they have successfully sent information to PPC. Users are also given the option to save another colony or go back to the homepage.

Working off of the original site, we wanted to ensure each page had:

  1. A majority white background for contrast and clarity

  2. A section on the homepage that clarified user goals - in this case, saving a colony

  3. Simplifying content so that it is more digestible for users


Participants testing the original website had a difficult time finding the mission statement. With this in mind, I prototyped the homepage's hero to include the statement, so users knew immediately what kind of site they were getting in to. I prioritized user goals with the next section under the hero to let users know what they can do on this website.


The confirmation page allows users to know that they have successfully sent information to PPC. Users are also given the option to save another colony or go back to the homepage.

Before & After (Wireframe of PPC's Website)
Before & After (Wireframe of PPC's Website)
Before & After (Wireframe of PPC's Website)

Mobile Prototype

Mobile Prototype

Mobile Prototype

While creating the mobile prototype, I wanted to ensure we were meeting our stakeholder's needs. For example, one of our stakeholder's goals is to acquire more donations through their website. Our desktop header had 3 different buttons: newsletter signup, Facebook, and donation. I prioritized our donation button and decided for the mobile header that the 2 main button/icons on the mobile header were the primary navigation and donation.

While creating the mobile prototype, I wanted to ensure we were meeting our stakeholder's needs. For example, one of our stakeholder's goals is to acquire more donations through their website. Our desktop header had 3 different buttons: newsletter signup, Facebook, and donation. I prioritized our donation button and decided for the mobile header that the 2 main button/icons on the mobile header were the primary navigation and donation.

Final Prototype

Final Prototype

Final Prototype

Final Thoughts

Final Thoughts

Final Thoughts

As a team, we were challenged to balance the many offerings of a non-profit organization within a single website. We focused in on PPC’s ability to kickstart a passionate prairie dog lover with the tools they need to fight for justice. This prototype gives a preview of how PPC could better appeal to users through clear, sleek design and a more simplified navigation.

As an individual, I was challenged with balancing life and work. Communication with my team members was very crucial during this time. We were able to delegate as a team what I could do and when I was assigning myself too much. I was extremely proud of my team and I for this.

Future Opportunities

Future Opportunities

Future Opportunities

  1. Partner Causes

We faced a few issues especially when it came to PPC's partners. They are partnered with Colorado Wildcats, and while it was featured on their website to promote their partner's cause, it still created lots of confusion for participants despite the re-design. How can we implement other partner causes without confusing our users yet still supporting PPC's partners?

  1. Integration with Social Media

PPC's stakeholder aimed to increase donations and activists with their website. Since PPC's main social media is Facebook, integrating their Facebook updates would allow a community of prairie activists to build and grow.

  1. Campaigns

How will users know that saving a colony in 3 easy steps will save a colony? Consideration of moving campaigns onto the home page may allow an increase in legitimacy for users, causing an increase in donations and possibly prairie activists.

Check out other case studies:

Check out other case studies:

Check out other case studies: