Neighbors is an app that fuels offline interactions between neighbors and supports a genuine sense of community in a world where meaningful neighborly interactions are declining.
Methods: Wireframing, user research, workflow design
Role: Solo project for a Usability Studies course in which I was tasked to ideate, define, and design a social app. The assignment required that I create a lo-fi wireframe for each screen that was an essential attribute to the app. I was also required to create a high-fidelity wireframe for one of those screens.
Tools: Figma, Marvel, Google Forms
People these days tend to interact less with their neighbors than they did in the past, according to the General Social Survey. Economist Joe Cortright’s City Observatory report notes that only about 20% of Americans regularly interact with their neighbors, while a third of those polled said that they’ve never interacted with their neighbors. These numbers starkly decline from just four decades ago, when a third of Americans spent time with their neighbors at least twice a week, and only a quarter reported no neighborly interaction at all.
Because technology is now such an integral part of our relationships, I designed a conceptual app called Neighbors that people can use to build genuine offline connections with their neighbors. Neighbors is a reflection on past times when people felt comfortable asking their next-door neighbor for a cup of sugar—so much so that I made it the app’s primary gamification metric! Read on to learn more about my approach.
To clarify my design strategy, I needed to answer the following key questions:
What qualities make a good neighborhood?
Who are this app’s users?
What are the user goals?
Because of the tight time constraints of this project, I decided to invite my coworkers and previous usability testing contacts to complete an anonymous survey to provide information to guide my design. I chose these pools of people because it was the quickest, most accessible way for me to gain information from a relatively large and somewhat diverse (age, economic standing, race, location) group.
In the survey, I elicited responses to the following questions and prompts:
How long have you lived in your neighborhood?
How do you feel about living in your neighborhood? Why?
What connects you to your neighborhood?
What would you change about your neighborhood?
Do you interact with your neighbors? In what way? How often?
Do other neighbors seem to know each other and interact with each other? How so?
Would you describe your neighborhood as close-knit? If so, why? If not, what would make your neighborhood more close-knit?
Envision a smartphone app centered around your own neighborhood. What comes to mind?
Think about your neighbors. Who would use the app?
If you could do anything in the app, what would you do?
What is the one thing you’d like to accomplish the most out of using the app?
From the survey responses of 104 respondents in 14 states, I gathered information to answer my key design questions:
What qualities make a good neighborhood?
“I love my neighborhood. Like, I’m madly in love with it. I can bike to work and downtown to catch a show. I just don’t know who else lives around me. They seem like cool people, I just don’t know how to walk up to them and just say hi without it being awkward.”
–Respondent from Charlottesville, VA
Who are this app’s users?
What are the user goals?
Get on a first-name basis with others in the neighborhood (Say hi!)
Gain knowledge (activities, tips, and history)
Learn about local events
Be comfortable enough to ask for help from other community members if needed
Generally know where others in the neighborhood live
Based on this discovery work, I created a persona to help me remain user-focused as I created the app designs.
Design an app that encourages users to meet their neighbors in person.
Create a product that encourages time-sensitive (requests for help, news about events, event invitations, selling or giving something away) and evergreen (neighborhood history, FAQs, walking directions, local glossary).
Provide users incentives, something to show, for their app usage (Users earn cups of sugar for their participation; the more cups of sugar, the more trusted/respected users are in the neighborhood).
In this workflow, I identified the essential components of the app, as well as those that greatly encourage meeting in person. Because the goal of this app is to encourage offline interactions, I decided to create focus my wireframing mostly around the functionalities that facilitate in-person connections.
When new and signed-out users first open the app, they see a screen with the Neighbors logo and two buttons: “Return to Neighborhood” for returning users and “Join a Neighborhood” for new users. The former is intentionally listed first, as it is the button that users will tap more often since they need only click “Join a Neighborhood” once.
The concept of “neighborhood” is different for everyone, so first-time users are prompted to self-define the boundaries of their neighborhoods to personalize their experience. This way, the content is curated to the user’s concept of “neighborhood.”
In the slide menu, the user has quick access to the primary functionalities of the app: Newsfeed (view neighborhood updates), Events* (view local event listings), Good Deeds (request or perform good deeds), Market* (sell or purchase items), Inbox (view or send direct and group messages), Map (view map of neighborhood, including the locations of neighbors who have listed their addresses).
*These functionalities greatly encourage meeting in person.
Users (a.k.a. “neighbors”) set up profiles by providing information that is helpful for other neighbors to gain a basic understanding of them, including
Photo—Not required, but new users who do not add a photo will be prompted twice within the first two weeks of sign-up to add a profile picture. When users upload a photo, they help encourage a more genuine sense of community within the app and offline by helping their neighbors put names to faces.
Name—First name is required, but last name can remain private.
Address—Home address can remain private.
Length of residency—When seeking advice or new connections, it can be helpful for neighbors to know how long a neighbor has lived in the neighborhood. For example, a new user might want to connect with other new neighbors, or they might ask a more seasoned neighbor for the best restaurant in the area.
Total neighbors—Viewing the number of connections a neighbor has made on the app helps users see who is more active on the app and who is more connected to the community.
Total cups of sugar—Users earn “cups of sugar” for performing good deeds for others. By viewing neighbors’ cups of sugar, users gain a sense of the neighbors who are (1) more active on the app and (2) more willing to perform good deeds for others.
Recent activity—Users can learn about their neighbors’ involvement in the community by viewing their recent app activity. This gives users visibility into the neighbors’ interests, which can prompt users to make targeted connections with like-minded people.
The Newsfeed is the primary interface users will interact with, as it is a one-stop shop for keeping up with their neighbors’ activities.
For example, a user can view a recent update where a neighbor has listed an item for sale. Within the newsfeed, the user can view the key information related to the sale: the seller, item photo, and price. Users can reply to the seller or purchase the product directly from the newsfeed. For additional information about a listing, the user can click the image or the body copy to view more details.
From the news feed, the user can select the Post button to create content that encourages online and offline interactions.
When users visit the Market screen, they see a chronological listing of items their neighbors have listed for sale. For additional information about a listing, the user can click the image or the body copy to view more details.
When users seek help from neighbors by creating a good deed request, the listing is shown to their neighbors in chronological order on the Good Deeds screen. All posts include the essential information users need to know to gain in order to make a decision of whether to accept a neighbor’s request for help, including: (1) description of request, (2) the requester’s photo, linked to their profile, (3) monetary reward, (4) requestor’s total cups of sugar.
Cups of sugar indicate how many good deeds users have performed for other neighbors. This can be an indicator of how likely the requestor is to return the favor, which can influence a user’s decision to help out.
When users view the Events screen, they view a chronological list of their neighbors’ events. Each listing provides the basic information users need to determine whether they want to reply to the event host, RSVP, or click on the brief description to learn more.
When users click on a brief event description, they expand the event details to reveal more information, including the full description and the attendees. This additional information can help users make the final decision to RSVP. Users may also reply to the event posting to connect with the event host.
When a user replies to an event posting, they compose their message in a simple message screen. Note that the event title, venue/address, date, and time remain visible to the user to help remind them of essential event details as they compose their message.
From the Newsfeed, users can create a post that is visible only to their neighbors. Neighbors can reply to posts with text and emojis.
In posts, users can share about local events, deals, services, and more. They can also add a location or photo to posts, which further entices their neighbors to engage with responses.
Because it is likely to be the screen that users most frequently engage with, I chose to create a high-fidelity mockup of the Newsfeed.
The Newsfeed design follows the overall layout of its low-fidelity wireframe, but comes to life with realistic text, friendly and accessible buttons, and visually distinct color cues to actionable items, such as the red Notifications alert button.
Next Steps and Reflection
If the scope of the task allowed me to go further, I would use these wireframes to build out a realistic prototype and conduct usability testing so that I could iterate on my initial designs. I would make sure to recruit a diverse pool of testing participants, especially when it comes to age and living situation. I would want for this app to be just as useful for grandparents living in small town single-family homes as well as it would be for 20-somethings living in an apartment complex in a big city.
Instead of allowing city planners from outside dictate how our neighborhoods should be, we should create our own and the sense of community that accompanies that participation. As individuals, we perceive the borders of our neighborhoods uniquely. Neighbors provides each user with the ability to define her own neighborhood and to meet other people who view themselves as part of that neighborhood. It also gives users the tools to get to know others in their communities through exclusive local sharing that feels more personal than Facebook and more secure than Craigslist. It is easy in modern times to disconnect, but I believe that through genuine connection, listening, trust, and support, we can create neighborhoods that truly feel like home.
This project encouraged me to exercise my ideation skills and think outside the box. It would have been easier to conceptualize another version of a popular social media app like Instagram or Tumblr, but it felt more rewarding to come up with something new, something that would be a little more impactful. Centering my work around how it might benefit the greater good motivates me, and is an underlying theme in all of my work. Working on Neighbors helped me think of one way to do this, and I look forward to opportunities to help the world be a better place in my future work!