Good 4 the Hood

Good 4 the Hood

A mobile app that strengthens communities by helping neighbors meet, communicate, and build relationships.

 

The Design Process:

 

Formative Research

First, I designed a survey instrument to understand how people think about their neighbors, and to learn more about different interaction styles and needs. Then neighborhood residents were surveyed.

User survey page 1

Ideation

The survey results identified behaviors the app would need to support. I brainstormed activities which could facilitate those behaviors. These activities became app features:

  • Communication between neighbors
  • Helping each other
  • Calendar of events
  • Learning names and faces
  • Family profiles

 

Use cases/ story boards

After identifying the features, I defined primary use cases, and then storyboarded those to frame the context of the app, and to provide test cases against which to validate usability.

Storyboard for 3 use cases

 

Workflows and navigation maps

I designed tasks and work flows, breaking down high-level tasks into lower level ones. Then I explored two different navigation patterns.

Navigation option 1 – Shallow navigation. Each feature has separate screen.
Nav map for design option 1

Navigation option 2 – Deep navigation. All primary features are on a single screen with accordion disclosure. Secondary features are on separate screens.
Nav map for design option 2

 

Sketching and wireframing

Sketched out design ideas, and wireframed both navigation options.


 

Navigation option 1

Separate navigation buttons for all five functions.

Design option 1 wireframe for the Home screen

Home screen

Option 1 home screen starts with branding and navigation buttons.

Wireframe of message screen.

Alerts & Messages

Send and receive messages without having to share or keep track of neighbors’ contact details. Share interpersonal or group communication, including quick announcements, reminders, and alerts.

Wireframe for message composition screen

Compose a message

Touch ‘+’ in ‘To’ field to add recipients. The ‘Who’s Who’ screen opens, where user can select a photo, search, or ‘All’ to share with everyone. Touch camera icon to upload or take photos.

Wireframe of "To do" screen.

Good deeds

Suggests random acts of kindness, like raking leaves or delivering donuts. People can also enter tasks they need assistance with, and neighbors can volunteer to help.

Calendar view

Calendar

Read or post events to the community calendar. Add events by clicking ‘+’ at the top. Touch events for more detail.

Wireframe for "Who's Who" screen

Who’s Who

Learn neighbors’ faces and names with the Who’s Who feature. Touch a photo to see names and other information about a person or family.

G4H_wires-A-6

Profile

Neighbors can optionally share a photo and contact or other information. Click the circle to add or edit the photo.

 


 

Navigation option 2

All primary actions are on a single screen. Secondary actions, like looking up neighbors and updating profiles, are accessed via navigation buttons. The three nav buttons are: Home, Who’s Who, and Profile.

Design option 2 - main screen

Home screen

The Home screen provides all the primary interactions on accordion panels.

Home screen with Alerts & Messages panel expanded

Alerts & Messages

Wireframe for "Good Deeds" expansion panel

Good Deeds

Option 2 - Calendar expansion panel

Calendar

Design option 2 wireframe for Who's Who view

Who’s Who

Design option 2 wireframe for Profile screen.

Profile

Design option 2 wireframe for composing messages and alerts

Compose a Message

 


High-fidelity mock-ups

Designed high-fidelity mocks to flesh out and polish the look and feel of the app, as well as to communicate the visual language for production designers, developers, and stakeholders.

High-fidelity mocks of two screens