Redesigning and organizing an environmental conservation group's content-heavy website to visually communicate their goals, history, and brand.
Project background: In a UX/UI Design Bootcamp, we had a design challenge project
to redesign a nonprofit organization website.
Project type: Group project / team of 4
Timeline: 4 weeks
My role: UX researcher, UX/UI designer, logo designer
Tool used: Miro, Figma, Trello, Zoom
The problem: Pollution Probe’s current website design is dated and cluttered with
content that doesn’t communicate the organization’s mission statement clearly.
The solution: Re-designing the existing content-heavy website to a minimal,
visually communicative one with a clear brand statement.
Pollution Probe is a nonprofit group that seeks to improve Canadian's health through research,
education, promotion, and advocacy of actions to reduce pollution.
As UX/UI designers we worked with our client Sabah Ibrahim to create a digital experience that will
encourage people to become a part of the community and foster support networks to assist the
organization’s initiatives.
Stakeholder interview
We started our research by interviewing the research & communications coordinator of the Pollution Probe organization. The goal of this interview was to understand what areas and sections of the website need to be improved from the agency's point of view.
Main insights:
User research
We also conducted a survey of 40 people and 5 interviews with users who are interested in environmental conservation. The research data was synthesized into an affinity diagram and user persona.
Affinity diagram
User persona
Defining the problems
Problem statement:
“Environmentally concerned individuals who are eager to take action want to find ways to control/reduce pollution and its ill effects. However, they feel challenged to find the right agency as a lot of research goes into distinguishing authentic organizations from fake ones. Given their genuine interest in environmental conservation, they want to make sure that their contribution is actually utilized to make a difference. How might we help concerned individuals like Dianna access information about the initiatives that they can support and help them achieve their goal of promoting environmental conservation among their peers?”
Setting our scope
After defining the problem, we went ahead and conducted “I like, I wish, What if” brainstorming to generate ideas and also analyzed what features we would keep or change on the organization's current website.
Brainstorming
Feature prioritization matrix
Main features decided upon:
Easier and more interactive website for the users
Immediately showcase Who and What the organization is all about
Featuring their existing Donation page and emphasizing it on the homepage
Information architecture
As we finish establishing our ideas, we iterated the current navigational site map by conducting an open card sorting exercise. We removed 4 sections of the current navigation and renamed 2 others: “Sectors” to “Our Work” and “Publications” to “Our Research” to use simpler language.
Process of prototyping
Low-Fidelity prototype
Homepage:
About:
Donation:
First user test and iteration
To determine if the redesigned website worked as intended or not, we conducted our first user test on a low-fidelity prototype and iterated it based on the feedback.
Before
After
The major change we made was to the design of the donation page. In the first version, we had links to different donation options and highlighted causes above a donation form. This made users confused since they simply just wanted to donate using the form instead of seeing other options. From this data, we changed the content order and streamlined the donation process.
Hi-fidelity prototype
Homepage:
About:
Donation:
Second user test and iteration
We performed a second round of user tests on our high-fidelity prototype with the same tasks as the first in order to determine if the design iteration solved the problems we found.
Before
After
We improved our contribution timeline on the about page to have more intuitive interaction for users by adding an indicator for the currently visible year.
Logo designing
During the stakeholder interview, they mentioned that the current logo looks very 70s design and hoped to have a new one, but they like the idea behind the current logo: a wave and a cloud. Therefore, I designed the organization's new logo with a modern and clean look while maintaining the original concept. I also aimed to keep the number of different colors used low, so it can be easily printed.
Final wireframe design
Homepage:
About:
Donation:
Final prototype
Takeaway:
Having interviews with both the organization and users helped us to find the problems in each of their blind spots. To come up with solutions, it was crucial to find the overlapping point between the organization's needs and the users' needs, instead of focusing on one over the other.
Future opportunities:
