Christmas Bird Count

Experience, Capture, Share
Data record made easy for Birders.

10 min read
Mobile App
User Research
UX Design

Problem Statement

Create an engaging iOS app to assist bird counters to do the following:

1

collect bird counting information

2

view counting progress

3

share visual summary of bird counting activities.

Skills

User Research
Information Architecture
Prototyping
Visual Design

Duration

3 months

Type

Project

Tools

Sketch 3
Invision
Balsamiq

hand

How might I

...enhance bird counting with zero knowledge & experience doing so?

CHALLENGES & SOLUTIONS

Provide Ease of Mind

Minimal Data Input, Perceivable Results

Birders want to enjoy the bird counting with their families and friends. However, there are more than 20 data points need to be entered throughout a birding session.
I tackled this challenge by minimizing the number of clicks and the time required to input data. E.g. Shortening the total distance moved by thumb (“digression distance”) for searching bird species on the screen.
This strategy was appraised by the stakeholders.

ui-component
ui-component

Maximize Flexibility of Use

Handle Complexity behind Simplicity

Bird count data was categorized into multiple attributes by multiple status.
The simple goal to capture the right data at the right time brought about complex issues, including prioritizing accessible information and features.
I combined the bottom navigation bar with fab buttons on the top to make all features accessible within 2 taps.

Behind the scene

... was the unique human-centered design approach invented by Fergie.

1.0 Envision & Scope

I believe good communication to set a clear goal is the first step to any project success.

1.1 Requirement Analysis

Stakeholder Interview

Stakeholder interview helps align goals, and give opportunities to challenge status quo and further define problems.

1.2 Context Exploration

Project Research

Project research to familiarize with the context
Examine the subject matter to be an insider.

1.3 UCD Plan

Design Proposal

Set ROI framework
Create project proposal and product roadmap

2.0 Immerse

Research as a tool to be infinitely close to my users, feel their happiness and pain.

2.1 Define

Desktop Research

With the help of Audubon Christmas Bird Count website, the compiler’s resources, and bird count guideline , I put myself in birders' shoes and discovered their use scenarios and pain points

2.2 Hypothesize

Formalize Scenarios

I defined the main user group, and hypothesized the primary and secondary task flows.
Information need to be displayed and necessary data in the final visual summary report were identified.

2.3 Validate

Competitor Analysis

To validate hypotheses externally, I studied features from two birding-related apps to gain deeper understanding about the birding and birders.

Define the Challenge

How might I support bird counting activity by collecting necessary data and presenting the right information at the right time?

3.0 Conceptualize

Zooming out and zooming in, I sketched out the information architecture and the basic layout for testing.

3.1 Sketching

A quick way to test information architecture and brainstorm layouts.

The first couple drafts revealed major problems. One of my early bird count flows was that users tap on one bird specie and then on female or male button to count it (3rd screen on the right).
However, this prevents users from seeing the detail information about this specie.
This revealed another problem: thumbnails could be too small for users to see the details.

ui-component
ui-component

3.2 wire-framing

Continue to challenge existing ideas

After couple brainstorming sessions, I migrated my ideas to a wire-framing tool. I keep asking questions.

How might I ...
1. instruct users to use swipe gesture to see different information?
2. create a seamless transition between three observation modes without them interfering with each other?
3. inform users that one tap is for stop and long press is for end session?
4. prevent the confusion that ending one session in a mode is equivalent of ending all sessions?

TL;DR: the hidden struggles

It's the longest journey to turn an idea into a solution.

4.0 Realize

After making sure the app was functional, I moved on and built a design system.

4.1 Color Scheme

To create a brand consistent to the original Audubon branding and to add a sense of Christmas to the style, I utilized Green, Red and Gold as major colors and selected another two colors based on the five-color scheme system.

audubon-colorscheme

Color Scheme

4.2 Typography

It's important that the font style was not too casual or childish in order to be consistent with the original brand.
I started out broad and narrowed the styles down to 6 before concluding with Futura.

audubon-typography

Typography

4.3 App Logo

I created the logo based on a posture showing a real bird flying off. The goal is to keep the vividness and the energy.
The dotted circle around the bird symbolizes the Christmas wealth, showing that the app is designed for Christmas birding.

audubon-typography

App Logo

Design rests, innovation never ends

More Design Artifacts

It's the longest journey to turn an idea into a solution.

Design Spec Example

After three iterations, I came up with the following UI style.

Design-spec

Screen Showcase

After three iterations, I came up with the following UI style.

showcase

Thank you for reading!

Interested in learning more? Check out my other works: