← Back to all work
Personal Project
2026

Neighbor Share — A neighborhood resource
sharing app

A neighborhood resource-sharing app designed for elderly users, taken from initial concept through interactive prototype to a production-ready Figma design file — entirely through AI-assisted design with Claude.

Role

Lead Designer & Product Manager

Methods

AI-Assisted Design, Figma MCP, Accessibility-First

Tools

Claude, Figma MCP, HTML/CSS/JS Prototyping

The Problem

A neighborhood full of resources nobody could find

In my neighborhood, people own tools, equipment, and skills they'd happily share — but there's no organized way to discover or borrow them. Elderly neighbors especially need help with seasonal tasks like snow removal but don't always know who on their street has a snowblower or is willing to help.

The goal was to design a simple, accessible app that connects neighbors with shared resources — with accessibility as a first-class constraint from the very beginning, not an afterthought.

Design Process

Concept to Figma in three phases

The project moved through three distinct phases, each building on the last — using Claude as a design and product thinking partner throughout.

1

Concept Definition

Scoped the project through targeted questions: who the users are, how they log in, what resource types to support, where data lives, and which features matter most. This shaped the product before any pixels were touched.

2

Interactive Prototype

Built a working HTML/JS prototype with auth, resource browsing, checkout, and sharing flows. When the primary users were identified as elderly neighbors, the entire prototype was rebuilt with accessibility as a first-class constraint — 52px minimum touch targets, high-contrast styling, plain language, and persistent bottom navigation.

3

Figma Design File via MCP

Using Figma's MCP integration, Claude programmatically created a design file and built all screens using the Plugin API. Iterative updates — adding new screens, modifying fields, shifting layouts — were handled without rebuilding from scratch.

Key Design Decisions

Accessibility drove every decision

Touch targets are at least 52px, text is 17–20px throughout, and the color palette uses high-contrast pairings verified against WCAG AA. Language is deliberately plain — "Borrow this" rather than "Check out," with error messages that tell you what to do rather than just what went wrong.

Navigation uses a persistent three-tab bottom bar with large icons and labels, avoiding hamburger menus or nested dropdowns that can frustrate older users.

Snowblower Street Coverage Feature

When a neighbor checks out a snowblower, they can indicate they're clearing an entire street. Neighbors registered on that street see a prominent green alert banner when they open the app, letting them know they don't need to shovel. This required designing both the checkout-side flow (street coverage toggle + street name input) and the recipient-side experience (contextual alert banner with time information).

52px min touch targets

Every interactive element meets the minimum touch target size for users with reduced dexterity.

High-contrast palette

All color pairings verified against WCAG AA contrast ratios for users with low vision.

Plain language throughout

"Borrow this" not "Check out." Error messages that explain what to do, not just what went wrong.

Persistent bottom navigation

Three-tab bottom bar with large icons and labels — no hamburger menus or nested dropdowns.

Figma Designs

8+ screens covering the full user journey

The Figma file contains all screens from sign-in through resource sharing, built programmatically via Claude's Figma MCP integration.

Neighbor Share — All Screens Open in Figma →

AI-Assisted Workflow

What this project demonstrated

This project demonstrates a complete design workflow — problem definition, scoping, prototyping, user-centered iteration, and production-ready Figma output — conducted entirely through conversation with an AI partner. Each phase built on the previous one, maintaining context across the full arc of the project.

8+
Screens Designed
3
Design Phases
2
Prototypes Built
1
Figma Deliverable

Reflections

What I'd carry forward

Accessibility first, not last

Rebuilding the prototype around elderly users once they were identified reinforced that accessibility constraints make better products for everyone — not just the target user.

AI as a design partner

Using Claude throughout the process — from scoping questions to Figma MCP automation — showed how AI can accelerate the full design workflow without sacrificing quality or craft.

Scope before you design

The structured concept definition phase at the start prevented rework later. Knowing exactly who the users are and what the product needs to do before touching Figma is always worth the time.

Plain language is a design decision

Choosing "Borrow this" over "Check out" is as much a design decision as choosing a color or a typeface. Language shapes how users feel about a product.

Next project

CRM Workflows for Nonprofit Fundraisers