Plain Steps

A family member records an online task once; the person who struggles follows it one step at a time, read aloud in Hindi or English, with one tap to say exactly where they're stuck.

Comment

Inspiration

[Who: e.g. "My mother", with her permission] can use a smartphone, but online tasks like [the task, e.g. paying the electricity bill] still defeat her. Every attempt ends in a phone call that starts with "what's on your screen?", and usually with me doing it for her. She doesn't need someone to do it for her. She needs the right instruction at the right moment.

The problem

Apps assume speed, English and confidence. When an older user gets lost, there's no way back except calling someone, and the helper can't see where they went wrong.

User: an older adult who can do a task with guidance but not alone. Barrier: online tasks with no patient, step-by-step help in their language.

What it does

Plain Steps has two sides:

  • The helper (a family member) records a task once: each step gets short text, an optional photo with a "press here" marker, a voice note, and an optional "what you should see now" check. Steps can be flagged with a caution, like "never share this code".
  • The person follows the guide one step per screen, with large text and read-aloud in Hindi or English. If something goes wrong, I'm stuck sends the helper a WhatsApp message naming the exact step, or calls them.

The helper's activity view shows how long each run took and which step caused the most trouble, so they can rewrite it. Guides can be shared between phones as a single file.

The difference it made

Before With Plain Steps
Time to finish [task] [ ] [ ]
Calls for help [ ] [ ]
Finished on their own? [ ] [ ]

How I built it

  • Plain HTML, CSS and JavaScript (ES modules): no framework, no build step, zero runtime dependencies.
  • IndexedDB for guides, photos and voice notes; Web Speech API for read-aloud; MediaRecorder for voice notes; Web Share API to send guides.
  • Installable web app with a service worker, so it works offline after the first load.
  • Hosted on GitHub Pages, deployed by GitHub Actions on every push.
  • Tested with Node's built-in test runner ([N] tests) and Playwright with axe-core ([N] browser tests).

Accessibility

  • Tap targets of at least 48px; primary buttons 64px tall.
  • Text scales to 200% without anything being hidden.
  • High-contrast colours in light and dark mode.
  • Visible focus, and step changes announced to screen readers.
  • Every icon has a text label. No time limits, no gesture-only controls, and reduced motion is respected.
  • Tested with TalkBack, keyboard only, and the phone's largest font size: [results].
  • axe reports no serious or critical issues.

Privacy and safety

All data stays on the device: no accounts, no server, no tracking. The builder warns if a helper types a password, PIN or OTP into a step. Imported guide files are treated as untrusted: strictly validated and never rendered as HTML. A Content Security Policy blocks external scripts.

Challenges

  • Headless test browsers have no speech engine, so read-aloud had to be mocked in tests and checked by hand on real phones.
  • At the largest text size, the button bar first covered over 40% of the screen and had to be redesigned.
  • Many Android phones have no Hindi voice installed, so the app needed a clear fallback, not silent failure.
  • GitHub Pages serves the app from a subfolder, so every path had to be relative.

What I learned

  • Accessibility can be tested, not just claimed: automated checks catch some issues, but only a real phone with TalkBack and large fonts shows the rest.
  • There are really two users: the helper who builds and the person who follows. Each needs its own design.
  • Device APIs like speech behave differently from phone to phone.

Limitations

  • Data lives on one device; there's no sync between the helper's and the person's phones.
  • A helper has to set up each guide.
  • Guides go stale when the other app changes its screens.
  • Hindi read-aloud depends on the phone having a Hindi voice installed.

What's next

  • More Indian languages.
  • An optional AI helper to simplify step wording.
  • Sharing guides with a link instead of a file.

Pre-existing work and AI assistance

All code was written during the event; no pre-existing code was reused. The app has no third-party runtime libraries; Playwright, axe-core and fake-indexeddb are used only for testing.

I used AI throughout: I developed the idea and the build spec with Claude (Anthropic), and the code was written by Claude Code under my direction. I chose the problem, made the design decisions, tested on real phones and with [user], reviewed the Hindi text, and edited this story, which was drafted with Claude's help.

Built With

Share this project:

Updates

Submission history