Close-up of a pink flamingo with a prominent curved beak, in water, with the 'Audubon' logo overlayed in white.

National Audubon Society

Partners
DataArt (Development)

My role
UX & Visual Design

Launched in early 2024, Phase 1 of the new Audubon.org serves a diverse birder community and pulls a historic organization into the present day. A subtle brand evolution was the foundation of a complex design system, built to balance moments of big personality with nuanced, almost encyclopedic catalogues of birds and native plants.

Once a sprawling collection of disparate pages and articles, a new sitemap and navigation condensed and centralized information for a smoother, more user-centric experience. The new site also dramatically increased engagement, by offering contextual sign up, donate, and action CTAs throughout the site; meeting users where they were and offering them actions that felt right in the moment.

A black bird, possibly a crow or raven, perched on a weathered tree branch against a plain, neutral background, with the image of a smartphone displaying text about the National Audubon Society's conservation efforts.

Our design system took inspiration from the subject of Audubon’s work: birds. From rich textures and an organic shape language to layering and a colorful palette - we brought elements of the bird world into the digital world.

Collection of 16 different North American bird species, including cardinals, owls, jays, hawks, doves, crows, thrushes, and a heron, each in natural settings.

The biggest undertaking was the bird guide: an encyclopedic database of North American birds. For the gallery, we moved from illustrations to a wall of rich photography, with a robust filtering and search system (even a fun “shuffle” and “random” selector).

Detail pages were re-organized and augmented with not only more information, but additional calls to action and connections to other parts of the site - deepening connections with their audience on their most-visited pages.

A large flock of sandhill cranes flying over a flat landscape with snow-capped mountains in the background.

Small bird cards allowed us to build connections to the bird guide throughout the site, increasing browsing time and telling a stronger story about Audubon’s work for birds.

A webpage focused on water conservation shows a large image of a bird standing on water with floating plants, with text overlay about protecting water resources.

Audubon’s work is far-reaching and complex, so we created tiered landing page designs to house everything from large scale topics like “Water” to on-the-ground work like “Public Lands.”

A lineup of five mobile phone screens displaying different bird-related content, including information about coastal resilience, a flowering shrub, a great blue heron, a yellow bird on a branch, and an Arctic tern.

A tiered navigation system leaves plenty of space for multiple categories of work in buckets targeted at their birder audience. This system also allows for growth and change over time, as the organization evolves.

A new “local” sidebar offers visitors quick access to custom content near them, including their closest centers and sanctuaries to visit, as well as chapters to join. Audubon is still working on bringing their multiple chapter websites into the new design system.

Screenshots of a plant identification and information app showing various flowers and plants, including a detailed page of the Farewell-Summer plant, also known as Symphyotrichum lateriflorum, with its scientific description, attributes, and related birds.

We improved upon Audubon’s robust library of native plants by adding filters, photography, and connections to bird pages and local, personalized content. We added a “save” functionality for folks planning their gardens.

We infused surprise and delight moments throughout the site, but one of my favorites has to be the footer peek-a-boo with the crane from the Audubon logo.

Visit Audubon.org

NEXT PROJECT