the product

As part of the HCDE 537 course at the University of Washington, which is a user-centered web design, our team worked with Seattle Audubon to redesign its main website. Seattle Audubon Society is one of the largest independent, volunteer-driven Audubon chapters in the US since its founding in 1916. Its mission is urban conservation and education for, through, and about birds - centering on equity, diversity, and inclusion.‍

the problem

After conducting secondary research such as heuristic evaluation, accessibility audit, usability testing on the current website, and comparative analysis, the team found areas for improvements:
a. Complex navigation
b. Low readability
c. Unclear brand story
d. Usability issues with the website

key metrics

user research Summary

#1. Heuristic Evaluation

The team identified major usability issues of the current website by conducting a heuristic evaluation.

Issue #1: “Who We Are” information isn’t clear

Issue #2: Language is confusing

Issue #3: Navigation is complicated and inconsistent

Issue #4: Text-heavy information

#2. Web Accessibility Audit

The team conducted a web accessibility audit to see if the web content meets accessibility guidelines.

Issue #1: Insufficient color contrast

The contrast between foreground and background colors does not meet the Web Accessibility Guideline.

Issue #2: Links not clearly identifiable

Color alone is not enough to distinguish a link from the surrounding text.

Issue #3: Buttons & links don’t have text alternatives/accessible text

Screen readers can’t properly read the links.

#3. Survey

A total of 212 people responded to a survey between April 11th and April 17th, 2022.

• Most of the survey respondents, 137 respondents (70.6%), used the main website to find more information about Seattle Audubon.

• The main reasons for being involved in Seattle Audubon programs are
1. To learn more about birds (75.3%, 146 respondents)
2. To protect birds and/or habitats (72.2%, 140 respondents)
3. To be part of a like-minded community (38.7%, 80 respondents)

• The survey respondents found the following features the most helpful.
1. Event Calendar (62.2%, 120 respondents)
2. Sign up for events/activities (49.2%, 95 respondents)
3. Join/renew membership (34.7%, 67 respondents)

User persona

Based on the insights and findings, we created personas. One of our project goals is to attract a more diverse group of people, including the younger generation, so the ages were set to reflect that direction.

information Architecture

One of the major issues we identified was navigation. The team worked on the information architecture and came up with a new global navigation bar to help users navigate the website.

We conducted a card sorting study to evaluate the information architecture of the current website. In card sorting, participants organize the cards with the website's items into groups in a way that makes the most sense to them. A total of 22 people participated in our card sorting study.

user flow

To make team members and stakeholders see the big picture and understand the paths users take while navigating the website, we created a flowchart.

Paper Wireframes

Using the findings from the research, we each developed a paper prototype of the site's major pages that support users' most important tasks.

Low-fidelity Prototype

After receiving feedback from each other, the team developed an improved digital prototype of the site.

Usability Testing

Ovierview:

Findings:

#1. Navigation of the website is improved

5 out of 5 participants said finding where the Nature Shop is located was easy.

#2. Calendar view was missing from the event page

5 out of 5 participants expected to see a calendar view on the events page.

#3. Confusing user flow for membership & donation pages

5 out of 5 participants found the membership sign-up & donation flow confusing.

#4. Text-heavy information on the membership & donation page

4 out of 5 participants found the information on the membership & donation page was wordy.

#1. homepage

Key changes:
• The proposed homepage tells the story of the organization.
• The photo of people is added to emphasize the community aspect of the organization.
• Their mission in diversity and inclusion is featured on the website.
• The Donation section and the newsletter sign-up are easy to locate.

After the redesign

Before the redesign

#2. event page

Key changes:
• A calendar view is added so the users can see all the events at a glance.
• Information is broken down into sections, so it is easy to scan.

After the redesign

Before the redesign

#3. Membership page

Key changes:
• The membership sign-up workflow is now separated from the donation to avoid confusion.
• A clear call-to-action button for signing up for a membership.
• Testimonials from members are added to highlight the membership benefits.

After the redesign

Before the redesign

#4. Shop page

The task was easy, but the participants did not find the shop page particularly useful. The team redesigned the page to encourage the experience of going to the physical store by:
• adding more photos of the store
• highlighting the survey results: visiting the store is the second most popular activity they enjoyed (24.1%)
• promoting the services they offer

After the redesign

Before the redesign

Visual Design

The team proposed a new color scheme for accessibility reasons because the current colors fail to meet the WCAG guidelines. However, we used a similar color theme, such as green and blue, to keep consistent with their brand identity.

High-Fidelity Prototype

After making iterations based on the usability testing, we arrived at our final design solution!

Click here to interact with the prototype!

reflection

1. We should consider the implementation process when designing, but we did not know exactly what the implementation constraints would be.
‍
2. Another round of usability testing to ensure that we didn't cause any problems by introducing new design solutions.
‍
3. Since we had two distinct user groups, the novice and experienced users, it would've been great if we recruited at least 3-4 participants per group, but we were unable to due to time constraints.