• 

  the first step team :)

Project Story: First Step

## Inspiration

The problem in the Hunter region isn't a lack of services—it’s the overwhelming "wall of friction" that greets people in their darkest moments. We met Jane, Bradley and the team at LMNSPN and realized that while their physical Evolve Hub provides incredible "walk-in" warmth, the digital experience was missing that same warmth & connection.

First Step transforms the Evolve Hub's walk-in warmth into a seamless digital presence that finds every person in the Hunter—before they need the service. We didn't want to build a better search tool; we built a guided digital front door that acts as a "Mental Health GPS." By simplifying choices and providing direction, we remove the burden of decision-making to support early intervention before a crisis peaks.

## What it does

Instead of browsing or searching through dozens of clinical categories, participants experience a gentle, guided journey:

• Simple Interaction: Answer a few non-clinical questions to identify immediate needs.
• Personalized Recommendations: Receive 1–3 tailored suggestions rather than an endless directory.
• Clear Next Steps: Direct guidance on how to connect with the right support immediately.
• Volunteer Connectivity: Simplifies the administration and submission of volunteer applications to keep the community connected.
• Offline Capability: The site can be accessed offline, ensuring support is available even without an active internet connection.

## How we built it

We leaned into a "Low-Stress" technical stack to ensure reliability and speed:

• Frontend: Built with HTML, CSS, and vanilla JS—no build tooling and zero dependencies.
• Architecture: Used ES modules for native browser imports and CSS custom properties for shared design tokens across pages.
• Deployment: Static Web Apps deployment in Azure with Cosmos DB Document Store for persistence.
• Deployment Backup: Static hosting via GitHub Pages and GitHub Actions.
• GitHub Actions: Deployment pipelines for Azure SWA, GitHub Pages and API Unit Testing
• AI & Collaboration Tools:
• Claude: Assisted with web design layout, HTML code, and empathetic content creation.
• Copilot: Used for comparative research of other NGO websites.
• OpenAI & Gemini: Powered the decision logic and video generation.
• Playwright: Utilized to run automated tests on the code.

## Challenges we ran into

Our biggest hurdle was Time. We had a mountain of ideas, but we had to remain realistic about what was achievable within the hackathon window. We focused on delivering the most immediate value—reducing cognitive load—rather than trying to build every feature at once.

## Accomplishments that we're proud of

• Client Alignment: We are proud of our ability to listen to the client and pivot our scope to ensure we were building the most effective solution for the Hunter community.
• Cross-Functional Synergy: We maintained a team aligned around a shared purpose, frequently checking in and playing to each other's technical and creative strengths.
• Bridging the Gap: Successfully moving from a "cold" digital footprint to a brand that feels like a warm invitation.

## What we learned

• Start Small: You don't have to build everything at once. Identifying the "minimum viable delight" is more important than feature bloat.
• Active Listening: We learned to spend more time on requirements—asking questions and playing back assumptions to the client rather than working off a guess.

## What's next for First Step

• Sustainable Growth: Keeping the participant experience at the heart of every decision as we scale.
• Beyond MVP: Adding social elements, advanced analytics, and a dedicated admin dashboard.
• Community Integration: Rolling out physical touchpoints like QR codes on pub coasters and market stalls to ensure LMNSPN becomes a household name.

Built With

• azure
• claude
• claude-web-design-layout
• co-pilot-other-ngo-website-comparison
• content-(text)creation
• cosmosdb
• gemini
• github
• html
• html-code
• html5
• javascript
• openai
• playwrite
• zero-dependencies-css-custom-properties-?-shared-design-tokens-across-pages-es-modules-?-native-browser-module-imports-for-js-github-pages-?-static-hosting-via-github-actions-git-hub-planning-docs