Case Study:

Plover Patrol

App and Website Design for Google UX Design Course

Homepage design for Plover Patrol website

Overview

My Role

UX / UI Designer

Responsibilities

User research, wireframes, mockups, prototyping, user testing

Timeline

November - December 2022

Tools

Adobe XD

Brief

  • Practice the UX design process by creating a mobile app and responsive website for social good.

Background

For the final part of the Google UX course, my prompt was to “design an app to help protect an endangered species of bird.” I chose the Western Snowy Plover, a bird native to my region that is being tracked by volunteers through a program called Plover Patrol. Their data is submitted to researchers who track population numbers, nesting areas, and potential threats.

Once the app was complete, we had to create a companion responsive website for the same cause. I chose to focus the website on driving public outreach and interest in protecting plovers.

CONsiderations

  • Volunteers collect data via their smartphone, or on paper to be submitted through a computer at a later time. Data can include written notes and photos.
  • App users are collecting data while on beaches along the Pacific coastline. Internet access is intermittent on beaches, and sunny conditions affect screen viewing.

Results

A native app and responsive website to collect data from volunteers.

Discover + Define

Core Problem

While out on patrol (they call it a mission), volunteers need to collect a variety of data about the plovers and their habitats. Once the mission is complete, data is submitted to the researchers. Accuracy is important for researchers; ease and speed of data entry make it easier for volunteers to be accurate.

The Users

For the app, smartphone users who want to collect data directly into the app rather than transcribe it later.

On the website, I focused on users from the general public who want to know more about the Patrol and how they can help.

User research

Since I didn’t have access to any real volunteers, I reviewed Plover Patrol training videos to learn as much as I could about what people encounter while on patrol. I learned what data they track, what reminders they might need out on patrol, and what obstacles they run into.

Mission notes and sitemap
‍(click to enlarge)
Thumbnail image of mission notes
Thumbnail image of sitemap

Develop

Ideation and early design

I mapped out on paper the user flow and wireframes for the data needed. Because there is so much data to keep track of, I divided it into four main groups - Habitats, Plovers, Predators, and Disturbances.
Early sketches
(click to enlarge)
Early app sketches
Early app sketches
Some App Wireframes
(click to enlarge)
Thumbnail image of Mission Main screen
Thumbnail image of Mission Detail screen
Thumbnail image of Mission Main screen
Thumbnail image of Habitat screen
Thumbnail image of Confirm Mission End overlay
Thumbnail image of Data Review and Submit screen
Thumbnail image of confirmation screen

total transparency time!

As a designer, I am thorough, but not always fast. I challenged myself during this project to get the wireframes, mockups, and prototypes to the point of Good Enough as quickly as possible. These could definitely use more refinement, but they are Good Enough.

User testing

I conducted moderated usability studies to test the initial prototype. Key insights were:
  • It was unclear that the dates in the mission list were clickable; users needed clearer cues to start an active mission.
  • The Edit Mission List button appeared too prominently, making it feel like an important call to action instead of an option.
  • The Review Data screen felt overwhelming to most users and should be easier to scan.

Mockups and prototyping

With those insights from the testing, I moved on to mockups and prototyping. You can view the prototype here.
Select Mockups
(click to enlarge)
Thumbnail image of splash screen
Thumbnail image of mission list screen
Thumbnail image of mission detail screen
Thumbnail image of Active Mission Home screen
Thumbnail image of Habitats input screen
Thumbnail image of plover data input
Thumbnail image of Review and Submit screen
Thumbnail image of confirmation screen

Responsive wEbsite

For the website, I mapped out a more extensive sitemap to accommodate the site's varied uses. It includes research results from previous seasons, FAQs and maps for volunteers, and ways for new potential volunteers to get involved.
Homepage mockups for different screen sizes

Learning

What did I learn?

  • There are certain transitions and interactions I can't figure out how to prototype in Adobe XD. More practice is needed.
  • If I return to this project at some point, I want to reconsider the color palette, and build out some of the research results pages.

How does this design make people's lives better?

  • I love the idea of researchers being able to crowdsource data; the internet has its drawbacks, but this is an awesome application of it. Getting more accurate information to researchers who are trying to save animals is worth the effort.

Send me a message

Thank you! Your message has been received.
Oops! Something went wrong while submitting the form.

Marni Keenan

UX/UI and Visual Designer
Selected Projects
Oyatsupan Bakers
RAFI-USA
Plover Patrol