-White.svg)
RESEARCH / IDEATION
Understanding the existing manual process
The Christmas Bird Count is currently a manual process that involves participants birdwatching during a 24-hour period. Participants record their observations in a non-standard way and give results to a regional Audubon representative responsible for organizing and summarizing the information from all participants in their region. There is plenty of opportunity to use an app to eliminate much of the manual work for both participants, and Sector Leaders.
The first step is to understand the current process and all of the necessary information that is gathered. By researching the manual process requirements, I identified the following data that must be captured by the app:
- Time spent actively birdwatching
- Distance traveled while actively birdwatching
- Mode of transportation used, with time spent and distance traveled for each mode
- Sightings at a bird feeder must be captured and identified separately
- Time spent “owling” (nocturnal birding) must be recorded separately
- Users must be able to review and edit their entries prior to submitting
Apart from research time devoted to understanding the process, I also spent some time reviewing the Audubon brand identity, to ensure that any UI design created aligned with the current brand. I identified that limited, bright pops of color were typically used, with light typography. They also (unsurprisingly) had an excellent library of imagery of different bird species that could eventually be used in the UI design.
ANALYSIS AND SKETCHING USER FLOW
Defining and refining the user flow with the essential steps
At this stage, I began to analyze the information gathered in the research step, and began the process of mapping out the user flow. This involved a few iterations of typing out the steps that a user would perform in the app, as well as the specific screens needed to perform each step.
What I find very helpful at this stage is just talking through the process with a friend or colleague to poke holes in the process, or to find ways to make things flow a bit more intuitively.
This process led to several important revelations such as the need for some sort of messaging before the event begins, as well as some way to seamlessly change the mode of transportation on the fly, rather than starting an entirely new session.
Typically this stage results in a few different iterations of the user flow that are progressively less clunky and more intuitive. The format of these iterations varies from a notepad document, the back of a napkin, a conversation, or a formal flowchart.
WIREFRAMING
Seeing the low fidelity big picture
The wireframing process was helpful in ironing out some of the finer details of the user flow, as well as giving me a rough prototype that allowed me to click through the app to see how everything felt in one continuous experience.
This helped me identify at least one opportunity for improvement, specifically requiring the user to specify if they were entering a past session or a current session. This felt very unintuitive and confusing, both to me and to colleagues who viewed the prototype.
There was also plenty of redundant, or readily-available data that could be gathered simply by recording the system time and location of the device and allowing the user to edit that information if necessary. This made the “happy path” a lot tess tedious and led to a much better user experience.
DESIGN AND PROTOTYPING
Bringing the product to life
At this point, I began the process of creating a visual identity for the app itself. I used brand typography and colors identified on the website design to create a basic Figma design system. Some stock bird illustrations were used as flourishes to give the app some personality.
An early iteration of the design used pale blue, red and green shades, but it seemed to draw too much attention away from the information, and didn’t match the feel of the Audubon brand.
A later version of the app used a limited color palette focused mainly on the bright blue accent color used on the Audubon site, which seemed to have the right look and feel. Once the design was complete, I created a simple clickable prototype in Figma.
.png)
.png)
