Matthew Lau

Matthew C Lau

DESIGN ENGINEER

I build free tools that replace the paywalled and the broken.

A designer with a CS degree, shipping them end to end — accessible by default.

Projects

Community tools, client work, and internal automation — built to replace what was paywalled, clunky, or missing entirely.

  • ollae — Create Event screen

    ★ Featured case study

    ollae

    Built for the weekly pickup volleyball games I organize, where the headcount lived in thumbs-up reactions across several group chats. One link goes into every chat and unfurls as an event card wherever it lands. Players add a name and see who else is going. The organizer types or dictates the plan; Claude fills in the event and picks the emoji for the preview. It still runs our games every week.

    Read Case Study Live demo Repo

    • Go
    • PostgreSQL
    • React 19
    • Claude API
  • Collette component library board — buttons, tour date rows, and tour cards with their token labels

    Design system · Collette Vacations

     Read Case Study

    Design system and booking-flow work across four brands. I built Collette's first Figma component library and brought Dev Mode to a 6–8 person development team, replacing Zeplin exports. Shipped tour, pricing, and booking flows shaped by 200+ usability tests.

    • Figma
    • Design Systems
    • Dev Mode
    • Usability Testing
    • Atomic Design
  • Kumon Grading Tools — browser extension popup

    Kumon Grading Tools

     Read Case Study

    Two Chrome extensions for Kumon's grading portals, which have no API. One clears the correction backlog by driving the UI directly: a multi-day manual queue clears unattended in about 25 minutes, and marking stays with the instructor. The other turns typed notes into pen strokes on worksheets, since writing legibly with a trackpad was impractical.

    • JavaScript
    • Chrome Extension MV3
    • Automation

    Repo

  • GTA RP Minigame Recreation — the ring, the E key, and three checkpoint markers

    GTA RP Minigame Recreation

     Read Case Study

    A rebuild of the button-mash ATM robbery from NoPixel, a GTA RP server most people can't get into. With no access to its numbers, I calibrated the difficulty from seven streamer clips and my own keyboard tests, which caught the audio analysis counting every press twice. Shared on Reddit: 626 runs from 249 players in 19 hours.

    • JavaScript
    • Canvas
    • Google Apps Script
    • itch.io

    Play it

Also built

How I Build

Every project I ship starts from a written spec and ends with a formal audit — built with Claude Code, tracked in Linear, with Figma in the loop when the UI calls for it.

  • /_ capture

    Capture, then triage

    Quick notes go into an inbox via a custom /capture command; a separate /triage pass drafts them as scoped Linear issues and creates only the ones I approve.

  • system.md

    Spec before code

    Every project starts as a version-controlled build plan, keeping the architecture and the implementation in perfect sync. This site was built that way.

  • ↳ linear

    Continuous momentum

    One isolated project per application, running on weekly cycles. Every repository maintains an active devlog to document progress and micro-decisions.

  • /_ audit

    UX as tooling

    Design quality and WCAG 2.2 accessibility compliance shouldn't rely on memory. They live in a repeatable /audit command that checks a build against my written standard (WCAG 2.2 AA, Core Web Vitals, and rules for AI output: editable, overrideable, uncertainty shown) and tiers findings P0–P2.

  • figma + mcp

    Design when the UI demands it

    Complex UI gets designed in Figma first — token-based variables that map directly to the codebase. Then Figma MCP hands off to Claude Code, which takes over implementation and keeps design and code in sync without manual translation.

Experience

  1. Freelance Design Engineer · MCL Studio

    Freelance design and development for small businesses in central NJ.

    Read Case Study

    • Rebuilt Edison Dental 27 from WordPress into Next.js for a returning client. 94 Lighthouse on mobile, 100 on accessibility.
    • Added a live open/closed indicator, hours the front desk can update without me, and the Schema.org structured data local search needed.
    • Next.js
    • TypeScript
    • Tailwind CSS
    • Upstash Redis
    • Schema.org

  2. Operations & Tooling Assistant · Kumon Learning Center

    I run the center's day-to-day with the instructors: 70+ students a week, parent communication, first-line Kumon Connect support. The two extensions below came out of doing that work.

    • Built a Chrome extension that clears the correction backlog in Class-Navi, the grading portal, by driving the UI directly, since the platform has no API. Marking stays with the instructor. About 7 seconds a worksheet, so a multi-day manual queue clears unattended in roughly 25 minutes; in use since June 2026.
    • Under the hood: a synthetic-event helper so Angular's change detection accepts scripted clicks, and a bulk mode that re-scans the gradebook after each worksheet so it survives re-renders.
    • Built a second extension that turns typed hints into pen strokes on Kumon Connect worksheets, since writing legible notes with a trackpad was impractical. In daily use when grading online.
    • JavaScript
    • Chrome Extension MV3

  3. UX/UI Designer · Collette Vacations

    Designed Collette's marketing and booking flows across four brands, and built the design system the rest of the team worked from.

    Read Case Study

    • Built Collette's first design system in Figma and introduced Dev Mode to a 6–8 person development team, replacing Zeplin exports and hand-drawn spacing diagrams as the handoff artifact.
    • Designed tour, pricing, and booking flows across four brands, including Compare Tours (2023).
    • Ran 200+ UserTesting sessions with Collette's 55–65+ buyer, including nine head-to-head studies against seven competitors, and presented a findings deck for each study.
    • Figma
    • Design Systems
    • Dev Mode
    • Usability Testing
    • Atomic Design

  4. Freelance UX/UI Designer

    • Consulted with EY Design Studio; delivered high-fidelity prototypes for internal Morgan Stanley tools.
    • Designed Forecastagility, a data-viz tool, in a Vue.js/Vuetify environment with Infinite Corporation.
    • Led the original Edison Dental 27 site build in WordPress and Elementor. Later rebuilt it from scratch in Next.js (see MCL Studio above).
    • Prototyping
    • Vue.js
    • WordPress
    • Data Viz

  5. Freelance Graphic Designer

    • Curated Amazon product imagery for Aduro Products (100+ products, Photoshop).
    • Produced on-air graphics for News 12 New Jersey.
    • Photoshop
    • Brand
    • Production

  6. B.A. Computer Science · Rutgers University

    Three years on the university's Sakai LMS help desk while a student.