I design enterprise products and build their UI, from a working prototype to merged code.

Twelve years designing internal platforms, CRM and operations software. On Hanlun’s DSE practice platform I built the working Next.js prototype, then contributed frontend code to the production React and TypeScript apps through pull requests merged by the team’s engineers.

See the implementation evidence Product design work

Production frontendShared components, Storybook stories and unit tests in Hanlun’s student and teacher apps

81 merged pull requestsMerged by the team’s engineers, February to October 2026

Working prototypeA Next.js app of the student and teacher views, before and alongside production

12+ years in product designSenior UI/UX Designer at Oursky since 2016

Hanlun e-Learning2025–2026Implementation evidence

Three merged changes in Hanlun’s production apps

The passing rate an attempt was judged at

Problem: Teachers can change a quiz’s passing rate, and earlier attempts keep the rate they were judged at. Both apps needed to show that rate with each attempt, the same way for students and teachers.
I implemented: Another engineer stores each attempt’s rate at submission. I exposed that stored rate to both apps and placed it beside every attempt: an always-visible pass or fail pill, with the rate next to the submission time, for students and teachers alike.
Behaviour: History stays correct. A new rate only applies to attempts submitted after it, and a unit test pins attempts to their stored rate, not today’s.

Reconstructed demo · synthetic data

Rate for future attempts

View as

Attempt 1Fail45%Passing rate 50%8 Jul, 14:05
Attempt 2Pass55%Passing rate 50%11 Jul, 20:30

{ score: 55, passRateAtSubmit: 50 } — the latest attempt as both views receive it. Future attempts are judged at 50%; earlier ones keep their own rate.

Try it — set a new rate, submit an attempt, switch between the student and teacher views, then reset.

A reminder only iPads see

Problem On iPad, a resting hand or Scribble could interfere with handwriting on the answer and marking pages.

I implemented An iPad check, including iPadOS Safari that reports itself as a Mac, and a shared reminder used on both pages, in two languages.

Behaviour Dismissal lasts for the browser session. The pull request calls it an interim fix: a device setting, not a canvas change.

One theme per subject

Problem Each subject has its own brand colour, and a student or teacher can switch between courses.

I implemented A theme provider driven by the course’s subject, seven palettes on shared CSS variables, and Storybook stories that check text contrast.

Behaviour A subject with no mapping falls back to the default theme; one palette was adjusted to meet WCAG AA.

Read the implementation story

Design to code

How a new feature reached Hanlun’s production codebase, and which code lived where.

MeDesignflows and screens in Figma
MePrototypea working Next.js app, Cursor-assisted
MeBuildUI and states as Storybook stories and in the apps
MePull requestopened by me, with screenshots
TeamReviewscreens reviewed in the thread
EngineerMergeafter CI passes

PrototypeNext.js and React: one app, with the student and teacher views switched by URL. Behaviour gets tried here before it’s built for real.

ProductionReact on Vite with TypeScript: two apps sharing a component package and an API client generated from the backend’s schema. My pull requests landed here.

ReviewStorybook stories for the states, unit tests with logic changes, screens discussed in the pull request, and an engineer merging after CI.

This siteThe demos on these pages are reconstructions in this portfolio’s own React, with synthetic data. Hanlun’s code stays private.

Product design case studies

These open the product-design portfolio: the rules, roles and workflows behind the interfaces.

Swire PMP2022–2025Enterprise rules, roles and workflow: work orders with seven types on one lifecycle, prospects and the stacking plan.Case on request Swire CRM2020–2024One loyalty system for four malls: receipts checked against OCR, redemption at the desk, tenant reimbursement with sign-off.Hanlun e-Learning2025–nowThe product case behind the implementation story: DSE practice for students and teachers, from the printed paper to the screen.Crew Quest2026A 90-day onboarding journey and manager dashboard for frontline staff at a global burger chain in Hong Kong.Case on request

Hiring for design engineering? Write to me.

chi429@gmail.com LinkedIn Résumé (PDF)