← back to work
case study · useful words

Useful Words: a bilingual companion for the moment a sentence stalls.

A writing tool for English-language learners, started in my own classroom and rebuilt, version after version, until it sat where the writing happens.

Useful Words running on a phone: a bilingual list of connective words grouped by the move they make.
On a phone, one tap from the sentence a writer is stuck in.
Client My own English-language learners and exam-prep students. Built under Human, the education practice I founded.
Sector Education, language learning
My Role Sole maker: research, content, UI/UX design, and front-end
Team Built solo. Now used by teachers at Human, whose feedback informs what I add.
Duration 2018 to 2026, shipped iterations across eight years
Methods Classroom observation, contextual interviews, content curation, prototyping, usability testing, accessibility auditing
Outputs A bilingual (EN / 繁中) writing companion, mobile-first and live
Permissions Personal project. Live at usefulwords.forhuman.ca.

A student would be halfway through a sentence, then stop.

They had the idea. They lost the next word, the connector that carries a thought forward, and hunting for it broke the sentence.

So the student would leave the document, open a dictionary or a translation app, and look. By the time they came back, the sentence had gone cold. I watched this happen the same way for years, across classroom after classroom of teenagers writing in their second language, and later with students drafting for advanced English proficiency exams.

A dictionary explains the word you already have.

A dictionary is indexed by spelling toward meaning; a writer stuck mid-sentence already has the meaning and needs the move.

The tools my students reached for were built to answer the wrong question. A learner stuck mid-sentence is asking something a dictionary cannot hear: how do I get from this idea to the next one?

The vocabulary they were missing was the vocabulary of moves: the connectors and transitions and set phrases that hold a piece of writing together. Nothing they had was organized that way. So the question I started with was whether you could index words by what a writer is trying to do, rather than by how those words are spelled.

I built every version of it myself.

Three rebuilds, no team, and that limit is why it stayed this specific to the students in front of me.

Across three rebuilds, I did the research, the content, the design, and the front-end myself.

  • Observed English-language learners stall mid-sentence, in class, while drafting.
  • Interviewed students about where the writing broke down.
  • Curated the word lists from my own teaching materials, later grounded in Cambridge exam materials.
  • Designed and built each version, from a 2018 desktop app to the current mobile-first site.
  • Tested with my own students and folded what I saw straight back in.

I indexed the words by the move a writer makes.

Group words by the job they do in a sentence, and a learner can find a phrase by function instead of guessing its first letter.

The first version, in 2018, was a set of lists grouped by what a writer was trying to do. One list for placing things in time: as soon as, by the time, meanwhile, eventually, prior to. Others for adding, for contrasting, for concluding. A student who knew they needed to carry one idea into the next could find the phrase by its function, without guessing the first letter. Ordering the words by intent made the tool worth opening, and it has survived every rebuild since.

The 2026 version keeps that backbone and layers eight academic topic areas on top, the subjects that come up again and again in proficiency exams, from technology and the environment to work and education. A student writing about one of them now finds the topic vocabulary and the connectors in the same place, in either language.

the move · connectors by function (2018 backbone)

add

furthermore
in addition
moreover

contrast

however
whereas
even so

sequence

as soon as
meanwhile
eventually

conclude

therefore
in short
to sum up

the topic · academic themes (added in the 2026 rebuild)
society & culture education environment technology & media health & lifestyle work & economy concepts transitions
Structure Useful Words indexes vocabulary by the move a writer is making rather than the word’s first letter. The 2026 rebuild layered the academic themes that recur in proficiency exams on top of that connector backbone.
On desktop Browse by category in the sidebar, or search a word in either language. Every entry pairs the English with a Traditional Chinese gloss and an example sentence.

The interface had to disappear behind the word.

Every screen decision served one test: a student finds the word and its move without having to read an interface first.

The unit is the entry. It carries everything at once, so nothing needs a second tap: the headword, its pronunciation, the part of speech, the English meaning beside the Traditional Chinese gloss, the collocations that show the word in the company it keeps, and one example in both languages. Colour does the wayfinding. Each topic owns a tint, so a student scanning for environment vocabulary follows the green instead of reading headers. Search highlights the matched letters and groups the results by part of speech, so the eye lands on the right form of the word fast.

Two defaults round it out. The tool follows the system into dark mode. And because students draft on their phones, the sidebar folds into a bottom tab bar within thumb reach.

Useful Words landing on desktop: a left sidebar of colour-dotted bilingual topics, a search box, a word-of-the-day card, and a browse-by-topic grid.
One screen Everything a student needs is on the first view: a word of the day, the eight topics colour-coded down the side, and a search that reads either language.
A Useful Words topic section on desktop: word entries with IPA, collocations, bilingual definitions and examples, beside the tinted topic sidebar.
Colour as wayfinding Each topic carries a tint, so a student scanning for a word follows the colour instead of reading every header.
A single Useful Words entry for 'diversity': the headword with its IPA pronunciation and part of speech, an English definition above a Traditional Chinese gloss, a row of collocations, a bilingual example sentence, and see-also and cross-topic tags.
The entry One card carries the pronunciation, the meaning in both languages, the collocations that show the word in use, and an example, so a student never has to tap twice to understand a word.
Useful Words after searching 'sustain': matches highlighted and grouped by part of speech. Useful Words after a Traditional Chinese search 環境: the match highlighted inside an English entry's Chinese example. A Useful Words topic section in dark mode: light text on black, topic tints intact.
Three states Search highlights the match and groups it by part of speech; the same query typed in Chinese still finds the English word; and the whole tool follows the system into dark mode.
Useful Words on a phone: a single column of word entries with a bottom tab bar of topics and a docked search field.
On the phone The sidebar folds into a bottom tab bar and a docked search, within thumb reach of the draft a student is writing.

I kept the content curated, even when I let AI help rebuild it.

AI sped up the build. It never wrote the content, because a learner cannot catch a confident, plausible-sounding mistake.

The words came out of teaching. First from the materials I had written for my own classes, then checked against Cambridge exam materials so the vocabulary matched what the exams reward. When I rebuilt the tool under Human in 2026, I used AI to move faster through the build itself. I did not use it to write the content. A learner has no way to tell a real word pairing from a plausible-sounding wrong one, and the cost of a confident mistake lands on the person least able to catch it.

Closing the distance to the writer, one rebuild at a time.

Desktop in 2018, a bigger redesign in 2019, mobile in 2026: each version closed the distance to the moment a sentence stalls.

The 2018 version was a desktop app. You installed it, and it sat in its own window. A redesign in 2019 roughly tripled the content and tidied the interface. The change that took me longest to see had nothing to do with features. My students were not writing at a desk with an app open beside the page. They were writing on a phone, in a notes app, between other things. So the 2026 rebuild is mobile-first and lives in a browser, a click from the document, with a word of the day, search in English or Chinese, and a shuffle die for when you do not yet know what you are looking for.

  1. 2018 · desktop

    The 2018 desktop version of Useful Words: a dark two-pane layout with a bilingual category filter (nouns, adjectives, verbs, structures) down the left and word entries defined in English and Traditional Chinese, each with an example sentence.

    The desktop original was dark and dense. I built it from my own class materials, and even then the words were grouped by function, so a student could find a phrase by the job it did in a sentence.

  2. 2019 · the redesign

    The 2019 redesign of Useful Words: a lighter two-pane layout with the bilingual category sidebar now split into finer functional groups (agreement, opposition, cause, examples, time) and roughly three times as many word entries.

    The redesign, lighter and roughly three times the size. I split the connectors into finer functional groups but kept the same way of organizing them.

  3. 2026 · mobile, under Human

    On a phone at last, one tap from the draft. Same structure as 2018, but for the first time it lived where the writing actually happened.

Three rebuilds The structure has not changed since 2018.

A bilingual tool has to read correctly in both languages, including out loud.

Every Chinese gloss is tagged so a screen reader switches voices instead of reading it as broken English.

The students here are already working in a second language, and some of them around dyslexia or attention differences, so a build that only works for confident readers would leave out the people who need it. The bilingual text was the hardest part to get right. A screen reader meeting Chinese inside an English page tries to voice it as English and turns it to noise, so every Chinese gloss is tagged as Traditional Chinese and the reader switches voices instead of stumbling.

  • Reachable by keyboard. Skip links open the tab order and focus moves through the page in a logical path with a visible ring, so nothing needs a mouse.
  • Results that speak. Run a search and a live region announces the result, so a screen-reader user hears that matches came back rather than guessing.
  • Calm by default. It respects the system settings for reduced motion and for dark mode, which matters for learners who find motion or glare costly.
  • Built on real structure. One main region, a clean heading outline, and labelled controls, so a screen reader can jump straight to a section instead of hunting for it by eye.

It clears an automated WCAG 2.1 AA audit with no violations, contrast included. The audit was only the baseline. What I was after was a student on a screen reader or a keyboard finding the next word as fast as anyone else.

Students use it to write. Then they find a use I had not planned.

The app-switching mostly stopped, and the shuffle die became a live speaking game I now use in class.

They reach for it mid-draft, which was the whole point. The app-switching that started this, the leaving and the lost thread, mostly stopped.

The better outcome was one I did not design. In class, the shuffle die turned into a speaking exercise. A student taps it, gets a word, and has to use it out loud, on the spot, in front of everyone. What I had built as a quiet writing reference became a game for talking, and that is now part of how I run a room. The tool is live and bilingual, and I use it in my own teaching every week.

It is not only mine now. The other teachers at Human use it with their own classes, and their feedback is what decides the next thing I add.

What I would do differently: I built a desktop app for a problem that lived on a phone.

I built for the platform I knew. The problem lived on a phone, and it took years to follow it there.

In 2018 I shipped a desktop application. It was the kind of thing I knew how to make, and it worked. But the moment I was designing for, a learner stuck in the middle of a sentence, was already happening on a phone, and before long it was happening nowhere else. It took me until 2026 to put the tool where the writing was. The container was never the value. I know I can still get closer to the work, because my students found the best use of the tool, the speaking game, before I did.