BirdWeb
The project team redesigned BirdWeb's mobile website. BirdWeb explores Washington State’s birds and birding sites and also connects visitors to the Seattle Audubon’s main website and other environmental conservation projects.
Client
Duration
Tools
My role
Team members
Responsibilities
Project Overview
the product
As part of the student-run summer program called Design for Passion at the University of Washington, our team worked with Seattle Audubon to redesign one of their major websites, BirdWeb. The website explores Washington State’s birds and birding sites and also connects visitors to the Seattle Audubon’s main website and other environmental conservation projects.
the problem
The Seattle Audubon Society wanted to redesign the website because the design looked outdated and the website was underutilized. Past research from the previous project team indicated that the BirdWeb website is not very accessible on a mobile device because it is not responsive to any screen size. It has been problematic for many users looking for information about birds in the field and trying to identify a bird. Considering the context of a user interacting with the website, the project team decided to focus on its mobile interface.
Design question
our design process
To understand the organization, the website, and users, the project looked at the past survey results that were available from the previous project team. The team also conducted secondary research such as comparative analysis, heuristic evaluation, and accessibility audit to identify possible usability issues on the current website. Then we moved on to the sketch phase based on the findings from the research, built an interactive prototype to test out our design concept, conducted usability testing with 5 participants, and finally refined our design based on the feedback from users.
Understanding the user
User Persona
To keep the user at the center of the design process, we created a user persona based on the findings from the past survey.
user flow
A flowchart was created to ensure everyone in the team and stakeholders understand how users will navigate the website and the paths they will take to accomplish their tasks.
Link to FlowchartStarting the design
Paper Wireframes
We spent a week sketching different versions of BirdWeb's pages. We uploaded them to a shared Miro board and then voted for our favorite designs.
Mid-fidelity Prototype
The team created a mid-fidelity prototype to test our design concept with real users. Here are some of the features we added to the prototype.
#1. Bird Checklist
#2. Clear CTA button & #3. Bird Playlist
#4. Compare Species & #5. Recently Viewed Birds
Usability Testing: Overview
The team conducted usability testing with 5 participants who were interested in birding, but no experience was required.
Usability Study: What worked well
What worked well and opportunities for areas of improvement.
Refining the design
Issue #1. Small Text Size
Texts were still too small to read on a device.
Before the redesign
After the redesign
Issue #2. Information Overload
Dense information caused user fatigue.
Before the redesign
After the redesign
Issue #3. Jargon Words
Terminology confused new users.
Before the redesign
After the redesign
Issue #4. Map didn't look clickable
The interactivity with maps was hidden.
Before the redesign
After the redesign
design system
To maintain consistency across designs, we followed the same visual design elements as the previous Seattle Audubon Society project. This creates a clear brand standard so that users can recognize that BirdWeb is a part of SAS.
Going Forward
Reflection
What I learned from the project...
