Nextdoor

User Research / UI / Usability Testing / Mobile Application
September 2020

An ethnographic study and redesign on how Nextdoor (and other social media apps) can responsibly serve diverse communities.

Project Role
UX/UI Designer, 4 person team
Platforms
iOS Mobile Application
Deliverables
High Fidelity Figma Prototype
Timeline
2 weeks sprint

Project
Overview

Nextdoor is a private, hyperlocal social network launched in 2011 that aims to build communities of neighbors within their local neighborhood. Harboring 10 million active users, the company aims to facilitate conversations between neighbors in order to form strong and safe communities within surrounding neighborhoods, believing that “by bringing neighbors together, we can cultivate a kinder world where everyone has a neighborhood they can rely on.” As a concept project for General Assembly’s UX Design Immersive course, our team of 4 was assigned 2 weeks to design a new product or feature(s) for a Nextdoor in order to meet a business goal for either an iOS or Android app, depending on our client and what best meets the needs of our target audience.

Problem Statement

How might we design new features to filter out unwanted content for Nextdoor users while also improving the communication between users and lead moderators?

How might we optimize the usability of the mobile application specifically for neighborhood leads to better enforce community guidelines?

The Solution

From research to implementation, we designed a brand new mobile user experience for the Nextdoor Moderators while simultaneously adding in new features to better manage the content exposed to regular users of Nextdoor on iOS mobile.

Aligning Goals

What did this research set out to do?

  1. Explore and assess business needs for our client, NextDoor.
  2. Identify areas of opportunity, uncover pain points, and lay the foundation through hard user data

Our 4-person design team began our process by exploring and assessing business needs for our client, Nextdoor. The purpose of this project was to discover new areas of opportunity that addresses real world issues within the mobile Nextdoor user experience by creating innovative, functional design improvements to the user interface. We familiarize ourselves with the product by creating our own Nextdoor accounts within our neighborhoods in 4 major cities to monitor activities within our private communities:

  • San Jose, California
  • Seattle, Washington
  • Chicago, Illinois
  • Atlanta, Georgia

Based on our research, users have cited issues regarding stereotyping, racism, and political agendas, and we began to notice that there was a lot of potential for spreading misinformation on the application, even in our own communities. Our team began by conducting secondary research on Nextdoor with similar social media applications using heuristic evaluation, competitive & comparative analysis, and feature inventory to get a grasp of the project. I developed questions for interviews for our team to conduct primary research based on user interviews, surveys, and contextual inquiries to identify business and user goals & needs.

Discover

Heuristic Evaluation

We ran a heuristic system analysis as a team, filling a chart built around Jakob Nielsen’s 10 usability metrics.

Key Takeaways:

This website presents virtually no interface or navigation issues. But, we know there are still business needs. We decided to use another tool in the toolkit: the competitive analysis and adjacent feature inventory

Competitive Analysis & Feature Inventory

Key Takeaways:

  1. "Theme Park” Metaphor
  2. Law & Order / Public Safety: content is being generated by users themselves as well as an official law enforcement presence
  3. Comprehensive Online Marketplace
  4. Fully Fleshed Social Media Elements

Proto-Persona

Initial user data came from basic questions asked on Nextdoor.Though these were purely exploratory inquires with no attention to demographic, it got us out of the headspace of the UX Designer “vacuum brain” and into the “user brain”. Once we had a proto-persona, we had more context to work with. We began to dig a little deeper with our newly found lense.

  1. Design History
  2. Mission Statement
  3. Moderation Constraints & Requirements
  4. Terms of Use
  5. Content Management Strategies in relation to Moderation

Key Takeaways:

This allowed us to avoid doing something that's already been
tried/done, hone in on the company's goals, further framed our
interview questions, and uncover readily available info on pain points

User Interview Results

  • 9 participants (8 users, 1 lead moderator) ranging from 23-65 years old
  • Enjoys how Nextdoor builds community
  • Sees content that isn’t relevant to them
  • Sees content that makes them uncomfortable
  • Expresses that their neighborhood should be smaller

Survey Results

  • 15 responses, various ages 18-65+
  • Staying connected to neighbors
  • Information on the neighborhood and surrounding areas
  • Use it for free and for sale marketplace
  • Use it for crime, homelessness, events, and public safety announcements

I synthesized the research data into an affinity map with my team to define core users and identify groups with large amounts of insight to identify the problems they are facing. The data revealed that the main issues within the app were related to confrontation, culture clash, and ideological differences, juxtaposed with a genuine desire for community. A big issue for many users is feeling uncomfortable with content relating to stereotyping and racism, and seeing content that are not relevant to them appear on their feed. After I identified this, I created our primary persona to help us prioritize user goals and needs.

Develop

Design Studio

Our team brainstormed together to finalize a decision that required designing two different user experiences for primary user and secondary user. The main goal for our primary user is to be able to filter and manage their own content effectively within a chosen vicinity of their own neighborhood. Our secondary user needs their own mobile experience since Nextdoor doesn’t offer a lead interface on the iOS application; it is only on Nextdoor’s website accessible via a web browser. The user needs to be able to quickly and efficiently address new flagged posts from users in a convenient manner, while also being able to democratically vote on whether posts should be removed or not according to Nextdoor’s community guidelines.

Paper Wireframes

After synthesizing research results, our team quickly generated various hand sketches through a design studio cycle to come up with a high quantity of ideas within a fixed amount of time. I worked with my teammates on narrowing down the results of this exercise to identify actionable approaches to our initial problem, and began to take the most logical approaches.

Primary User Experience (Wireframe)

  • Ability to filter and manage their own content within a chosen vicinity of their own neighborhood via filtering option in the top header navigation
  • Moved the “post content” button to the lower right quadrant of the screen as a floating button.
  • Added options such as content screening within the filter page.
  • Added a new messaging system to directly message a neighborhood lead

Moderator User Experience (Wireframe)

  • Translate the desktop browser experience into an iOS native application for the lead interface
  • “Reported Content” feature was added for lead moderators to manage
  • New lead tools were added in the “more” navigation tab, giving our secondary user the ability to vote on flagged content.
  • Added a secondary messaging system for leads to parallel the primary user’s new system.

Usability Testing

Primary User Experience
  • Users were confused by grey wireframes - we added brand colors
  • Users were confused by navigation icons - we added text below icons
  • Users didn’t know about “Who are my leads” feature - we added a signifier
Moderator User Experience
  • Users didn’t recognize “More” navigation page - redesigned the page
  • Users didn’t know when they received a message - added notification icons
  • Redesigned “Reported Content” button to be larger for easier identification
  • Moved the inbox selection closer to the top of the screen by messages
Iterated Prototype after Usability Testing

Deliver

Visual Branding

Taking inspiration from current Nextdoor media assets, I established a functional design system from scratch that accurately follows the current style guide. I took inspiration from their color, typography, components, and iconography in order to accurately design our mock-ups in accordance to accurately match their visual branding.

Redesigning the Primary User Experience on iOS

I used Nextdoor brand colors to make sure that both our primary and secondary users are familiar with the interface. By adhering to brand guidelines, I was able to keep the design as visually similar to the primary user version as possible for a cohesive mobile experience for our secondary user.

Crafting a new Moderator User Experience for iOS

I made a new design for the Moderator experience, since Nextdoor did not have an iOS or Android version of the Moderator dashboard out at this time. Because it was only on web, my team and I saw an opportunity to tackle something that Nextdoor themselves haven't been able to release yet (as of September 2020). This was necessary since having a Moderator be stuck to a desktop or laptop device is not a feasible solution in responsibly serving communities.

Concluding Notes

  • Design a user-friendly onboarding experience for new leads in order to familiarize them for the role
  • Provide leads with supplemental training tools to educate them on community guidelines
  • Build out the rest of the secondary user interface for the mobile application.