Non-profit website
Sierra Club of Utah website
The Utah Chapter of the Sierra Club is a grassroots organization striving to:
- Protect and enjoy Utah's outdoors and natural landscapes;
- Educate and advocate for the responsible preservation of clean air, water, and habitats;
- Support the development of clean energy to benefit present and future generations; and
- Advance principles of equity, inclusion, and justice throughout our organization and community.
Executive Summary
I am working with the volunteer-based communications committee to deliver feedback on their mobile site. User testing found that the mobile version of the site does not meet the needs of the Sierra Club to effectively communicate current issues, show people how to volunteer, lead people to donate to help the cause. Our redesign effort was meant to bring these key elements forward and make them obvious and easy to use for mobile.
Laura Dahl, PhD, Primary researcher and designer
The client wanted feedback on the site
The client asked for some user feedback on the site before they made updates to it. Updates were planned for the website, and feedback was needed to understand how to update it.
Platform
A volunteer-run website
Work Done
Responsive website using CSS breakpoints, not Bootstrap components
Timeframe
We were allowed a two-week sprint during 2021 before delivering research findings and new designs to the client.
Overview
Initial usability testing was done with people looking to become activists with a local cause. Feedback from these interviews informed our thinking and contributed to the designs we created. Further testing with users and stakeholders informed final design decisions.
Exploratory Usability Research
Usability Testing
We did usability testing on the existing website with seven people, including three women and four men. All participants have animals in their home and have adopted at least one from the Humane Society of Utah.
Usability testing protocol – participants were given the following task scenario:
- Imagine that you would like to learn more about the local Sierra Club and how you can participate.
- Find a page that describes the current issues prioritized by the organization
- Sign up for volunteer work
- Submit a donation to your favorite cause
Usability Findings
- Consistent feedback from testing discovered an unclear call to action on many of the pages when using the site on a mobile device.
- For example, finding current issues on the phone version was often difficult, and participants had to take a circuitous route to find an issue of interest.
- On a mobile device, finding a way to volunteer to help or donate was difficult because the links and forms are at the bottom of the page on a phone version.
Problem Statement: The primary lifeblood of a non-profit is effectively three-fold: Communicating current issues, how people can volunteer, and how to donate to help the cause. However, the Utah chapter of the Sierra Club's website buries and minimizes these primary calls to action, especially on mobile. Their website needs to bring these key elements forward and make them obvious for mobile.
Definition and Ideation
- We read through our notes and categorized the findings on Miro. A one-page research report was written for the client.
- This report was a springboard of ideas during a discussion with the client. We discussed the research findings and decided on necessary updates that include reordering content and the addition of Bootstrap components that give responsive website functionalities.
- We then did a competitive evaluation of other Sierra Club and similar non-profit websites. We compared the hierarchy of information and calls to action with the feedback received from participants.
- Ideas from the discussion with the client, feedback from participants, and the competitive analysis helped start the sketching process.
- Using whiteboards and paper sketching, we worked on a user workflow and designs for new pages on the app.
Low-Fidelity Prototype
We created low-fidelity wireframes in Figma.
Low fidelity wireframes adjusted the following screens to meet the needs of initial usability participants:
- Issues and campaigns more evident on the home page and other high-level pages
- Calls to action for volunteering and donating higher on the page
Updated home page - Select the latest campaigns
Climate campaign page
Get involved with the Sierra Club
Volunteer form
Low-Fidelity User Testing & Outcomes
We did full 30-minute usability tests with the same participants from the initial usability testing interviews.
Participants usability tested with the low-fidelity wireframes. Usability tasks include the following:
- Imagine that you would like to learn more about the local Sierra Club and how you can participate.
- Find a page that describes the current issues of climate change
- Sign up to volunteer with the climate change group
- Submit a donation to the local chapter of the Sierra Club
Findings:
- Generally, the user flow to current issues, such as climate change, made sense.
- Links and other calls to action for volunteering and donating were not completely obvious, and participants had difficulty finding them.
- A discussion with the client helped us understand that any updated designs needed colors and logos from the official style guide. We created the following style guide.
High-Fidelity Prototype
After receiving feedback from the usability tests on low-fidelity screens, we created high-fidelity mockups adjusted according to a greater understanding of users' needs.
These updated screens include Bootstrap list components with links and arrows to more clearly call out links and other calls to action.
New home screen with better access to campaigns and issues.
Climate campaign page
Get involved page
Updated donation starting screen
Final Design - Home screen before and after
This project's scope involved updating the mobile version of their website for improved communication of current issues, volunteering to help, and donating to the Sierra Club.
The prototype used design components from Bootstrap 5 because we recommend that the Sierra Club, Utah Chapter use Bootstrap to make their site more effectively responsive.
Home Screen on the mobile website Before and After research and design work.
Old home screen
New home screen