Website Redesign: The Sierra Club
Overview
For my third design project, we were assigned a website in the non-profit sector to redesign. Being non-profits, a lot of the companies our groups were assigned were in desperate need of design improvements. My group’s was no exception: The Sierra Club. The organization is terrific: the oldest environmental group in the United States, addressing everything from political activism and lobby down to grassroots efforts, and even large international excursion trips to local kayaking groups, they truly cover everything related to the outdoors.
Their website, on the other hand, is a hodgepodge of pages and mini-sites that look like they were created at different times and by different people, and then tacked on to the site somewhere. With this in mind, it was a great assignment for a redesign.
The Project
Our project scope was divided into two halves. The first half was a team effort covering all initial research and culminating in a comprehensive, professional research report. The second half was a solo effort in which we each individually created our own mid-fi designs on which we tested and iterated. We had 2 weeks to complete the entire project.
Step 1: Initial Research
For the research phase, we performed several actions to give us both a better understanding of the Sierra Club as a company as well as of the current website functionality:
- A screener survey to find usability testers
2. 5 one-on-one usability tests to gain insight into the current website
3. A business model canvas to analyze the basic Sierra Club business structure.
4. A competitive matrix to identify key competitors.
5. A competitive and comparative feature analysis to identify key website features on both the key competitors’ websites and comparative business websites.
6. A heuristics analysis utilizing the Abby method to identify overall website usability.
7. A mobile audit was done to identify consistencies and inconsistencies across web and mobile use.
8. A sitemap of the current website to identify the current content structure.
9. User and task flows of both the home page and internal pages to identify key user navigation pathways.
10. Both an open and closed card sorting with 5 users each to assess current navigational quality.
After gathering this data, we arrived at a few key insights to inform our design process:
- Our usability tests showed us that when users knew where to look to find an endpoint, a task was relatively short and simply to complete.
- However, finding out where to start if you didn’t already know was extremely problematic.
3. Much of the navigational confusion lay in the singular large hover dropdown containing all the Sierra Club’s programs in an unorganized list. When users had to find something that went through this menu, they had no idea where to look.
4. Our Card Sorting confirmed this theory: Normally, 21 of 30 navigational elements used in our Closed Card Sort fell under the “See All Programs” dropdown, but users put on average 7 of them there. For the Open Card Sorting, all users created more descriptive categories under which they placed most of these programs.
These insights led us to our final problem statement that guided the rest of our work:
“While environmental activists who visit the Sierra Club website find the material plentiful and useful, they have a hard time finding information and ways to get involved if they don’t already know where to look.
How might we clearly present material to make activities and opportunities easily discoverable and learnable for an environmentalist who wants to get involved and take action?”
Step 2: Design Planning
Taking this data, I began my redesign by developing subcategories to organize the general programs list. I also removed redundancies in the dropdown nav bar (the other options there currently link to pages already listed as programs) and added a bar for the 5 featured Sierra Club campaigns, which clearly hold a higher level of importance for the company. By doing this, the 5 featured campaigns wouldn’t be double-listed in the programs list, and the programs themselves would be easier to navigate. I also added a “Take Action” area on the dropdown menu to concentrate the various political actions the club is involved in (a request made by many users).
To test this new navigational structure, I ran another round of Closed Card Sorting, this time with my new headers included. The results were very much in line with what was expected, with the small caveat that users often used “Take Action” and “Get Involved” (a program list category) interchangeably. This is understandable given that card sorters have no context for what a “program” is according to the Sierra Club. In fact, I could conceivably run an independent card sort just using the program names, which would be a great next step. Either way, these results didn’t interfere with my nav structure, and I felt I could move forward.
Step 3: First Round Redesigns — Mid-fi Wireframes
My first round of design changes involved updating the programs list as well as primary navigation elements on the home page. I also redesigned the “Local Events” section by separating the Chapters List into a separate page, and adding a sidebar secondary nav menu to the Environmental Justice page to replace a dropdown menu that was very hard to find. Lastly, I updated the navigation and page design of the Political Endorsements section of the site.
Step 4: Additional Usability Testing
After making these wireframes in Sketch and using them to create a clickable prototype in InVision, I ran another round of usability tests to see if user performance on the previous tests were improved.
As demonstrated above, test times and completion were vastly improved, especially for Task 4 (finding which political candidates the Sierra Club endorses in your district). Task 3, finding info in the Environmental Justice program page was improved though still not very good. From user comments, I learned that this problem was still rooted in knowing where to look (on a side note, it was also hard to describe a task involving Environmental Justice without using the phrase “Environmental Justice”; at least one user directly commented that the task description was a little confusing). One user, however, said that once they found the right spot, the rest of the task was very simple. This bodes well for future iterations.
Step 5: Second Iteration Redesigns to Wireframes
Taking the data from the last round of usability tests and comments from users, I made another round of changes to the wireframes. While many of the changes were cosmetic, one important change was making the (newly-discovered) Voter Guide page much more accessible. Currently, the only way to access the Voter Guide page is from one of it’s children pages, the endorsements list, which is directly linked to from the Politics and Elections program page. I added a link to the Voter Guide under the Take Action dropdown, because this was where at least 2 users were originally looking for the endorsements list. I also added a link directly to the Voter Guide on the Politics and Elections program page.
At the project’s conclusion, I presented my work to my classmates and instructors at General Assembly, including a demonstration of my clickable prototype, which can be found here.
Final Thoughts
This project is nicknamed “The Mountain,” and rightfully so. There was a very large amount of work to do in a short 2-week sprint, and it certainly felt overwhelming at times given the time crunch. But, the work was very fulfilling; the research methods we learned and used were very informative, and getting to redesign an existing page based on gathered research was rather fun. It was a great lesson in working with an existing product.
