Web Development

Watershed Watch Salmon Society

Watershed Watch Salmon Society website

Project Detail

Watershed Watch Salmon Society is a science-based charity working to defend and rebuild B.C.s wild salmon. They were looking to update their website that had last been updated in 2010, to current web technologies as well as being responsive for mobile traffic.

This project was a duration of 4 months (May to August) and the approach I used for the project was the waterfall method.

The project was broken down to the following phases:
- Requirements and Research Phase
- UI/UX testing and Design Phase
- Development Phase
- Testing Phase
- Implementation Phase

Languages used:

Wordpress | CSS | PHP | HTML

Role:

Web Developer and Technical Assistant

Employer:

Watershed Watch Salmon Society

Requirements and Research

Before

Together with the Watershed Watch team, we went over the old structure of the website, going over what things were going to transfer over to the new website. Taking the old site map, we modified what was being kept, and updated a new site map for the new website.

The old website was a custom coded WordPress theme that really limited the team to what they could update on their own. The custom coded theme was using an old version of WordPress, which the theme had coded in to add features that weren't available with WordPress at the time it designed and coded, a lot which were now redundant with new WordPress features. It also wasn't responsive, which created a high bounce rate on the website from mobile users leaving the page.

The thumbnails and screenshots of the old website on the right, are focusing on just 6 pages that I go over. These pages were the pages that needed to be better UI/UX as they were the most visited landing pages (Optimized landing page, combining the about page with staff and board, individual campaign page, Media release page and the most important page the donation page).

watershedwatch first draft sitemap

Information Archiecture

First objective/step was to come up with a better and improved sitemap and navigation that makes more sense for user interface and help guide user behavior.

After a new sitemap was made, I went into the information architecture of the website by defining the Audience, User Persona's, and Competitive analysis. Conducting a user experience survey with the subscribed newsletter users on WWSS helped shape the user persona's and get a sense of where users were seeing a disconnect, leaving the website.

*Please note the site map in the image shown is the first draft of the sitemap towards Watershed Watch Salmon Society's new website. The final version of the sitemap developed beyond the picture shown.

SEO

This again goes more in depth with SEO for the new site, but Meta descriptions are essential because when Users search for something on google meta descriptions display a that snippet of your website. The optimal character length for these descriptions is 155 characters. Longer descriptions lead to an ellipsis at the end and this has proven to lead to higher bounce rates some users may have felt misled by the meta description.

Instead creating a unique meta description for each page is more engaging and transparent to new users to the new website. For example, the meta description for Staff & Board was too long because it is using part of Aarons bio and part of another's staff members bio. The page lacked a unique meta description, instead google used what was on the page for a meta description. You would want the meta description for this page to be more unique and reflect on the staff and organization as a whole.

watershed watch salmon society old seo
UI/UX testing and Design Phase

Low fidelity Wireframes

After making sketches for the different pages which gave me a better idea of how the new layout would look, I took the wireframes into Adobe XD and worked on the low fidelity wireframes. Based on the feedback with the staff, I created a homepage wireframe that incorporated their requirements as well as making sure the landing page was optimized for the best user experience. This continued on the other pages with the exception of creating 2 different versions for the campaign pages. The donation page wireframes were created with some key notes on how to optimize your donation page; learned from the 2019 Capacity conference hosted by Keela.

Mock-ups

The low fidelity wireframes gave a blueprint for how the website would look like in terms of structure. But wireframes for people who haven’t seen them before is hard to visualize. This is where the mock-ups come in. The mock-ups incorporate the wireframe structure with the visual design of the website.

This gave the organization a better idea on how the website could look like and allowed them to give their feedback better than a low fidelity wireframe would.

a overlook of wwss Usability Hub test

User Testing

Along with the staff and email subscriber list we tested the new designs through some user testing through Usability Hub. The three tests that we used for the usability test were a 5 second test, 2 A/B tests (one for the different versions of the campaign landing page, and one for the different format of the donation page) and last a navigation test.

Each test had its own follow up questions:

5 second test: Take a short look at this home page, what would you say this page and website about.

1st A/B test: Which layout do you prefer and is easier to navigate? (Please click on the image you prefer)

2nd A/B test: Looking at the 2 donation page images, which layout looks more appealing to you as a potential donor?

Navigation Test: How would you navigate to the Connected Waters campaign page from each of these three pages? Click where seems logical to you (You can only click at one point per image, you won't be able to go back and change your choice).

Development Phase

The first step of the development page was to take the imported database from old website, go over what was discussed in requirements and research phase what to get rid of in terms of the sitemap, navigation, local navigation etc. After the database restructuring, I began working on the website, changing the CSS, and structure as needed. After that step, I Created the new pages, redesigned old pages working with the mockups that were created as a blueprint. This included recoding and rearranging custom post types and taxonomies.

the development phase of the WWSS website
Testing Phase
the testing phase of the WWSS website

Once the website was developed and designed according to the mockup's, it was time to do user testing in a live environment. I set up a test domain for the organization and its staff to test the website along with some user survey questions.

After the staff and organization review, we did an in-person User Testing / usability lab at Watershed Watch Salmon Societys office space which is a co-working space. We were able to get other companies to come in during a social lunch and do a usability lab testing. The incentive we used for the user testing was pizza for social lunch hour for that day.

This test included a User Survey with tasks, along with a 5 second test and a click test. After the tasks and test, they were asked a series of post test questions. This greatly helped improve the website as there were some companies that had not heard about Watershed Watch Salmon Society and this was a good way to see how a new user would navigate through the new website. After taking the two user tests and feedback it was back to making the changes needed for before the final approval of the website.

Final result

Final website

The implementation phase included transferring over the offline website onto the watershedwatch.ca domain. This included redirecting the old address watershed-watch.org, and the perspective campaign pages. With the new website going live, we also took the new look/design across all social media channels (Facebook, Instagram, Twitter and YouTube).


@jotydosanjh