Context
Overview
Cieden Time is the app a design agency runs its billing on. All team members log hours against projects, and the timesheets that come out the other end become client invoices.
It was built desktop-first and had grown feature by feature — timers, projects, expenses, leave, reports — into the system the agency’s revenue runs through.
My Role
As a design engineer I owned the whole arc: competitive research, UX audit, interaction design, and every line of the frontend implementation. The backend engineer owned the data layer, auth, and deploys, and reviewed my pull requests. Anything that needed a server-side change I documented for him.
Day-to-day, that meant benchmarking, heuristic audits, mockups, and a written spec for every change, then implementing with Claude Code behind two review gates and shipping scoped commits as pull requests into staging.
Problem
The product had no shared component layer. Every screen invented its own patterns — the same table rendered three ways, the same filter control in four positions. AI-generated code produces plausible, working screens fast, and has no opinion about whether screen four matches screen one, or what happens when a request fails. Those are product decisions, and they hadn’t been made yet.
Goals
Make the app dependable enough that the team can rely on it.
Four things, in order: benchmark it against the six competitors so findings can be scheduled rather than argued; systematise the patterns, because screens that each invent their own can’t be made accessible or responsive one at a time; rebuild every core screen for a phone, at WCAG 2.1 AA; test the flows end to end.
In an app that produces invoices, any bug is a billing bug.
UX Research
User Interviews
Placeholder — user interviews plus a competitor audit to ground the design direction.
Components & Patterns Library
Placeholder — low-fi sketches through iteration rounds to an interactive Figma prototype.
Competitive Analysis
Placeholder — moderated and unmoderated sessions validating the design, with guidelines documented for handoff.
Outcome
Placeholder outcome. Measurable results, shipped scope, user feedback.