Office Keys

Accessible typing practice for building digital fluency in civic work.

Comment

Project Story — Office Keys (TypeSpeed Pro)

** A no-login, accessible typing practice app that helps public-sector teams build foundational digital skills through short, structured, and adaptive drills.

Why this exists

In many public agencies, typing is assumed, not taught. New hires (and even seasoned staff changing roles) are expected to navigate email, case systems, and forms with speed and accuracy. But access to training is uneven, security filters block some sites, and “one-size” typing games don’t match court workflows.

Office Keys is a lightweight, zero-friction practice tool designed to fit that reality: open the page, pick a level, and start. It’s built to be safe for intranet use, understandable for beginners, and satisfying for anyone chasing better WPM.

Who it’s for

  • Newcomers to office work who never had formal typing practice
  • Cross-trained staff who need confidence in alphanumeric entry and punctuation
  • Supervisors/trainers who want a no-cost, low-overhead way to encourage practice
  • Anyone who wants to firm up typing fundamentals—fast

What makes it different

  • No accounts, no friction. Results save locally; open and go.
  • Structured practice. Short / Medium / Long levels + phases (Letters → Numbers → Punctuation → Mixed).
  • Adaptive—but respectful. It never auto-changes your level; it only suggests the next best focus within your chosen level.
  • Real accessibility. High contrast, large text, dyslexia-friendly font, keyboard shortcuts, and screen-reader announcements.
  • Variety by design. Smart rotation with “avoid recent” so passages don’t repeat back-to-back or across visits.

How it works (flow)

  1. Home → Choose a level (Short / Medium / Long).
  2. Practice screen shows one passage and live stats; on finish you get WPM, accuracy, errors, and time.
  3. New Test advances to the next phase (e.g., from Letters to Numbers) while staying in your chosen level.
  4. Change Text keeps the current phase but switches to a different passage.
  5. Results history (local only) stores the last 10 runs; you can Export CSV for personal progress or supervisor review.
  6. First-run dialog (shown once) gives quick instructions and hand position tips; reopen any time via ?.

Keyboard shortcuts: N New Test · R Try Again (after finishing) · H/Esc Home

What shipped during HackVerse (highlights)

  • Results history + CSV export
  • Persistent header navigation (Home, New Test, clickable title) + keyboard shortcuts & help
  • Accessibility settings (high contrast, large text, dyslexia font) with local persistence
  • Within-level phases + Focus chip in the header
  • Adaptive practice (keeps level; tunes focus/punctuation only)
  • Variety engine (rotation + avoid-recent across refreshes/return visits)
  • First-run instructions (how it works + hand position), with “don’t show again”
  • Screen-reader announcements for results; focus management on completion

See full dated changelog in “Hackathon compliance & changelog.”

Why it matters (impact)

A conservative example to visualize value:

  • Assume 20 emails/day, ~100 words each → 2,000 words/day typed.
  • At 40 WPM → ~50 minutes of pure typing.
  • At 60 WPM → ~33 minutes.
  • Time saved: ~17 minutes/day (~85 minutes/week).
    This excludes reading/thinking time; it’s a clean way to show why building speed and accuracy is worthwhile.

Accessibility & inclusion

  • Visual: High-contrast theme, scalable text, dyslexia-friendly font toggle
  • Input: Full keyboard operation, visible focus rings, safe shortcut guards
  • Assistive tech: Live region announcements, dialog a11y, focus trap/restore
  • Privacy: No accounts; results stay on the device unless you export CSV

Tech & architecture

  • Vite + React + TypeScript
  • shadcn/ui + Tailwind for consistent, accessible components
  • LocalStorage for history, rotations, and settings (simple, private)
  • Lovable.app for rapid iteration; GitHub for source control and deploy hooks

What we learned

  • Structured, bite-sized drills reduce intimidation and boost willingness to practice.
  • “Adaptive” must never surprise the user—keeping their chosen level builds trust.
  • Accessibility investments improve UX for everyone (not just assistive tech users).

Roadmap (after the hackathon)

  • Court-specific packs (jury summons snippets, minute order phrasing, common form patterns)
  • Optional supervisor view (export-only or on-prem) to review CSVs
  • Gentle gamification (badges, streaks, benchmark goals)
  • Deeper accessibility QA (screen readers, keyboard-only audits)
  • Multi-profile “nicknames” on the same device
  • Optional Spanish UI + Spanish practice packs

Try it / See the code

Note: GitHub repository was renamed from type-speed-boost to office-keys. GitHub creates redirects; links continue to work.

Credits

  • Project lead & developer: La Shara Cordero
  • Inspiration: Classic typing tutors + modern public-sector training needs
  • Built with: Lovable.app (rapid frontend builder), Vite/React/TS, shadcn/ui, Tailwind

Built With

Share this project:

Updates