MY NEIGHBORHOOD
MOBILE APP CONCEPT
(6 hour design exercise)
THE PROJECT
Good Apps Make Good Neighbors
​
Strong communities are built one relationship at a time, and research has shown that personal well-being is improved when people build connections in their immediate local area. But these connections can be difficult to form for a variety of reasons: rental occupants may change regularly, individual lives have different schedules, and the population may reflect a variety of cultures, ages, and family sizes.
Design a digital experience that a person can use to build relationships with their neighbors.
STEP 1 / EMPATHIZE & DEFINE
Some research to make sure we know who we're designing for.
I reached out to family and friends and asked them 4 questions to learn about their relationships with neighbors and friends:
1. Do you socialize often with your neighbors? (If yes, how often?)
2. Would you like to socialize / hang out with your neighbors more often? (Why/why not?)
3. What do you like to do with your current friends?
4. What would you like to do with your neighbors? How would you like to interact or socialize with them?
 |  |  |
|---|---|---|
 |  |  |
6 people responded; 5 by text, 1 by phone call, which yielded a page of notes.
Time to create user personas based on our user research :D
Let's choose "Joel"; a homeowner in his 30's, married, father of 2 young children - as I believe this is the most likely persona to engage with the "My Neighborhood" mobile app.
STEP 2 / IDEATE
Uncork the creativity and let the ideas flow!
This is a time-limited exercise so let's get right to it and start putting ideas to paper!
(This would normally be done on post-it notes and a whiteboard)
Page 1 of free thoughts:
What should Joel (Our primary persona) see when he logs into the app for the first time? How might this app fit into his life and become a daily part of his routine? What will the onboarding process look like?
Page 2 of free thoughts:
What info is required to create an account? How will people trust that there are no fake profiles in the neighborhood? Verification? Security? Privacy? What are Joel's concerns about all the data "Neighborhood App" collects and how it might be used? How would undocumented neighbors feel using the app?
Page 3 of free thoughts:
What inspiration might we look to?
Has anyone already solved these problems?
Anything we can learn from competitors?
(Note: I intentionally stayed away from looking at other social neighborhood apps during this exercise to not pollute the creative process - but competition research would normally be part of my design process.)
STEP 3 / USER FLOW & KEY SCREENS
Time to design the user interaction flow of the app & key screen layout
USER FLOW STEPS (DRAFT 1.0):
-
Download the app
-
Sign in/Sign Up (Forgot password? / Recovery or Reset flow)​​
-
See your neighborhood map
-
See your house pinned on the map​​ (Home address will be captured on first time sign up)
-
First engagement CTA - Do something purposeful that makes Joel feel good/empowered by My Neighborhood app.​​​
-
Award?/Celebration for first time login?: "Congratulations you are a member of Havenscourt! (the neighborhood where Joel lives) Give digital gift/award/gamify/welcome basket/challenge coin?
-
Onboarding personal interest quiz?
-
Age?, Gender/Sex, Name, Profile picture upload, Spouse/Children/Pets, Interests by category?
-
-
​​​See nearby neighbors (on both sides of my street)(RADIUS 1), Next block (RADIUS 2), Outer blocks (RADIUS 3)
-
I can invite them as friends?
-
Initial engagement/auto-discovery: You have 6 nearly neighbors! Show pins on map
-
Click map pins to see neighbors houses/profiles?
-
Explore map organically like google maps, search for house addresses, names of My Neighborhood users, see list view of all neighbors?
-
-
See live feed of neighborhood events
-
Get-togethers/Meetups, Plant a tree, community gardening day, Fundraiser, Girlscout/Boyscout cookie fundraiser, Little free library donations​, Vegetable harvest - Free squash and tomatoes!, Children's storytime at Auntie Millie's house.
-
User flow map helps us identify key screens to design and technical processes that will have to be implemented to bring our ideal user experience to life.
STEP 4 / HIGH FIDELITY DESIGNS
High fidelity mockup: Loading screens, sign in page and Homepage for existing user
Screen 1
​
Loading screen with a progress bar and neighborhood video playing in background
Screen 2
​
Loading is complete (loading bar is at 100%)
An animated segway to the Sign In/Sign Up page triggers.
Screen 3
​
My neighborhood logo animates from white (in previous loading screen) to full color, as page loads.
​
Joel can Sign In, Sign Up, or retrieve a forgotten password.
Screen 4
​
My Neighborhood App home screen presents an interactive map centered on Joel's family home.
His block is highlighted in a green rectangle denoting the immediate neighbors that he is most likely to interact with organically.
Colored bullseyes radiate out from his home at the epicenter, showing events ON his block, NEAR his block, and in the OUTER blocks.
​
Color-coded events (based on the nearest event date and closest proximity to Joel's home) are shown in a live feed at the bottom of the app, and their locations are "flagged" on the map. A easy, passive way to see whats going on in Joel's neighborhood and make new connections to community members, at his discretion & convenience.
​
Joel can create an event, search for people or addresses or events (Search icon top right corner), and view his profile information (click profile image top left).
Joel and his family now have a digital experience that they can use to build relationships with their neighbors.