BIRDING ORG. WEBSITE REDESIGN
A website redesign for the Minnesota Ornithologists Union
CHALLENGE
METHODOLOGY
SOLUTION
The MOU is a state-wide non-profit that exists to promote a broad program of conservation, education, and natural history study in the field of ornithology, also known as the study of birds. Our challenge is to update the website so that it is accessible and inviting to new users, while also maintaining the functionality that its current users know and enjoy.
Our team evaluated the current website using a conducting a heuristic analysis and usability testing with new and expert users. We also ran a comparator audit to look for well-designed features from similar organizations, conducted tree tests to evaluate navigation labels, and reorganizing the information architecture to simplify key user flows. We also designed a touchpoint map to consider the many ways people access and interact with the organization.
We developed a 20-screen interactive prototype for the website redesign with considered improvements to navigation and accessibility for all users. For new users, we designed an ‘About Us’ page to welcome potential members and partners. We also added a new flow for joining the MOU, and on the homepage, we added direct links to key functions to provide shortcuts for expert users. For expert users, we also considered primary user flows and updated the submit & view sightings portals. We added a dashboard so members could more easily access and edit their membership info. Our team also added an events page and simplified the photo gallery layout while adding options to search photos. This prototype was evaluated by new and expert users before being included in a findings & recommendations report for our client.
Team Project | Role: UX Researcher & Designer
Deliverables: Interactive Prototype, Presentation, and Findings & Recommendations Report Including Annotated Wireframes, Style Guide, and Research Artifacts.
METHODS
1 Comparator Audit
2 Stakeholder Interview
3 Heuristic Analysis
4 Affinity Diagramming
5 Touchpoint Map
6 Remote Usability Testing
7 Tree Test
8 Site Map
9 Interactive Prototype
10 Annotated Wireframes
TOOLS
• Figma Project Planning, Data Synthesis, Collaborative Prototyping, Design, + Presentation
• Zoom for Remote Communication
• Otter Transcription Software
• Google Workplace Script-writing, data synthesis
• Optimal Workshop: Card Sort + Journey Map
ATTRIBUTIONS
• Website & Brand Assets: MOU
• Typeface: Helvetica, ITC Garamound
• Heuristic Template: Nigel
• Usability Testing Outline: Steve Krug
• Icons: IconScout, Material Design
• Mock-ups: Mockuuups Studio
• Teammates: Chris Taylor, CJ Jensen, Sam Tupy, Tanner Fritsinger
PROTOTYPE
Updated MOU Design: Landing Page
Current MOU homepage design.
ABOUT THE PROJECT
The MOU is a state-wide non-profit that exists to promote a broad program of conservation, education, and natural history study in the field of ornithology, also known as the study of birds. Our challenge is to update the website so that it is accessible and inviting to new users, while also maintaining the functionality that its current users know and enjoy.
CHALLENGE
Our team evaluated the current website using a conducting a heuristic analysis and usability testing with new and expert users. We also ran a comparator audit to look for well-designed features from similar organizations, conducted tree tests to evaluate navigation labels, and reorganizing the information architecture to simplify key user flows. We also designed a touchpoint map to consider the many ways people access and interact with the organization.
WEBSITE GOALS
The website is the MOU’s “primary vehicle to gather data, distribute findings and publications, and generally serve its members and support its mission.
Update the website to be more accessible and inviting to new users, while also maintaining the functionality that its current users know and enjoy.
Update the overall design for the navigation and key process flows.
AUDIENCE
• New Users: The general public and potential MOU partners or members.
• Expert Users: MOU Members and site visitors who use functions like submitting and viewing sightings and galleries, conducting research, and the MOU database on a frequent basis.
AHA MOMENT
We had heard from the MOU that they had dedicated members, but because of the age of the site, analytics are unavailable. We learned during user testings just HOW dedicated users were.
Our experienced users told us they had been using the site daily for over a decade! We also learned that even these incredibly experienced users were unfamiliar with where to find key information on the site. During testing, we encountered expert users finding information and site pages that they had been previously unaware of. We also learned, from our small sample, that these users all had their own favorite ways of using the website.
“There is a boat-load of bird data, but access to it needs to be simplified.”
— MOU Member
(quote from a usability testing session of current MOU site)
PROCESS PHOTOS
Research Overview
Site Map
Affinity Diagramming Interviews
Comparator Audit
Heuristic Summary
Contrast-checking for accessibility
Tree Test Example
Tree Test Example
Tree Test Results
Prototype Design Process
Landing Page Lo-fi Wireframe
Touchpoint map designed by teammate Chris Taylor
affinity diagram of my notes from usability testing
Screenshot for group data synthesis
RESEARCH
Stakeholder Interview: Our MOU UX team kicked the project off by creating a scope document and meeting with stakeholders to review goals and opportunities.
Site Analysis — Heuristic Analysis & Comparator Audit: We evaluated the current website for usability compliance and studied the website features of similar birding organizations.
Benchmark Usability Testing: Our team conducted remote, moderated usability tests with 7 participants to evaluate the current MOU website and identify user likes/dislikes, pain points, task completion, and overall usability rating.
Tree Testing: We conducted a tree test exercise with 9 participants. The MOU proposed renaming a key interactive tab of the website “Minnesota’s Birds.” We used a tree test to evaluate this navigation. The tree test found that users, especially new users, struggled to find the correct path. The team decided to simplify this navigation to “L to better describe the actions within that tab.
Touchpoint Map: We created a touchpoint map to better understand the MOU’s connections to partners, members, the public, and their physical and digital touchpoints.
Architectural Diagram — Site Map: I outlined the site architecture to create a map of high-level website pages and identify key screens for prototyping.
Style Guide: I worked with a fellow team member to develop a robust digital style guide and live components for wireframing in compliance with accessibility and responsive website standards.
Collaborative Prototyping: Our team used Figma to create an interactive prototype of 20+ high-fidelity screens.
Prototype Usability Testing: We tested the high-fidelity wireframes with 4 participants in remote moderated usability tests and used these findings to identify potential wireframe adjustments.
Annotated Wireframes: Our team created a findings package that included our research artifacts, interactive prototype, and annotated wireframes for the 20 pages we developed.
KEY FINDINGS
Usability Testing
• New Users are overwhelmed by the website and unsure of how to access and use key functions and don’t trust that the site has up-to-date data.
• The MOU has a dedicated user base that uses the site every day. Each of these users had key functions they were dedicated to, and each had functions of the website that were unfamiliar with.
• New and expert users alike struggled to complete the given scenarios.
• Current Site: Average Site Usability Rating: 2.1 (1 as lowest, 5 as highest)
• Redesign Prototype: Average Site Usability Rating: 4.5
Initial Research
• Heuristic Findings: the current MOU site lacks consistency and scannability, does not provide privacy or control for site users, and has major navigation and accessibility issues
• Comparator Audit: There are excellent examples of well-done and desirable features from other birding clubs around the United States.
• Site Map: We hypothesize that the navigation could be simplified but want to test the navigation and better understand the key user task flow.
• Tree Test: We asked usability participants to take a 2 question “tree test” to test the navigation labeling for key task flows. The correct navigation was found 5 attempts out of 20.
“This [redesign prototype]
is much more appealing.
Night and day, really..”
— MOU Member
FINDINGS & RECOMMENDATIONS REPORT
Report Includes:
Interactive Website Prototype & Annotated Wireframes
For Key Pages & Screen Flows:
• Membership Info & Sign-Up
• Account Dashboard
• “About Us” Page
• Submit & View Sightings
• Events
• Photo Galleries
Research Artifacts
Assets Include:
• Site Analysis: Heuristic Analysis & Comparator Audit
• Tree Test Results
• Touchpoint Map
• Architectural Diagram: Site Map
• Usability Testing Findings
• Digital Style Guide
Client Presentation
The final prototype and our research were presented to a general audience as well as stakeholders. Click on the video on the right to join or view it here.
“This is.. exactly what I was hoping for. What you presented was absolutely beautiful.”
CONCLUSION
The website is now more inviting to new users while maintaining the features beloved by its current daily users. The updated site layout has been redesigned to be responsive to mobile and align with the technical capability of the MOU.
NEXT STEPS
Our stakeholders are both incredibly talented developers who are ready to take our findings and present potential redesign solutions to the rest of the MOU before proceeding to the website redesign process.
We look forward to seeing the project develop and take flight!
Prototype Mock-Up for Web & Mobile