West 104th Street Block Association Web Redesign

Background

The goal of the West 104th Street Block Association website redesign was to create a modern website that addresses the current needs and expectations for residents and those considering a move into the Bloomingdale neighborhood. The old site had not been updated since 2007, and even then, had retained the frame-based navigation that limited the usability and findability of the website and it’s contents.

Method

We started with a user research study, dividing the target users into four groups: new resident couples, families with children, senior citizen residents and prospective residents. I focused on the senior citizen population in the neighborhood. Details on the user research process are available in a separate portfolio piece on this site. All images below represent my contributions to this project.

Drawing from the results of these studies, our team developed personas and user scenarios.

User Scenario - West 104th Street Block Association
User Scenario – West 104th Street Block Association
Persona - - West 104th Street Block Association
Persona – – West 104th Street Block Association

My team created an online, unmoderated card sort, using Optimal Sort. Our findings indicated the most important information residents are seeking is community events and services, Block Association member benefits and contact information, newsletters, and general information about the Block. From this we created a top level navigation including About Us, About the Neighborhood, Resources, Newsletters and Membership. These labels were refined in further testing. Block Association board members also wanted to highlight sponsors who donate to the association, so we create different a segment in the footer and included under the About Us section.

Next, I sketched out designs for the home page, calendar and membership pages.

Home Page Sketch - West 104th Street Block Association
Home Page Sketch – West 104th Street Block Association
Events Page Sketch - West 104th Street Block Association
Events Page Sketch – West 104th Street Block Association

I refined the sketches into wireframes using Omnigraffle.

Home Page Wireframes - West 104th Street Block Association
Home Page Wireframes – West 104th Street Block Association
Event Page Wireframes - West 104th Street Block Association
Event Page Wireframes – West 104th Street Block Association
Join Page Wireframes - West 104th Street Block Association
Join Page Wireframes – West 104th Street Block Association

Outcome

The board of the block association voted to implement our design. I built the new site using WordPress theme Modernize, with some customizations. The new design features improved layout and navigation, legible fonts, searchable newsletter archive, updated content, livelier images, and the ability for board members to edit and add content without needing to understand HTML or php.

A description of a user research study for the website redesign and design deliverables are available at http://whysel.com/portfolio/west-104th-street-block-association-redesign/

Old site:

Screen Shot 2014-04-06 at 1.49.48 PM

New site:

Screen Shot 2014-04-06 at 1.49.48 PM

You can view the site in progress at http://www.bloomingdale.org/.