Indiana Neighborhood Website Design

Project Management
User Research
UX/UI
Interaction Design
Usability Testing
Connecting neighbors through information.

The North Kessler Manor Neighborhood Association (NKMNA) is a volunteer neighborhood organization of elected residents who foster a sense of unity and wellbeing in the neighborhood by organizing community events. They want to create a website for the board members to share neighborhood information easily and in one location.

October 2023 - May 2024


This project was completed as a Senior UX Capstone at the University of Michigan School of Information. As project manager of a team of four, I organized the execution of the user research, design, and evaluation phases.

01 Research Phase

The NKMNA is facing difficulties efficiently sharing neighborhood information about community events, news, and resources to its residents.

They currently reach residents through four communication channels: newsletter flyers, Facebook, Nextdoor, and QR codes. This leads to excessive time and financial resources being dedicated to sharing information.

01 Research Method

Focus Group

13 board members, including executive members and block leaders, from the North Kessler Manor Neighborhood Association joined us on a zoom call. Given the constraint of not speaking to neighborhood residents, we utilized the board members’ expertise in both sharing and receiving neighborhood information.

“Our residents know how to use technology, but they resist change.”

“We need a one-stop shop for information.”

02 Research Method

Generative Analysis

Focusing on the user goals discovered in the focus group, our team evaluated a variety of neighborhood and community websites.

The design decisions and takeaways from these comparators informed our UX Requirements.

02 Design Phase

UX 
Requirements

Resources Page
Events Page
Newsletters
Dues Payments

About Page
Announcements
Email Sign-Up
Board Contact

Information Architecture

We organized our design requirements into categories to plan the main pages and navigation menu.

Low-Fidelity Designs

Created many potential page designs for each header of the early navigation menu. This provided us with a range of possible layouts and features.

Combined our best designs into a composite sketch for each page to serve as our blueprint for low-fidelity wireframes.

Identified the most effective design solutions to meet each page’s requirements and present information in an accessible way for users.

Style Guide

Feedback & Iterations

Conversations with users and peers throughout the design phase led to changes in UI and information architecture.

03 Evaluation Phase

Usability Testing

The NKMNA gave us six contacts from the neighborhood to participate in our usability testing.

Participants successfully completed all tasks, and the average “ease of task” rating was 9.3 out of 10

Updated Interaction Map

Confusion surrounded the navigation usability. Participants  looked under the “Resources” header for information about newsletters and contact information.

Our solution involved changing the language and organization of the navigation headers.

Final Designs!

What I Learned

The project highlighted the value of an iterative design approach and the importance of continuous improvement based on user feedback. Throughout the development phases, I learned how to adapt and refine the website based on conversations with peers, usability tests, and  surveys. This allowed our team to identify and address pain points early on which led to a more user-friendly website.

The iterative process also taught me the balance between enhancing both aesthetic appeal and ease of use in a way that best supported users. This experience emphasized that UX design is not a linear process, but rather a cycle of testing, learning, and improving to meet user needs effectively.