UX/UI design + directing AI-assisted implementation

App About Words: app for learning words via collocations

Problem

There isn’t a convenient way to learn new English words in combination with the words they’re most commonly used with. I noticed this need among myself and other students in the International English Speaking Club. The teacher who was asked this question said she didn’t know of a convenient way to do this specifically.

Design a clear, low-friction flow for adding and reviewing vocabulary, and build a design system precise enough that an AI coding agent could implement it accurately without a developer translating intent by hand.

App About Words lets you add any word, instantly see suggested collocations for it, and study that word together with its collocations as one connected set — organized by folder, not a flat deck.

Solution

Project goals

In-depth interviews

UX/UI design + directing
AI-assisted implementation

UX/UI design

Make it easy for users to explore the collection and complete purchases online.

I designed a 4-step sequential onboarding wizard to guide users through account creation, data availability, legal consent, and dataset upload. The goal was to structure a complex, compliance-driven process into a clear and manageable flow.

In-depth interviews

I created detailed flow diagrams for steps of wizard to clarify conditional logic and edge cases. This helped ensure correct implementation and reduced back-and-forth during development.

Process

Flow & Logic

Design Decisions

Claude Code

Developer

UX/UI design

I reviewed the existing market (flashcard apps, collocation dictionaries, and AI translators) to see if any app already met my request, and what alternatives existed. Collocation apps do exist, but they work with a static word base, so I didn't consider them, since the goal was to learn a specific word in context, not just fixed collocations.

In-depth interviews

Research

Flow & Logic

I sketched rough wireframes for every flow. Claude Code turned them into a working draft prototype. It then exported the whole thing back into Figma as clean, named frames, structured so we could apply the visual style directly on top.

Draft Prototype

UX/UI design

I built a two-layer token system in Figma: raw primitives, semantic aliases (surface.primary, color.error), and fully specified components with variant axes for size, state, and icon. Every component shipped with a JSON spec, so implementation could be verified against an exact source of truth rather than a screenshot.

In-depth interviews

Design System

Flow & Logic

UX/UI design

The visual style is inspired by Bauhaus principles: bold typography, no half-tones, function over decoration, a strict grid, a minimal color palette, clean geometric shapes.

In-depth interviews

Visual Style

The typeface, Onest, is a strict geometric grotesque, made highly readable and modern thanks to features built in by its creators. Its stylistic alternates make certain characters more distinct specifically in UI contexts: labels, buttons, and card text that stay readable at small sizes without losing their strict, geometric character.

This was a deliberate choice against the current wave of glassmorphism and similar trends. A hundred year old design language isn't something to be embarrassed about using, it's a foundation that still works.

I’d strongly recommend her for any product, UX, or UI design role.

Prototype

Built a complete, production-ready frontend (35+ screens, authentication, CRUD, localization) in 17 vs. 30–45 days estimated by a developer for a classic design-to-dev handoff. The design system removed the need for a frontend developer during prototyping; a developer is only needed for backend integration, currently in progress.

Result

I developed this "diagnose first" habit independently, asking Claude Code to explain the root cause before fixing, and afterward asking what exactly was wrong and why. It turned out to align with an emerging best practice for working with AI coding agents.

Reflection