GoodNeighbor Website Design
Project Overview
The product:
GoodNeighbor is a concept that I created for a website that allows people to offer and request help from members of their community. While scrolling through my own neighborhood groups on various sites, I observed posts from individuals who were seeking out service opportunities and individuals asking for assistance with household tasks or yard work. I also saw frustrations expressed online when these posts were filled with unhelpful comments, or when they were quickly buried by posts about events, items for sale, lost pets, etc. Inspired by these posts by real people in my community, I designed a site that would be dedicated to one function: neighbors helping neighbors.
Project duration:
December 2022 - January 2023, completed as a part of the Google Career Certificate in User Experience Design.
The Problem:
Sites like NextDoor and Facebook, where individuals go to find community and seek out or offer help, are often cluttered with irrelevant posts. Posts that request or offer help go unseen, or attract unhelpful comments.
The Goal:
Design a website that creates a dedicated online space for community members to offer and request help from one another, without the clutter of a social network with too many different functions.
My Role:
User research, designing and conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, accounting for accessibility, and iterating on designs.
Early Wireframing
Early wireframes for the feed page of GoodNeighbor
Early wireframes for the welcome page of GoodNeighbor
Wireframing in Figma
As I moved into wireframing using Figma, I focused first on the mobile version of the website, as many users will access the site via their mobile devices.
The first flow that I focused on was for a user posting a new offer of help to their community.
I also developed wireframes for additional screen sizes, including tablet and laptop screens. Shown above are wireframes for a tablet.
Low-Fidelity Prototype
Using my digital wireframes I created a low-fidelity prototype for the mobile version of the site. The user flow I connected included logging in and then posting a new offer of help with cleaning.
View the GoodNeighbor low-fidelity prototype
Usability Study
Using the low-fidelity prototype, I designed and conducted a usability study focused on the flow of posting a new offer of help. Findings from this study included the following:
Users wanted to be able to sort the feed of posts by date and type.
Users wanted to be able to indicate their availability to help neighbors.
Users wanted more categories and subcategories of help.
Users needed clearer navigation indicators throughout the flow.
These findings informed the development of mockups.
Mockups
As I moved into creating mockups, I used feedback from the first usability study. Changes included better organization options for the feed and more detail in the input fields for creating a new offer.
High-Fidelity Prototype
The high-fidelity prototype includes design changes informed by the usability study.
View the GoodNeighbor High-fidelity prototype
Additional Screen Sizes
Mockups for a tablet screen
Mockups for a laptop screen
Looking Forward
Impact:
The GoodNeighbor site would allow members of a community to connect with one another by giving and receiving help when they most need it.
Learning:
Designing the GoodNeighbor site challenged me to think critically about my own community, and what kinds of tools would help to build that community up with care and support. It also encouraged me to identify ways that beautiful and effective design can support change and growth in a community.
Next Steps:
Conduct another usability study, this time on the flow of responding to an existing offer or request.