Pencil to pixel
screens@2x.png

Nextdoor Redesign

Nextdoor Redesign

screens@2x.png
 
 

In the summer of 2017, Nextdoor rolled out a redesign for mobile web and desktop. We wanted to create an experience that was superior to the old one — something that was human, intuitive, and neighborly. 

I worked with our design team to create and extend design patterns from our newsfeed to neighbor directory. During the design phase, we settled on using React as the underlying architecture. This helped us take a component based design approach - which also helped us ensure consistency and coherence across the experience. These eventually made their way into our design repository that I helped create & maintain.

This touched on every aspect of our product, and since I have the longest tenure on the design team (and product team), I helped to write the product specs.

We A/B tested the redesign for two months. This allowed us to listened to our Leads and members for feedback, and tune the experience before national rollout. The final product led to higher time on site and more story views.

 
 

Our redesigned feed on mobile web.

Our redesigned newsfeed on desktop.

 
 

Atoms to Newsfeed

Our design process started with the newsfeed. The newsfeed is core to our user experience. Working through the rough architecture and visual design, we catalogued the base atomic elements — boxes, dividers, the typographic system — and used those to build up the story types in the feed.

 
 
 
 

Components & Cutpoints

As I moved through the design cycle, I leveraged Sketch's symbol support to build out a library that could mimic our React components. The designs & symbols went through many iterations until launch, but by leveraging them early, it allowed us to quickly build out a design repository at the end of the cycle. 

At this point, we also spent time refining the outpoints for desktop, tablets and mobile. Since we were using a platform detection in React, we could provide refinements for each platform. 

 
 
 Early cutpoints for various device support. We refined these throughout the project.

Early cutpoints for various device support. We refined these throughout the project.

 
 

Iterating and Extending

As the project moved along, we plowed through a large portion of our front-end touching category pages, events, the business experience, search. It was a rare opportunity to work through the entire product to freshen up the visual language.

Feedback from executives, the design team, and our members helped us iterated through the design. Cohort testing helped us make sure the design maintained (or exceeded) our metrics (story views, time on site, page load, number of searches).

There's a lot here, so below is a gallery of mobile and desktop work.