top of page
Barred owl with a grey circle background

BirdWeb

How do Washingtonians discover local birds?


Independent redesign of the Birds Connect Seattle's (previously Seattle Audubon) BirdWeb into a responsive web app, that provides bird enthusiasts a quick and easy way to identify birds of Washington State. Regardless of skill or level of knowledge.  

CLICK ABOVE TO PLAY PROTOTYPE WALKTHROUGH

ASSESSING THE CURRENT BIRDWEB

After user testing, I completed a Heuristic Evaluation of BirdWeb, making notes on areas of concern. The below list would be the focus of improvement during this redesign.

Points of Friction & Pain Points

  • Not responsive to changes in screen size

  • Images and text are too small to read without zooming in

  • Images are pixelated when zoomed in

  • Searching for a bird is not intuitive

  • Users must know the exact bird name to search for

  • Broken link: "Got a Question? Ask a Master Birder" 

  • Outdated design

Scroll to view original screenshots >

Anchor 1

UNDERSTANDING BIRDWATCHERS

Throughout my research of birdwatching and bird identification users, the big question I kept coming back to was:

Why would someone use BirdWeb to identify a bird when they could use the latest technology?  

The answer I discovered was one simple word: Community

The birdwatching community is just that, a community. They feel comfortable reaching out to others on online forums to identify birds, find birding locations, and organize community outings. This is a feature that should be added to BirdWeb and replace the broken "Ask a Master Birder" link. Not only will it promote and increase activity on the site, but increased traffic will lead to more potential donations to the Seattle Audubon Society and memberships purchased.

DESIGNING THE NEW BirdWeb

Ready with an understanding of the user and the current BirdWeb's pain points, I started sketching out screens on paper. I created users flows alongside the Low-Fidelity wireframes. 

With my persona in mind, flows focused on a novice birdwatcher being able to navigate the site with ease. Additions to the site include: filtering birds by color, size and location, being able to search in simple terms, and a smarter search bar. 

Medium Fidelity Wireframes

A NEW VISUAL IDENTITY 

While creating a mood board for BirdWeb, I kept Birds Connect Seattle's website in mind to create a look and feel that would fit within the existing brand family. 

BirdWeb includes all the birds of Washington State, so I wanted to capture the mood of its diverse regions. At the same time, highlighting the coexistence of birds and people in metropolitan areas.

Within the site, the focus should be on the bird, with clean high-resolution photos. 

MoodBoard for the new BirdWeb branding

Style
Guide

FINALIZING THE DESIGN

HIGH FIDELITY WIREFRAMES

Knowing what direction to head in I converted my Mid-Fidelity wireframes to High-Fidelity in Figma. I conducted a preference test on UsabilityHub to determine the bast layout for individual bird profile page. After 18 responses, it was a 50/50 tie. I took the preferred elements of both designs to create the current version. 

 

Since BirdWeb has likely not been updated in close to 15 years, the user interface and improved experience were my focus. I utilized the entire screen real estate to create an experience that was modern and user friendly. 

Below you will find a selection of updated screens compared to the original versions. 

iPhone 12 Mockup (Perspective Stand Righ

Selection of Before & After Screens