Navii: Mobile-First A11y Reader

Adaptive Mobile Reader

Staff Product Designer, Design Systems • Interaction Design • Prompt-to-Component Prototyping • Self-Taught Vibe Coder

➤ Link: PRD: Click ThIs Link to Navii PRD↗ (new window)

Watch the Full Walkthrough

Navii: Mobile-First A11y Reader

Summary

Navii is a mobile-first accessibility reader built to make digital text more adaptable and easier to consume. It allows readers to adjust font size, line height, contrast, and font style while also generating plain-language summaries powered by AI. The goal: create a lightweight tool that improves readability for people with low vision, dyslexia, or cognitive fatigue.

➤ The Problem

Many users struggle with reading long-form digital content.

Low-vision readers often can’t resize text or increase contrast in ways that actually help.
Dyslexic readers benefit from specialized fonts and spacing, but most apps don’t support them.
Content summaries are often locked behind audio-only tools or complex assistive software.

These barriers leave a gap: there isn’t a simple, mobile-first tool that combines customizable text presentation with accessible summaries.

➤ The Solution

Navii provides a focused, mobile-first reading experience that adapts to the reader:

Adjustable font size and line height
Dark/light mode and high-contrast options
Dyslexia-friendly font toggle
One-click AI-generated summaries in plain language
Persistent settings so the reader feels consistent across sessions

By combining visual adaptability with AI-powered content summarization, Navii demonstrates how lightweight tools can make digital reading more inclusive.

Process Overview

I started with Figma to outline how Navii might look and behave on a small mobile screen.

I explored both Outline View (to check spacing, alignment, and hierarchy) and Rendered View (to preview the actual user experience).

This helped me test the balance between functionality and simplicity before generating code.

Rapid Prototyping (Magic Patterns)

With the design concept in place, I used Magic Patterns to turn prompts into functional React + Tailwind components.

I iterated through several prototypes, testing controls like dark/light mode toggles and font size buttons.

Each iteration moved closer to the final MVP structure.

Local Development (VS Code + Localhost)

Once satisfied with the Magic Patterns export, I brought the code into VS Code.

I reviewed the project structure, cleaned up components, and adjusted spacing using Tailwind.

Running the app locally allowed me to test features like dark/light mode, font size scaling, and layout consistency in real time.

Deployment (Vercel)

Finally, I pushed the repo to GitHub and deployed with Vercel.

This step made Navii accessible from a live demo link.

Now, anyone can try it directly in their browser and adjust accessibility settings themselves.

Feature Highlights

Font size & line height controls → Adjust text for readability on small screens.

Dark/light mode toggle → Quick visual switch for different environments.

High contrast option → Ensures text meets WCAG guidelines for low-vision users.

Dyslexia-friendly font → Offers an alternate font designed for readability.

AI summaries → Generates plain-language summaries of pasted text.

Persistent settings → Remembers preferences across sessions (via localStorage).

Mobile-first design → Layout optimized for small screens first, scaling up as needed.

Feature Highlights

Clear Control → one-click way to reset text input and settings

Talk-to-Text → speak directly into the app instead of typing

Text-to-Speech → have the app read content back aloud

Enhanced Summarization → more reliable, fine-tuned AI summaries

Settings Persistence → sync preferences across sessions and devices

📢 Want to learn more?

Let’s set up a time to chat, reach out via one of the links in the footer below.