A redesign of Nextdoor's onboarding process // KPCB Fellows.
After exploring most of the products from the companies partnering with KPCB, I couldn't get Nextdoor's on-boarding process out of my head. There are many areas where I see opportunities to significantly strengthen ease of use and task completion rates. What follows are a handful of my observations and mockups to demonstrate them in action.
Throughout this page, I highlight a handful of the applicable UI Heuristics from the Nielsen Norman Group by using parentheses at the end of sentences - the full list can be found here: https://www.nngroup.com/articles/ten-usability-heuristics/
INITIAL LOGIN SCREENS
Starting with the initial login screens, the most obvious change is the removal of the current blurred background image. I've replaced it with a background I made in Pixelmator that uses Nextdoor's green and gives a stronger sense of brand identity. It's cleaner and puts the focus back on the primary content instead of what's going on in the background.
I then updated the buttons by enlarging and moving them (there's plenty of real-estate available and the current size/placement of the buttons is uncommon for a login screen). The "invite code" is now represented through clickable text. However, this change really needs some analytics to back it up - what percentage of users click invite code v. log in v. sign up? If it's a significant amount, then more attention should be placed on the invite code option.
In order to give the user a better idea of where they are in the UIPageViewController (the most likely implementation of the swiping screens), I've added indicator dots. Now users will know 1) where they are, and 2) how many pages there are to swipe through (visibility of system status).
See below for my mockups of the initial login screens v. Nextdoor's current screens.
Creating An Account
Wait, why did the status bar change from white to black? My first step was to swap a black UIStatusBar with a white one to make it easier to see.
Nextdoor appears to be framing their main content in relation to the position of the keyboard (most likely by listening to UINotifications when the keyboard appears/disappears). This works great when the keyboard is active so that you can keep the keyboard from covering up fields, but there's this big space left when the keyboard is not shown. To remove this excessive white space, I moved the content of these pages up to the center of the screen and to the center of the user's attention.
Moving onto the UINavigationBar, it's pretty obvious that the contrast isn't great. The new background introduced in the first couple of screens solves this issue without the need for any further modification. The one great thing about the existing navigation bar is the presence of a back button (allows for user control & freedom).
Picking Your Neighborhood
The first thing I noticed on this screen (or actually didn't notice) was the very small text indicating that my account was created. This really should be more visible - in something like an alert dialogue that briefly animates after the account is created, for example. "Account Created" also doesn't reflect what is happening on this screen - you are looking at your neighborhood on a map. I changed the title text to "Your Neighborhood".
What happens if the neighborhood Nextdoor pulls up is incorrect? I added a verification step to provide an opportunity for the user to indicate if the neighborhood isn't correct. In the current app, the user has no choice but to close the app - the back button has now disappeared and the user would be stuck (error prevention).
Verifying Your Address
The on-boarding continues.
With such a long on-boarding process, it's really important to put a lot of effort in making it as fluid and fast as possible for the user. I wonder what percentage of users never make it through to the end and just close the app?
For these steps, I continued to push the main content up to the center of the screen to get rid of the unnecessary white space and make the buttons more accessible. The most important revision made was to bring the Help function down from the navigation bar and into the user's sphere of focus. It actually took me a while to spot the very poorly placed & sized help button - it's arguably being used in the navigation bar counter to common iOS standards too (consistency & standards).
Completing Your Profile
Two revisions from the previous screens carried over here: the removal of the right navigation bar button and the center positioning of the main content.
There are two messages telling the user to add a profile picture. Not only are they redundant, I see them as unnecessary with the addition of a plus icon on top of the profile picture. This is a common pattern in apps, but the default profile image could also use some UI tweaks to make it clear that you can interact with it.
The spouse/partner information is optional, so I added a label to make that more apparent.
The final on-boarding screens have two tasks 1) informing the user of the importance of receiving notifications and 2) presenting them with the iOS dialog for notifications. If done right, the majority of users will enable notifications for the app (I would argue this is an important goal for Nextdoor).
In the current implementation, the user isn't really provided with an indication of what to expect once they click "OK" on the first screen. I've added an image that gives the users an idea of what the notifications popup will look like. Although I would need to do testing, this method would most likely increase the percentage of users that enable notifications for the app.
Finally, the new design leaves the on-boarding green background up until the user responds to the Notification dialog. In the current app, this transition is done poorly. The app moves right to the main interface before the user gets a chance to respond to the dialog, distracting the user from the choice before them - 'Don't Allow' or 'OK'.
These last screens actually warrant a lot of attention. Notifications are important for engagement and in Nextdoor's case, play an important role in their value proposition of connecting neighbors.