04 · Coding

Brand ideas, built into websites people can actually use.

Public interfaces, prototype evidence and delivery structure show how each project is designed, built, validated and operated.

Live and prototype work are labelled separately. Nothing behind a login is inferred or reconstructed.

01Digital product case

Aii — A living digital brand system.

A multilingual brand site and independent operations platform that connect editorial content, services, appointments, enquiries and commerce-ready workflows.

Role: Web Coding lead — front-end experience and back-end product delivery
Status: Live public website

Visit AII

01 / Live brand experience

One device. Five product stories in motion.

Move, scroll or use the keyboard to explore brand, commerce, product, service and editorial work in one real interface.

Visit AII

One product language

From entering the brand to understanding, choosing and acting.

01Brand experience
The public entry connects narrative, navigation and three language routes in one moving surface.
02Editorial commerce
Products are discovered by intention, with the range and its limits explained before the catalogue.
03Product ritual
Gallery, material facts, availability and use guidance unfold as one credible product story.
04Guidance & services
The Book of Life, consultation context and appointment expectations form one guided route.
05Editorial system
Articles turn brand knowledge into an ordered reading path rather than a disconnected feed.

司南造物 · Three-surface Web System

A live digital service system for the 司南造物 brand, spanning a member experience, an employee workspace and an operations console for commerce, member relations and governance.

Live production project

Entrypoints: Member site · employee workspace · management console
Core domains: Commerce · members · operations · permissions
Status: Live three-sided web product

Visit member site

NFC IDENTITY LOOP

From one tap to a two-sided business loop.

Nine key states automatically connect NFC verification, transaction completion and merchant operations in the real business order.

01 / 09

验证入口 - 碰一碰引导

c-01-verify-entry

System map

One business system, three role-specific surfaces

The system does not expose one generic admin interface to everyone. Each surface is organised around its user: members verify and access services, employees handle day-to-day work, and operators govern products, orders, membership and system rules.

Interface
Service
Data

01Interface · Member

Member surface

Brand content, bracelet verification, marketplace access and member services in a mobile-first flow.

Entity relationships

02Interface · Employee

Employee surface

A focused post-login workspace for lookup, entry, handling and operational collaboration.

Status transitions

03Interface · Operator

Management surface

Products, orders, members, points, staff, batches, tenants, risk, audit and configuration.

Validation and action feedback

04Data

Shared business state

Stable entity relationships, status transitions, validation and action feedback connect interfaces to services and data.

Delivery trace

Work completed, tied to something you can check.

Member experience

SYS 01

Translated the brand into an approachable browsing and member-service experience, with clear content hierarchy, action paths and mobile interaction rhythm.

Employee workspace

SYS 02

Organised post-login tasks around predictable feedback and real operating flows, reducing the learning cost of lookup, handling and collaboration work.

Management console

SYS 03

Implemented scalable information architecture and high-frequency management patterns for products, orders, members, points, employees and configuration.

Governance flows

SYS 03

Used lists, detail views, filters, batch actions, status labels and approval paths to make operational state, rules and exceptions actionable.

Data coordination

SYS 04

Mapped interfaces around members, goods, orders, points, staff, batches, tenants, risk records and audit logs to support stable service and database integration.

03 / 03

High-fidelity prototype · Interactive case

Artist Private Member Infrastructure

A high-fidelity four-surface product prototype connecting membership, official content, artist events, eligibility draws, external ticketing, on-site verification and exception handling.

Scope: 4 surfaces · 726 page and state records
Evidence here: 60 selected screens · 7 core journeys
Status: Prototype presentation · not claimed as launched

01/07

Identity before access

Scroll / click / arrow keys

01 · Identity before access

One home, five membership conditions.

Guest, L0, active, expired and suspended states change access and next actions without changing the product’s underlying navigation.

State model

Membership is a live capability, not a decorative badge.

Proof

The full-screen code turns status into an inspectable on-site credential.

01 / 03

02 · Content becomes a service

A feed expands into an owned archive and live room.

Editorial, audio, video and livestream formats share one access language while preserving the behaviour each medium needs.

Continuity

Discovery, archive and live participation stay within one member journey.

Boundary

Locked and available states explain access without turning membership into a vague promise.

01 / 03

03 · Events are primary

Every event has time, place and participation state.

Concerts, signings and member sessions are separated from content and organised around what a member can do now.

Information architecture

The event remains the object; a draw is only one action inside it.

Readable timing

Upcoming, open, closed, active and ended states produce explicit next steps.

01 / 03

04 · Concert priority draw

Winning grants purchase eligibility—not a free ticket.

Eligibility, entry, draw result, confirmation and the external ticket purchase remain separate, auditable states.

Promise design

A successful entry means joining the pool; it never implies selection.

Credential

The result becomes a time-bound purchase code with a traceable status.

01 / 03

05 · Signing draw

A similar draw resolves to a different credential.

The draw shares eligibility and audit logic with concert priority access, but its outcome is an entry credential for a selected session.

Shared capability

Eligibility and draw infrastructure is reused without collapsing two business meanings.

Session integrity

The selected session follows the member from entry through verification.

01 / 03

06 · Account as state console

Applications, results and credentials remain distinct.

The account gathers a member’s activity history without flattening different records into one generic order list.

Retrieval

Every record answers both “what happened?” and “what can I do next?”.

No substitution

Membership, results and credentials never stand in for one another.

01 / 03

07 · On-site verification

The service survives queues, weak networks and repeats.

The staff H5 keeps scanning, feedback, offline handling and later synchronisation inside one accountable shift workflow.

Resilience

Offline work is explicit and recoverable instead of silently losing records.

Audit feedback

Success, failure and duplicate scans remain visible to both operator and ledger.

01 / 03

Selected client work

Live websites, extended collaborations and client feedback.

These projects are separated from fictional concept work. Each record states my actual role, delivery status and the evidence available.

01Live client website

HYYH CPA

Role: Frontend design contribution and coding
Outcome: A bilingual public website for a U.S.-registered cross-border accounting firm.

Visit live website

02Delivered client website

Perinade

Role: Frontend design and coding
Outcome: The site was delivered directly to the owner, who expressed strong satisfaction with the result.

Visit live website

03Live work · extended collaboration

TLXIC

Role: Frontend design and coding, brand identity, logo system and packaging
Outcome: The initial website engagement developed into a wider brand collaboration, including a complete identity system and packaging now in use.

Visit live website

04Live work · extended collaboration

Sparkle Gymnastics

Role: Website design and brand design
Outcome: A public website for a Singapore gymnastics academy; the successful launch led to continued collaboration.

“You’ve got the style of your web design spot on. Full marks for creativity!”
Client feedback · Sparkle Gymnastics

Visit live website

05Live · operating for two years

Rental Roller Skates

Role: Website design and build
Outcome: A multilingual B2B product website that has remained in active operation for two years.

Visit live website

Next step

Tell me what your brand needs to make next.

Share the brand, users and job the website needs to do. I will map the public experience, interaction and delivery evidence before implementation.

Discuss a project Review all work first