Overview
Toucan replaces select words on pages you're reading with vocabulary in a language you're learning — on desktop browsers, not Chrome-only. I joined at company inception alongside two other engineers who started the same day. The CTO and a contractor had built a basic extension that swapped words clumsily and changed few of them. I took over extension development in year one — reworking logic and shipping sidebar, contextless learning moments, and in-extension games — before moving to the web platform full time. Porting Toucan to mobile Safari was separate work I owned solo; that story lives in the Mobile Safari extension case study.
Product overview
Company product video — context for what Toucan is, not a UI walkthrough of my work.
My Role
- Title
- Senior Software Engineer I → II (early engineer)
- Context
- Joined at inception with a small engineering cohort; browser extension was my primary focus in year one.
- Scope
- Extension architecture and features after inheriting the prototype; year one before specializing on the Next.js site.
The Problem
The prototype extension swapped words clumsily and covered too little of each page to feel useful — the core product loop wasn't shippable yet.
What I Built
Extension sidebar shell
- Problem
- The browser action popup — the default toolbar panel — was too small for settings, navigation, and learning features. MV2 had no native side panel API, so the product needed a larger persistent surface while users browsed.
- Fix
- Built a custom page-overlay sidebar from scratch via content scripts — React and Material UI for the chrome: global on/off, close, bottom navigation, and a module slot pattern so features could plug in over time.
- Result
- A reusable home for the extension: the team could ship new modules without reworking the shell, and learners could find and control Toucan on any site.
Pause with duration options
- Problem
- Turning Toucan off was all-or-nothing — disable entirely or uninstall. Users who wanted a break often turned it off and forgot to turn it back on, so they lost learning momentum or churned.
- Fix
- Built a pause toggle with duration presets — 1 hour, until 6 p.m., until tomorrow, daily 9 a.m.–6 p.m., indefinitely — plus paused-state UI, clear copy, and a warning when paused indefinitely.
- Result
- A friendlier off-ramp without uninstalling; timed presets auto-resume learning so users don't have to remember to re-enable.
Saved words and practice quizzes
- Problem
- Inline word swaps were passive — users couldn't collect vocabulary or actively review what they'd encountered while browsing.
- Fix
- Built the full flow: save from the inline translation dialog, a Saved sidebar panel with sort, mastery status, and completion tracking, plus randomized practice quizzes (five module types) with stage-specific UI (empty state, in-progress, daily goals). During practice, swapped words on the page are obfuscated so users recall from memory.
- Result
- Turned passive browsing into active recall — users owned a personal vocabulary list and could practice it without leaving the page.
Toucan Tips
- Problem
- Users didn't know what Toucan could do — features were buried in the sidebar with no guided discovery.
- Fix
- Built a Tips hub in the sidebar: an Explore Toucan checklist for core actions, a standalone refresher that replays the onboarding-style simulated browser, and Extra Practice — an injectable on-page quiz on known sites with user-controlled launch and dismiss.
- Result
- Self-serve help at their fingertips — discover features, relearn how Toucan works, and get extra practice without support.
Includes
Toucan Tips hub
A discovery panel listing Tips, shortcuts to the Explore checklist, refresher tutorial, and Extra Practice — plus contextual cards like keyboard pause hints.
Refresher tutorial
Launches the simulated browser experience from onboarding on a standalone page — users can relearn hover translations, progress tracking, and pause at any time.
Extra Practice
Injects a practice module into a known area of a known site — users can launch when ready, dismiss permanently, and quiz on words they've already seen while browsing.
Extension settings modules
- Problem
- Extension settings were scattered or unreachable — users couldn't control language, blocking, audio, shortcuts, or account without friction.
- Fix
- Built five settings modules inside the sidebar — language switcher, blocked sites, audio controls, keyboard hotkeys, and delete account — each wired to backend behavior so users stayed in the extension.
- Result
- Users could self-serve — switch languages, block sites, tune audio, use hotkeys, and leave cleanly without leaving the extension.
Includes
Language switcher
Switch source and target language from Settings; triggers a new translation set download when needed — no leaving the extension.
Blocked sites
URL input and block list UI that sends blocked domains to the backend — blocking logic already existed; this let users manage sites from Settings or the word popup.
Audio controls
Pronunciation speed with live preview and a voice picker for persona narration — researched natural-voice libraries to find quality options.
Keyboard hotkeys
Shortcuts for activate extension, open the settings sidebar, and pause/unpause Toucan — configurable from the browser's extension shortcuts UI.
Delete account
Warning step before deletion — progress and settings would be lost — then confirm. Respectful offboarding so frustrated users could leave without bad reviews.
RFCs
- Problem
- Extension and platform bottlenecks stayed implicit as the team grew.
- Fix
- Wrote RFCs to surface technical constraints and align the team before building.
- Result
- Shared context for extension and platform decisions.
Tech Stack
Outcome / Impact
Toucan reached 1M+ users during my tenure — a company outcome I do not claim sole credit for. I owned browser extension engineering in year one, turning a scrappy prototype into the learning UI the product scaled on.