Nextdoor logo

Redesigning Nextdoor: Case Study

A design challenge: How might users see only the content they’re interested in?

Note: the views in this article are entirely my own. They are not created by, affiliated with, or supported by Nextdoor.

Overview

Prompt: Redesign a feature from a social networking platform.

I redesigned Nextdoor’s mobile navigation experience and proposed a series of visual tweaks to the interface to address frustrating user experiences.

Duration: 1 week

Tools: Figma, InVision

Approach

  1. Research (3 days): collecting insights from Nextdoor users
  2. Problem definition (1 day): synthesizing and defining a problem space
  3. Ideation (1 day): considering potential solutions
  4. Sketching (1 day): creating screens at a higher fidelity
  5. Writeup (1 day): wrapping up process and putting this article together

Main problem: People only want to see the posts that they’re interested in.

Suggested approach: allow users to tailor their navigation bar, refine visual presentation of ads and posts

1. Research

When approaching a redesign, I first look for people problems — ways that I can add tangible value. These problems, as part of an human-centered approach, are communicated in human language and are not resolved with just another flashy Dribbble visual.

The first steps in my process were: background research on Nextdoor, competitive landscape analysis, and finally, collection & synthesis of reviews from real people using Nextdoor.

Background

What is Nextdoor? Nextdoor is a social networking platform that brings neighbors to meet and converse online.

What users are we focusing on? For the purposes of the case study, our focus is on residents — by far the most common form of user on Nextdoor, making up ~74% of users.

Product tone. “Put neighbors and their interactions at the center.” “Warm welcome.” “Strong relationships, built on trust.” These words are straight from Nextdoor’s site and they clarify how Nextdoor seeks to position itself to attract users.

Competitive landscape

Here are three alternatives to Nextdoor to consider, from the perspective of someone who is interested in establishing relations with their neighbors:

Facebook: social media platform to build community.

  • Pros: ubiquity, you’re likely to find who or what you’re looking for
  • Cons: low level of anonymity, little focus on neighborhood community building, rude comments that detract from the community feel

Blockchalk (discontinued): an anonymous note leaving platform with geotagging (here, within 1/2/few blocks, etc.).

  • Pros: offered full anonymity to people posting notes
  • Cons: lacked focus on community building, no developer support, small community of users

Yelp: social networking platform that connects people to local businesses via reviews.

  • Pros: dedicated focus on leaving helpful reviews by locals and tourists alike
  • Cons: Lack of focus on community building like Facebook and Blockchalk, no safety or lost & found features, only reviews and recommendations

User feedback

Next, I completed trial runs of the Nextdoor app with friends and family and compiled the common problems we faced. Also, I conducted secondary research from Apple App Store user reviews of the Nextdoor app. Finally, I defined people problems and design problems.

A stacked bar chart of user reviews for Nextdoor over a period of a few months from App Annie.
A stacked bar chart of user reviews for Nextdoor over a period of a few months from App Annie.
Weekly App Store reviews have been consistently poor | AppAnnie

2. Problem Definition

Here’s a breakdown of what I gathered on Nextdoor, from friends, family, and App Store reviews:

People Problems

People problems are spoken and understood in everyday, human language. They are solution-agnostic — rather, the focus is squarely on identifying sources of friction in user experience and why.

  • Combative posts detracts from experience — “Why are people discussing politics on here? How are hurtful comments reviewed? Can I find the posts I’m actually looking for?”
  • Post moderation is unclear — “Where did my comment go? Why was it flagged or deleted without warning?”
  • Too many irrelevant ads — “Is this ad for a local business? Why am I seeing this?”

Design Problems

Design problems contain designer jargon, but at a higher level, they are simply extensions of people problems.

  • Unclear information hierarchy — confusing choice of tab groups in menu bar, not personalized or relevant
  • Visually cluttered and inconsistent — proximity of posts makes skimming a challenge, header copy is styled differently

Personas

Personas reflect the voices and experiences of the people I interviewed. These personas are especially helpful to ensure I’m designing intentionally and for real people.

Casual Camden | Photo by Adam Nieścioruk on Unsplash

Casual Camden

is a retired scientist who occasionally browses Nextdoor to learn what’s going on around his neighborhood. He rarely posts, and spends most of his time on Nextdoor looking for items for sale or new hobbies.

Camden’s pain points include: scrolling through a cluttered and confrontational feed; the increasingly large number of ads on his newsfeed; distinguishing ads from posts about his neighborhood, including safety and buy/sell; discovering content he’s interested in.

Energetic Eden | Photo by Christina @ wocintechchat.com on Unsplash

Energetic Eden

is a young working professional who frequently posts on their Nextdoor to build strong connections in their community.

Eden’s pain points include: encouraging neighbors to engage in civil discussion; wanting their neighborhood to be presented in the best light, keeping neighbors engaged with the content on the app.

Defining a key pain point

Satisfied with the user research and the subsequent personas, I narrowed my focus to the following key pain point to investigate for this design challenge:

I want to only see the things that I’m interested in.

People like Camden are tired of seeing a) advertisements that are irrelevant and b) divisive posts about politics or other controversial content that often lead to rude language targeting others. Ads and divisive content introduce lots of friction in how Nextdoor users use the app.

People like Eden are exasperated by the increasing number of frustrated neighbors & community members leaving the app because they’re not discovering or viewing content they’re interested in. This appears to be a leading cause of customer attrition and negative reviews for Nextdoor.

3. Ideation

Exploring solutions

At this point, I was eager to get writing. Because the majority of my research participants including myself are mobile-first iOS users, my focus was on iOS.

I brainstormed potential solutions that address the key pain point. Then, from those solutions, I narrowed my focus down to two specific solutions that resolve the pain point.

preliminary ideation sketches
This rapid ideation phase allows me to quickly test and discard ideas. Some sketches for the two ideas I eventually pursued are center and right.

The two solution areas that I moved forward with are:

  1. Offer Nextdoor users the ability to customize their menu bar (navbar)
  2. Redesigned card UI to emphasize distinct elements within the app

Below are my artboards for these two solution areas that I developed.

4. Sketching

Having conceptualized the problem and potential solutions, still with personas in mind, I created higher fidelity wireframes and prototypes.

1. Offer Nextdoor users the ability to customize their menu bar (navbar)

Currently, the Nextdoor iOS app has a navbar fixed to the bottom of the screen with five options: Home, Groups, Businesses, Notifications, and More.

Default (uneditable) navbar | Nextdoor

A problem with fixing these navbar shortcuts is with app engagement and discovery. One person that I interviewed said “I guess I’m only using a small portion of what is offered.” What if users could add shortcuts to the pages they’re really interested in, pages that they might otherwise forget to check if not in the navbar as a visual reminder?

For users like Eden, the navbar defaults might work. That’s fine — this feature isn’t targeted at helping them, but it also doesn’t detract from their experience.

However, many users like Camden have more specific goals and interests in mind when launching the Nextdoor. They quickly skim the buzz of the neighborhood, but more importantly, they’re motivated to see the content they’re interested in quickly — like Safety — without getting lost in other stuff.

To address this, I proposed allowing users to create a personalized and contextual navbar. This empowers people to find content they’re interested in with less trouble.

2. Redesigned card UI to emphasize distinct elements within the app

The current home page newsfeed has neighbor and local business content displayed inline with native ads. A slim, light gray spacer between these card elements acts as a separator.

screenshot of nextdoor home page
Current home page news feed | Nextdoor

Ad and neighbor posts are colored slightly differently — take a look at the difference below.

White and Off-White (clever names mine) are difficult to distinguish

In terms of visual design and layout, the proximity and similarity of native ads to neighborhood content may intensify the cognitive overload people have when scrolling their newsfeed. Moreover, if a person missed the “Sponsored” message located below the bolded business name and if the ad didn’t drive any value for them, this becomes a major pain point.

The lack of distinction between cards and native ads creates difficulty in parsing content on the newsfeed. This drives the frustration that users like Camden experience in discovering content that they find interesting.

To address this, I proposed two solutions:

  1. Make the gray spacer darker and more prominent.
  2. Add a section header on native ads.

Why make the gray spacer darker and more prominent? Successful social media platforms like Facebook and LinkedIn use a darker, more noticeable spacer between posts, which include native ads.

Native ads work well in these settings with more visually prominent spacers — even though the ads appear more clearly as ads, advertisers tend to be more interested in whether they’re reaching their target users, and the long-term user behavior after exposure, not necessarily the number of clicks.

Why add a section header on native ads? Users should be able to quickly scan to determine if a card element is interesting to them or relevant to their neighborhood, and why. Adding a section header contextualizes the ad — it can also be another way recommendations are offered and displayed by neighbors.

Moreover, it addresses the betrayal people feel when they don’t recognize an ad as an ad. This feeling of betrayal drives people like Camden to leave negative reviews, fracturing the community Eden has worked to build.

Neither of these design decisions — the updated spacer or the additional header on native ads — allow users to skip ads, or to hide them without additional effort. People will still scroll their newsfeed, and ultimately, Nextdoor’s advertising revenue stream would remain largely unaffected.

5. Conclusion

The prompt for this case study was to redesign a feature from a social networking platform. I’ve presented my process of how I identified real problems and used research in a human-centered design approach to guide my design decisions.

The problem I set out to solve is: I want to only see the things that I’m interested in, and my approach was to redesign the navbar menu and parts of the visual interface. After defining potential solutions, I sketched on paper and in Figma, concluding with a set of higher fidelity screens.

For next steps, I want to know whether my proposed redesigns are actually helping to solve the problem.

This is what success looks like for this redesign:

  1. Number of app reviews about seeing irrelevant content on newsfeed is decreasing
  2. People use navbar shortcuts more than they did previously
  3. People spend more time in Nextdoor engaging with the content they care about

These measurable goals shape the future for this project — from testing, if the goals aren’t met, we know to think about why or why not. Then, we can go back to the drawing board to develop more solutions.

Related readings

While working on this design challenge, I read articles about online communities, real-life vs virtual communication, and the history of how the Nextdoor app and its users have evolved over the past few years. Here are additional tidbits that didn’t make it into this article.

Face-to-face conversations may be more satisfying and create feelings of closeness with others in ways that virtual communication cannot. [1]

Onboarding patterns can be helpful to orient users, but they may be unnecessarily complex or restrictive for more tech-savvy users. [2]

The FTC has guidelines on native ads but they struggle to actually enforce these best practices. [3]

A personal favorite — Nextdoor’s intentional design decision to introduce friction into their crime-reporting feature, to decrease instances of racial profiling and prejudice. [4]

Thank you for reading! Let me know if you have any questions or comments. I’d be happy to chat more about my process and design decisions.

Kevin

Product Design | Duke University

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store