Offscreen — Project Overview

What it is Offscreen is a web app that helps people swap mindless scrolling for small, doable analog activities. Instead of a vague "read more" suggestion, it gives users one specific, concrete thing to do right now — matched to their actual situation.

How it works Users tap three quick filters — how much time they have, where they are, and their energy level — and the app surfaces a matching idea from a bank of 60+ curated activities spanning creative, social, outdoor, mindful, physical, and skill-building categories. Each idea is presented as a visual "index card" pulled from a stack, complete with a short note on why it works. Users can save favorites to revisit, and the app tracks cumulative "analog minutes" earned over time — framing the goal as something gained, not something given up.

Design approach The visual identity leans into the offline, tactile theme it's promoting: a warm paper texture, a torn-edge index-card motif, a serif/mono type pairing that evokes stationery and field notes, and restrained, unhurried motion — deliberately avoiding the generic "AI-app" look of a plain cream background with a safe sans-serif font.

How it was built This was built through an AI-assisted, or "vibe-coded," process using Claude. The project moved through four stages in a single working session:

1. Concept — starting from a one-line idea and pushing it through multiple rounds of refinement to sharpen the hook (smart matching instead of pure randomness, positive framing around "analog minutes" instead of guilt-based screen-time tracking, a specific physical metaphor for the interaction).
2. Design direction — establishing a color palette, typography, and a signature visual element specific to the concept, rather than defaulting to generic AI-generated design patterns.
3. Build — generating a fully self-contained HTML/CSS/JS app with no external dependencies, so it's easy to host anywhere.
4. Iteration and quality control — reviewing outputs at each stage and pushing back on generic or templated results before moving forward.

Why it's relevant to marketing work The process demonstrates product thinking (turning a vague insight into a differentiated concept), positioning instinct (reframing subtraction — "less screen time" — into addition — "analog minutes earned"), and the ability to direct AI tools effectively to go from idea to working prototype quickly — a skill increasingly relevant to fast-moving campaign and content work.