Natural habitats
A website redesign with a new focus for the Backyard Habitat Certification (BHC) program.
Background
In 2009, the Portland Audubon Society and Columbia Land Trust started this program to transform urban landscapes into natural habitats that support local wildlife. A few other local Audubon offices have tried to set up the same program, including their own website, but none are as successful as the one in Portland.
Problem
Many birds and insects are at risk of extinction and need a network of natural habitats for their survival. How can this program expand, while keeping the limited resources of local Audubon offices in mind?
Solution
My role
End-to-end UX & UI designer.
Timeline & tools
5 weeks (20 hrs per week) in 2021. Built with Figma, Miro, Whimsical and Maze.
To make it easier for regional offices to offer the program, a national, central website offers a solution. The new website would focus on reaching a wider audience from diverse areas to avoid isolated patches of natural habitats.
Process
Based on the Design Thinking approach, these are the phases I went through in the process of re-designing this Backyard Habitat website:
Empathize → Define → Ideate & Design → Test & Improve → 🎉
01. Empathize
Desk research
In terms of competitors, the National Wildlife Federation (NWF) started a similar program in 1973. Their set-up is a bit different because the certification is based on self-reporting (the Portland Audubon program sends out an expert). The main strength of the NWF is that they have one central website from where anyone in the US can find information and sign up.
A scientific study of 50 yards that are certified natural habitats by NWF, found that they can help boost biodiversity and really provide habitat for wildlife. Their biggest recommendation is that certified yards need to be next to, or close to one another so that they can act as a continuous landscape of habitats.
Current website
This project provides an opportunity to address some of the main problems of the current website. I performed a usability test where I asked a participant to perform a set of tasks on the current website while talking out loud about what they were seeing, doing and expecting. This gave me some more insights in the existing usability issues:
Interviews
I did six 1-on-1 interviews with people aged 35 - 60 that have all gone through the process of getting their yard certified in Portland. To find out how to expand the program and get more natural habitats, I wondered how people find out about the program and what made them decide to sign up. I also asked about their experience with the website and the certification process to see what can be improved.
I recruited three people on Nextdoor and three on the Facebook group of the program.
Findings
Surprisingly, no one had any issues with the current website or the process of getting their yard certified. All people had found out about the program by seeing the signs in other people’s yards and/or talking to people already in the program.
This made me realize that there is already so much trust built up in the program in the ‘real world’ that it doesn’t matter to them that the website isn’t perfect. Also, there aren’t any direct competitors in the area and knowing that it’s from a local non-profit might set different standards for a website.
The one thing all interviewees agreed upon was that they would like to see more storytelling and more images to get inspired, especially ‘before’ and ‘after’ pictures.
So now what?
Besides some issues I found during the usability test, I found almost no pain points or unmet needs from the interviews. There were however some comments made by two interviewees that made me reconsider my focus:
The challenge
Instead of focusing on the needs of the current members, I focused on people that are currently underrepresented in the program and might have barriers to joining. This did mean I had to make more assumptions about the needs of this group because they are currently not represented in my research.
I took a closer look at where in Portland most of the certified yards are and they are mainly concentrated in wealthier, less diverse areas with large homes and big yards. The main challenge I set for myself when designing this website was to reach a more diverse group of people for the program, including:
People of color
People with lower incomes
People without any gardening experience
People with smaller yards, patios or balconies
People from neighborhoods with less certified yards
This would also have the desired effect of creating a better spaced out, denser network of natural habitats in an urban area.
02. Define
User personas
On the right you see Florence Waters representing the current members of the Backyard Habitat Certification program that I interviewed. The focus would be more on the Johnson family on the left, as they represent the people that are not yet represented in the program and might have barriers to join.
Site map
At this point in the process I started thinking about what features would solve some of the pains I identified earlier on. One of the ‘aha moments’ was that someone wished to be paired up with other members close by so that they can share plant cuttings (less expensive) and knowledge (great for gardening newbies).
I immediately thought of the Nextdoor ‘Help Map’ where you can offer help to people in your neighborhood and incorporated it in this site map.
User flow
This is the main flow that I would be designing for and it is based on the following scenario for the Johnson family persona:
The Johnson family just bought their first home in Gresham with a small yard that is currently just grass. They learned about the BHC program when they visited the local home improvement store and are curious if this is something for them. They're worried it might be too hard or too expensive. The low maintenance and pesticide free character of a native yard appeals to them.
Business goals
This program is run by a non-profit and relies partly on volunteers. It would be great if the new website could limit the burden on the organization so that more time is left for their core activities.
I mainly saw room for improvement in the enrollment form where certain processes could be automated (scheduling & qualifying). Having one national, central website would make it so much easier to adapt to changing needs.
03. Design
Wireframes
I like to make my wireframes very detailed so that it’s easy to apply the UI design later on. Looking at the homepage, the main difference with the current website is that there is more content focused on people that are not familiar with the concept of natural habitats yet. It also prominently features the perks and support available to new members to hopefully convince them that this is within reach for them.
Logo & UI kit
I rebranded the logo and the rest of the UI to make it look fresh, fun, accessible and not overly serious. I wanted the website to also appeal to younger people that are just getting started with gardening. For inspiration I used the How Many Plants website (among others) and to create the color palette I used the website Coolers.co.
I changed the word ‘backyard’ into ‘natural’ to communicate that any outdoor space can be a wildlife habitat, not just backyards.
UI design applied
This is a selection of high fidelity UI design frames that I used to build my prototype. Based on the findings from the usability test I did at the beginning, I made sure to make the website less text heavy and to add more visuals. This makes it easier for first time visitors to easily and quickly process the information.
This is all new content for the homepage, focused on people new to the program and to the concept of natural habitats. The ‘before’ and ‘after’ images should give people an impression of what is possible and that natural habitats come in all shapes and sizes.
Homepage
How it works
This page underwent a huge makeover, going from a lot of text to a quick and fun step-by-step overview of the certification process.
Perks & support
This page also has new content and added features that don’t currently exist. It’s meant to show that this is do-able for everyone because of all the perks and support available.
04. Test & Improve
Usability testing
To test my prototype I set up my first Maze remote usability test and 21 people participated. Next to that, I performed three moderated usability tests through Zoom.
I found out that unmoderated, remote user tests are complicated! I first sent it out to DesignLab students and they understand what was expected and are probably familiar with how Maze works. To get more participants I also sent it out to my personal network and that’s when I started getting very different results. The amount of ‘misclicks’ went up a lot and some didn’t finish the test. After contacting some of them I found out they liked clicking around in the prototype to see what’s all there (instead of performing the task at hand) and some got lost in the test and/or accidentally exited.
Results
I’m happy that I also added two open question to my Maze test about what their impression was of the homepage and of the enrollment process. The main issues identified from both tests are that it was hard to find more details about the enrollment fee (one of the Maze tasks) and that the site visit scheduling feature is not clear for everyone.
In the feedback grid below you see more of the test results and everything in the ‘changes’ section is what I prioritized at this point and improved.
IBM feedback grid
Improvements
I made eight changes to the prototype based on the test findings.The change with the biggest impact was the revision of the site visit scheduling feature. Below you’ll see the improvements I made:
Prototype
This is the final prototype of the Natural Habitat Certification program website that includes the priority revisions I made.
Next steps
I have a feeling that the scheduling feature still needs some work. Maybe adding three options is just too confusing and booking the site visit right away is a better solution (making sure the visits are grouped in the same area per day). I’m very excited about the Help Map feature which I think can really help make the program more affordable. It also adds a social aspect of meeting new people in the neighborhood and potentially gardening together.
Reflection
This project shows that websites that I think need a lot of improvement can work just fine for others! But it is interesting to think that there must have been people on this website for who it didn’t work and they didn’t enroll in the program. I’m very happy with the end result and have gotten some great positive feedback from DesignLab students and mentors!