Library
The shared workspace for Read, Search, Saved, Plans, Prayer, and Study Tools.
BibleBeacon · Product design + AI-assisted development
Designed for many ways of returning to Scripture.
How I designed and directed an offline-friendly Scripture product and used AI assistance to accelerate bounded implementation, testing, troubleshooting, and documentation.
Product Strategy · UX/UI · Information Architecture · AI-Assisted Development · Local-First Design · Release Governance
Live responsive web app + installable PWA
Release 0.16.0
Reading, listening, discovery, study tools, games, and private device-local progress in one product system.
The opportunity
Grow beyond a single challenge without fragmenting the experience.
BibleBeacon began as a lightweight Scripture challenge. The design opportunity was to support quick play, reading, search, listening, discovery, saving, planning, prayer, study, and return loops while keeping entry simple and the product visually coherent.
The selected direction uses one cinematic visual system, six stable primary destinations, and a shared Library for related personal study work. Core text and study indexes are bundled, personal material stays on the current device, and no account is required in release 0.16.0.
- Library
- Listen
- Discover
- Scripture Fusion
- Word Puzzle
- Beacon Log
My role
Product Designer · Experience Strategist · AI-Assisted Development Lead · Release Decision Authority
I defined and directed the product. AI helped accelerate selected work inside explicit requirements, privacy boundaries, source rules, acceptance criteria, and review gates.
- Vision and priorities
- Defined the purpose, feature sequence, operating constraints, and criteria for advancing ideas into releases.
- Experience strategy
- Designed the navigation model, user journeys, Library structure, engagement loops, and responsive behavior.
- Visual direction
- Directed the cinematic dark interface, gold and teal accents, typography, imagery, hierarchy, and interaction tone.
- Product architecture
- Set the boundaries between bundled content, device-local state, web deployment, and the separately managed audio library.
- Quality control
- Established testing priorities, reviewed outputs, identified regressions, directed corrections, and protected known-good behavior.
- Release decisions
- Determined whether work was planned, locally verified, deployment-ready, deployed, or live verified.
Experience strategy
A two-level information architecture keeps play public and personal study work predictable.
- 01Enter
Start from a clear home screen with low-friction routes into play, study, listening, or discovery.
- 02Choose depth
Move from a short activity into deeper reading or study without creating an account.
- 03Use Library
Read, Search, Saved, Plans, Prayer, and Study Tools share one related workspace.
- 04Keep continuity
Resume positions, saves, progress, missions, quests, and review scheduling support return visits.
- 05Stay private
Personal progress and study material remain in versioned device-local storage.
- 06Trace sources
Approved text and study data retain source, revision, license, attribution, and checksum records.
Experience the product
The actual live BibleBeacon application.
This interactive panel loads BibleBeacon directly from its production domain. Try the navigation, open the Library, explore a game, or launch the product in a separate tab for the full browser experience.
Live production applicationLoading BibleBeacon…
Live content is served by biblebeacon.sardev.io and may reflect changes made after this case study was prepared.
Feature walkthrough
One product supporting reading, listening, discovery, personal study, and replayable learning.
Read
Four bundled translations, chapter navigation, resume state, and responsive comparison.
Search
Words, phrases, topics, and direct references resolve against the bundled corpus.
Saved
Bookmarks, highlights, and notes stay in one searchable device-local collection.
Plans
Three short reading paths with local completion, resume, streaks, and optional reminders.
Prayer
Private prayer and reflection records with structured states and local lifecycle controls.
Study Tools
Approved local indexes for people, places, relationships, Strong's metadata, and topics.
Listen
Book and chapter navigation for 260 supplied New Testament recordings with resume and low-data mode.
Discover
Curated Scripture cards organized into Stories, Teachings, People, and Wisdom.
Scripture Fusion
A four-choice missing-word experience grounded in pinned local WEB text.
Word Puzzle
Ten local word-connect levels with hints, rewards, daily play, progress, and sequential unlocks.
Beacon Log
A device-local view of sessions, streaks, review, mastery, missions, quests, and recent activity.
Evidence boundary: the page documents product capabilities and observed release behavior. It does not claim user adoption, retention, conversion, revenue, customer satisfaction, or business ROI.
System design
A local-first web architecture with governed content and a protected media boundary.
01Browser + PWAResponsive app and offline shell
02Bundled contentScripture, search, games, and study indexes
03Device-local stateProgress, saves, notes, plans, prayer, and resume
04Static Node serviceSPA routes, release metadata, and range responses
05Separate audio library260 chapter recordings outside the smaller web package
Current release boundary
Release 0.16.0 uses TypeScript and Vite, bundled content, versioned local browser storage, a static Node 20-compatible service, and a separately managed audio directory. It does not activate accounts, remote databases, payments, analytics, or a runtime Bible API.
AI-assisted development
AI accelerated bounded tasks. Human judgment controlled the product.
- 01Define
I set the problem, requirements, constraints, user behavior, privacy boundary, and release scope.
- 02Explore
AI helped compare options, research approaches, draft plans, and surface implementation alternatives.
- 03Implement
AI supported scoped coding, data adapters, migrations, tests, and documentation against the current baseline.
- 04Review
I evaluated outputs against the intended experience, sources, rights, privacy, architecture, and operating constraints.
- 05Correct
Weak concepts, unsafe assumptions, regressions, and brittle approaches were rejected or revised.
- 06Release
Accepted work advanced only after source inspection, tests, builds, browser checks, and explicit status assignment.
QA / QC
Verification protected the growing system from feature and deployment regressions.
Automated tests
Current repository tests cover product behavior and data integrity.
Code quality gates
Typechecking, linting, and the production build passed for the verified 0.16.0 record.
Mobile verification
Desktop and requested mobile browser checks covered core flows and horizontal overflow.
Live release evidence
Release metadata, the service worker, and direct game routes returned HTTP 200 in the verified release record.
These checks verify implementation and release behavior. They are not a formal usability study, audited accessibility certification, penetration test, or proof of product adoption.
Important correction
A web deployment replaced the public root and temporarily disconnected the audio library.
An early deployment replaced the web root while the large, separately managed audio path was excluded from the smaller web archive. The application remained available, but expected audio URLs returned 404.
The failure was an architecture and release-boundary issue, not a player-interface defect: web assets and the roughly 549 MB, 260-file audio library had different deployment lifecycles.
Later releases preserved the audio directory, separated web packaging from media synchronization, retained fallbacks, documented rollback, and verified all expected audio URLs plus representative range delivery.
Product evolution
Incremental releases expanded the product while preserving a known-good baseline.
- 0.3.0Foundation
Rebrand, challenge, XP, levels, and achievements.
- 0.4.0–0.7.0Return loops
Timeline, missions, Beacon Log, review, paths, and quests.
- 0.8.0Anywhere
Installable PWA, offline shell, and connection status.
- 0.9.0–0.11.0Reach + Listen
Sharing, Discover, chapter audio, and the full listening library.
- 0.12+Library
Reader, Search, Saved, Plans, Prayer, study, and comparison.
- 0.13.0Governance
Offline study data, imports, manifests, and source review.
- 0.14.0Word Puzzle
Ten local levels, daily play, rewards, and progress.
- 0.15.0–0.16.0Scripture Fusion
Final missing-word interaction, history behavior, and refinement.
Verified outcomes
A coherent, live, responsive Scripture product with explicit evidence boundaries.
What is established
- Responsive web application and installable PWA
- Local-first personal data and bundled Scripture/search content
- Multiple reading, listening, study, discovery, and game experiences
- 260 supplied New Testament chapter recordings
- Governed source-data workflow and regression test coverage
- Versioned releases, rollback strategy, and live release 0.16.0
What is not claimed
- User count, retention, conversion, revenue, or market share
- Customer satisfaction or business ROI
- Formal usability-study findings
- WCAG certification or independent compliance audit
- Penetration testing, encrypted cloud storage, or synchronization
- Current publication status for any separate app-store channel
Lessons learned
The strongest acceleration came from clear boundaries, small releases, and visible evidence.
Incremental releases reduced regression risk. Local-first data reduced runtime dependencies. Explicit source manifests made provenance reviewable. Separating web and media deployments protected the audio library. Shared Library information architecture prevented feature fragmentation.
Next improvements include formal design-decision logging, structured usability testing, and lazy-loading or code-splitting for larger payloads.Visit the live product
BibleBeacon is live at biblebeacon.sardev.io.
Explore the working product, review the full design and AI-assisted development report, or return to the portfolio collection.