Adopt One Block
Website Redesign
Project Overview
Website redesign for Adopt One Block's (a nonprofit in Portland, Oregon) homepage. Expanding the mission and features to offer more options and using photographs to showcase the impact of the work being done by volunteers.
The Problem
Adopt One Block’s mission centers around surface level environmentalism, while our potential users are focused on environmentalism on a more impactful level.
The Solution
Offer volunteers multiple levels and types of participation. Add photos to the website to showcase the work being done by Adopt One Block.
Background
Adopt One Block is a nonprofit focused on making Portland a cleaner and happier place for its residents. Volunteers sign up to clean and take care of a block of their choice.
This project was completed as a class assignment for the University of Oregon's UX/UI Bootcamp.
My Role
Project Manager, Lead UX Designer
Team
2 UX/UI Designers
Tools
Figma, Google Suite, Zoom, Trello, Slack, InVision
Timeline
4 weeks
​
May - June 2022
Design Process
Discover
Define
Ideate
Prototype
Test
Stakeholder Interview and Project Direction
My partner and I conducted an interview with the founder and director of operations. Overall, they are satisfied with how their website functions and expressed interest in expanding beyond state lines.
Although it would have been a great experience to work on the redesign with Adopt One Block, my partner and I decided to move forward on our own due to the project timeline and that the changes based on the user research involved a dramatic change to the scope of their mission and options, which did not align with our stakeholders' goals. Therefore, we kept the look and feel of the website similar and added features that we thought would help them achieve their desire to eventually scale their organization.
Discover
User Interviews
We conducted five 1:1 interviews in order to gain an understanding of potential users’ awareness and motivations around environmentalism. We found that interviewees have a wide range of environmental interests including climate change and natural land protection and worry about the transparency and effectiveness of nonprofits.
"I would be more likely to contribute to an organization that actually helps improve or protect the environment. There has to be a real benefit to whatever their goal is.
- John
User Survey
We surveyed 13 people from a variety of backgrounds to gain further insight into their attitudes towards environmental organizations.
Survey Questions
Have you donated to an environmental cause?
Are you more likely to contribute money or time?
What motivates you to contribute?
User Persona
We used the insights from our research to create our User Persona, Steve Turner. Steve has always been environmentally conscious as his family spent a lot of time outdoors while he was growing up. Born and raised in Portland, he has learned the importance of wildlife conservation and has seen firsthand the destruction of natural ecosystems around him.
Define & Ideate
Competitor Analysis
Two direct and two indirect competitors were chosen for this analysis. The goal was to explore effective features and solutions that are being used and find ways to implement these into our design.
Can filter and sort by preference
Strong mission and strategic plan
Lots of community events
High level of community engagement
Good content chunking
Provides background information on environmental topics
Photo gallery
Homepage highlights featured initiatives
UI Analysis
Hero graphic lacks personal touch. Add slideshow that showcases work.
Heat Map label is confusing. Rename so it's easier for users to find.
Map is not engaging (only displays dots). Add interactive photo gallery when you click on map.
Lots of text makes it difficult to find information. Break up text into smaller chunks and add photos.
Feature Prioritization
Site Map
Our UI analysis showed that the navigation of Adopt One Block’s current website is clear and easy to use. We kept the same main categories and removed/combined a few subcategories.
Prototype & Test
Mid-Fidelity Usability Tests
We conducted usability testing on our mid-fidelity prototype in order to discover the challenges that users face when trying to locate information on the website.
​
Overall, users were able to complete the tasks, but they did notice some prototyping inconsistencies such as the photo feature on the Block Adoption Map not opening.
Tasks
Feedback
Move logo and search bar above navigation to improve alignment and spacing.
Move mission statement above slideshow so it's visible without scrolling.
Fix photo feature so that it pops up when user clicks on Block Adoption Map.
Add "Submit" button to newsletter section.
Mid-Fidelity Wireframes
My partner and I combined the best parts of our wireframes for our mid-fidelity prototype. After the usability tests, we created a second iteration that focused on removing the prototyping inconsistencies and cleaning up the layout.
High-Fidelity Usability Tests
We conducted a round of tests on our high-fidelity prototype and discovered some accessibility and visibility issues in the Block Adoption Map and How It Works sections.
Other feedback centered around making the content more engaging and meaningful, as well as adjusting the alignment and size of elements so they are consistent.
Tasks
Feedback
Left align header and buttons.
Change colors of arrows in photo section under Block Adoption Map so they're visible, or move outside of photo.
Adjust size of cards so they're the same ratios.
Fix language in Ways to Contribute section to make it more impactful.
Make cards in How It Works section more accessible. Change button corner radius to match cards and text fields.
Final Thoughts
This process was a great learning experience from start to finish. We liked having the opportunity to interview our stakeholders. We expect our design would help stakeholders meet their goal of scalability while still maintaining the original look/feel and mission of their organization. However, if we were actually working with Adopt One Block, it would be important to prioritize their business goals during the redesign as well as consider the technical and functional feasibility of adding each feature.
​
If there were more time, we would want to add redesigned pages to the prototype that both showcase the current work Adopt One Block is doing as well as the work that our users would be motivated to engage in.
Thank you!
