NaviAge

Inspiration

Watching our grandparents struggle with everyday technology—getting locked out of tablets, fearing every email is a virus, and struggling to tap tiny buttons—made us realize a fundamental truth: modern interfaces are built for digital natives, not seniors. The fear of breaking something keeps an entire generation isolated from the digital world. We wanted to build a bridge across that digital divide. We created NaviAge to be the patient, friendly technology companion our grandparents deserve.

What it does

NaviAge is an accessibility-first web platform that empowers senior citizens to conquer technology. Because senior centers often rely on outdated tablets, it works right in the browser with absolutely zero installations required.

AI Tech Assistant: Powered by Google Gemini, users can ask any tech question in plain English. We engineered a specific "Senior Persona" prompt that forces the AI to drop all jargon, speak patiently, and use familiar analogies. Scam Detection Trainer: A safe, risk-free environment where seniors practice spotting phishing emails and fake texts, alongside a live AI Scam Checker where they can paste suspicious messages for instant verification. SOS Help Cards & Tutorials: Step-by-step visual guides for tasks like video calling, connecting to WiFi, and safely unfreezing devices.

How we built it

We made a highly deliberate architectural decision to avoid heavy JavaScript frameworks (like React or Next.js). To ensure instantaneous load times on the older hardware frequently used by seniors, we built NaviAge natively using pure Vanilla HTML5, CSS3, and ES6+ JavaScript. We implemented a custom Single Page Application (SPA) routing system and built our own accessibility.css engine to handle dynamic font-scaling up to 150% without breaking flexbox layouts. For the core intelligence, we integrated the raw Google Gemini API via fetch requests, and utilized the native browser Web Speech API to allow seniors to dictate questions and have the AI speak answers aloud.

Challenges we ran into

Our biggest challenge was maintaining extreme simplicity on the frontend while handling complex AI edge cases on the backend. When implementing the Gemini API, we initially ran into strict quota restrictions and role-alternating requirements that crashed the chat state. We had to build robust LocalStorage fallbacks and engineer custom UI error handling that explained API limits in "grandparent-friendly" terms rather than throwing scary technical errors. Additionally, ensuring our custom UI maintained strict WCAG AAA contrast minimums while still looking aesthetically modern took significant CSS iteration.

Accomplishments that we're proud of

We are incredibly proud of our highly specialized AI system prompt engineering. By successfully forcing the Gemini architecture to communicate with unprecedented patience and relatable analogies, we completely neutralized the intimidating nature of interacting with AI. We are also incredibly proud to have shipped a "zero-install" architecture that hits flawless accessibility metrics without sacrificing a premium, modern design feeling.

What we learned

We learned a tremendous amount about the intricacies of native vanilla frontend SPA routing and the cross-browser quirks of the Web Speech API. Perhaps most importantly, we learned how to effectively structure multi-part system instructions to fundamentally alter an LLM's language complexity for a highly specific, non-technical demographic.

What's next for NaviAge

Our immediate next step is expanding our accessibility suite by implementing multi-language support (starting with Spanish and Mandarin) to assist immigrant grandparents. Secondly, we plan to integrate multimodal computer vision using Gemini, allowing a senior to simply point their camera at their frozen TV or computer screen and ask the AI, "What does this error message mean, and how do I fix it?"

Built With

• css3
• git
• google-gemini
• html5
• javascript
• web-speech-api