Designing a bird sighting report tool

Simplifying the reporting process and making it an informative bird resource
OVERVIEW
In this project, I designed a platform to simplify the process of bird sighting reports and make it a database for users to learn about birds.
KEY WORDS
Product Design
Responsive Design
PROJECT TYPE
Personal project
DURATION
July 2022 to August 2022 (1 month)
TEAM
Yuri Minami
MY ROLE
Product design

Problem

The sighting report form used in my hometown is troublesome to submit and not attractive to the residents without knowledge about birds.

Saitama prefecture is the primary habitat of Eurasian collared doves in Japan. The number of individuals decreases, and the habitat is shrinking. Since the preservation plan is decided depending on the habitat data, the sighting report is essential. The prefecture asks people to submit a sighting report via mail or call.

However, the current user flow of submitting reports requires an effort because reporters need to fill out a Word file and send it an email. Also, this flow does not give them the sense of contributing to the community so it is not attractive to users without the specific passion for birds.

Research

As a result of a survey with 8 people found online about how they think of this process, half were negative about submitting reports, and three answered that the reporting process is too troublesome.

persona2

Problem Statement

How might we make the bird sighting reporting process seamless, enjoyable, and informative for people in a local community?

Ideation

I did a quick ideation exercise to consider ways to collect sighting reports easily.

image of crazy8

Key solution

Bird database where users can post sighting reports using their phones and browse other people's posts and bird knowledge.

Prototype

I started from paper wireframes and then shifted to Figma wireframes.

paper wireframes
low fidelity version of entry point of user flow page
My Reports(Entry Point)
Users can start creating a new sighting report by pressing the CTA button.
low fidelity version of creating report page
Create New Report
Users can fill out the sighting report form.
low fidelity version of select images page
Select Images
Users are asked to select bird images to attach. Users can also take photos in the app.
low fidelity version of select bird species page
Select Species
Users are asked to select a bird species they saw. The app also suggests the species based on the images chosen by users.
low fidelity version of report posting feedback
Feedback
After users post the report, a feedback dialog appears. Users can navigate the information page of the birds they saw to learn more about the species.
low fidelity version of report detail page
Reports
Users can browse the sighting reports posted by others and themselves.
low fidelity version of all report list page
Report List
Users can search the reports by keywords and location. The filter and sort features are also available.
low fidelity version of bird list page
Bird List
Users can browse birds by category on the list page, such as region, endangered level,
low fidelity version of bird detail page
Bird Detail
Users can learn about the bird species. The page includes the link to the sighting report list page, which navigates users to the sighting reports of the species.

Usability Study

We conducted a usability study to evaluate usability of my prototype.

Type
Unmoderated study with Maze
Location
Online
Participants
6 people
Length
10 to 15 minutes

Key Findings

As a result, I got feedbacks including the following.

comparison of bottom bar before and after usability study
Finding1: Site structure

The navigation information should be clearer so the users can know where they are. In the mockup, the menu where users are currently is highlighted with a darker icon, and the bolder font is applied to guide users.

Finding2: Navigtion

The site structure should be simpler. A participant also pointed out that the "submit" menu is confusing because of the word choice. Reflecting on this finding, the “submit” menu was removed, and instead, the call to action button to create a new report was located on the “report” menu.

High-fidelity Prototypes

After usability testing, I created high-fidelity prototypes.

high fidelity wireframe of all report list
Reports(Entry Point)
high fidelity version of creating new report page
Create New Report
high fidelity version of select image page
Select Images
high fidelity version of select species page
Select Species
high fidelity version of posting feedback
Feedback
high fidelity wireframe of sighting report detail
Reports
low fidelity version of bird list page
Bird List
high fidelity version of bird detail page
Bird Detail

Visual Design

The visual design elements aimed to communicate a natural feel. The combination of primary color, dark green and background color passes WCAG AAA.

Karla
primary color of the platform #0B582E
logo of the platform
Color
Typography
Logo

Information Architecture

After designing the mobile app, I worked on a responsive website. To ensure consistency between the mobile app and website, I created the sitemap and sorted out the information structure.

sitemap of the platform

Responsive Design

I designed mobile app, desktop, and tablet screens.

Next Steps

Try other usability study methods
Design features for bird researchers

In the unmoderated study, some feedback comments were too short or required further questions to clarify. Next time, I want to collect more qualitative data through a moderated study. Also, I would like to design features for researchers to analyze the sighting reports submitted by residents.