Back to home
Back to home

04 / Projects

Selected work

Product definition, design, AI collaboration and personal tools: each project connects the problem, my decisions and the delivered scope.

01

Launched 2026.08

Sippa

Creator tipping

Defined, designed and built solo; later led a team of three

02

Launched 2026.04

In-store Checkout

Crypto payment experience

Solo concept, UX/UI, build and on-site rollout

Agent Dashboard

03

Personal project · Ongoing

Agent Dashboard

Personal project operating system

Product judgment, agent orchestration and operating guardrails

04

2026

AI model research

AI model sourcing

Supply mapping, terms review and integration decisions

Definition · Delivery · Team iteration

Sippa

Fans can open a creator's page without signing up, choose a drink base, toppings and foam, and leave a note. After supporting, their one-of-a-kind drink stays on the creator's wall.

Visit Sippasippa.me · The product is live and can be opened now

My responsibilities

Solo phase

Product definition, UX/UI and full-stack delivery, carried independently through to launch.

Team phase

Once the product had taken shape, forming and leading a three-person team through continued iteration.

Automation extension

After launch, I continued to design and orchestrate automations for product improvement, content preparation and creator research; publishing and external outreach remain human decisions.

Solo delivery and later team contributions are separate parts of the work.

Method illustration · Not a product interface or execution record
  1. Define the core task
  2. Deliver a coherent release
  3. Organise team iteration

How Sippa turns support into co-creation

Public product experience · no admin view, transaction record or internal roadmap
  1. Open the creator's page

    Fans do not need to sign up.

  2. Mix a base, toppings and foam

    Each supporter makes a different drink.

  3. Write a note and support

    The message and support happen in one action.

  4. The drink lands on their wall

    The support becomes something recognisable and lasting.

Turn a tip into something made together

Supporters do not begin with payment terminology. They choose a base, toppings and foam, then add a note. Payment still completes the support, but the visible task becomes making a drink with the creator in mind.

Give every act of support a recognisable form

Every supporter makes a different drink, which stays on the creator's wall with their note. Support is represented by more than an amount; it becomes something the creator can recognise and keep.

Delivery and responsibility

Launched in August 2026. The project reflects my ability to define a problem, deliver a product and lead a team through continued work.

Company project · Crypto payments · Hong Kong merchants

In-store Checkout

Launched 2026.04Physical merchants in Hong Kong

Physical shops needed to accept crypto through a familiar QR payment flow, without another terminal. Customers use their own phones; staff confirm the paid screen with a one-sentence operating instruction.

My contribution

  • Solution and UX/UI

    Independently designed the solution and experience, defining the buyer and staff roles.

  • Build and integration

    Built the solution and connected the company's existing crypto payment capabilities.

  • Rollout and follow-up

    Handled merchant setup, on-site deployment, and account and payment follow-up.

Two key decisions

Build a cheaper POS terminal, or remove new hardware entirely?

Another terminal
Printed code and buyer's phone

A static QR: the customer scans and completes payment on their own phone; staff only confirm the paid state.

Removing the terminal also moves responsibility: staff quote the price, customers enter it, and staff check the paid screen. The design must account for mistakes at those hand-offs.

Zero new hardware and a repeatable same-day deployment flow.

Hand off after building, or walk into the shop and deploy it myself?

Built solution
Verified on site

Handled account configuration, QR placement and the first live payment in person, then continued following up on merchant accounts and incoming payments.

Deploying at the counter lets me check that the account, QR code and staff instructions work together.

Completed in-person merchant onboarding in Hong Kong and proved the deployment flow repeatable.

From merchant setup to follow-up

  1. Account setup

    Completed merchant onboarding and account configuration.

  2. QR placement

    Placed the static code and explained the staff workflow.

  3. Payment verification

    Verified the first live payment on site.

  4. Follow-up

    Followed up on merchant accounts and incoming payments.

The decisive product choice was not a better terminal. It was removing the terminal from the system.

Independent demonstration

I independently created the following market-stall demonstration to illustrate a general scan-to-pay flow. It is not the company's product interface or prototype and does not show company code, internal material or real transactions. The brand, setting and amount are illustrative; no payment service is connected.

One printed code. One buyer's phone.

STALL

Enter the vendor's quote

HK$0.00
Review and open wallet

Market stall · fictional transaction

01 / 05

Scan the stall code

A printed code is the vendor's entry point; the buyer uses their own phone.

Playing

Agent Dashboard

Personal AI workspace · Product design and agent coordination

I turned the challenge of managing multiple AI-assisted projects on my own into a working project command center.

Projects break into goal-driven tracks, agent work connects to tasks and deliverables, and decisions needing my attention stay visible. This lets me focus on priorities, design judgment and acceptance rather than repeatedly chasing status.

My responsibilities

I lead product definition, information architecture and interaction design, coordinate AI-assisted implementation, and review outputs and usability. The project connects identifying a personal workflow problem with designing, building and refining a working solution.

Running Agent Dashboard overview with navigation, daily focus, learning and project status using example data
Original project running locally · Example data

How it helps me manage projects

Not just how much an agent has done, but what needs to move next, where my judgment is needed and where the result can be checked.

Set the weekly priorities

Weekly priorities, deadlines and stalled work share one view. I decide what deserves attention before opening a project, instead of searching individual conversations for progress.

Today’s focusAgent Dashboard

This week’s delivery plan

Design review · Friday

Portfolio redesign · Finish and review the core case studies.

  • Case-study information architectureWedIn progress
  • Public scope for project assetsThuReview
  • Mobile layout reviewFriIn progress

Organize delivery into tracks

Each track names its goal, supporting agent and current progress. I can see which part needs attention without treating a finished task as a finished project.

Project trackAgent Dashboard

Personal portfolio / Experience redesign / 2 of 5 milestones complete

40%

Case-study experience design

Connect project context, design decisions and delivery evidence in a reviewable page.

CollaboratorInteraction-review agent
Next

Review the mobile hierarchy and set the revision priority.

How I adapt it to the way I work

I brought everyday friction into the workspace: discussing a project, opening a local page and finding a file, with fewer trips between chat, terminal and folders.

Talk to AI without leaving the project

An embedded conversation carries the current project's context. I can ask a follow-up or assign the next step without switching windows and explaining the background again.

Project chatAgent Dashboard

Talk to AI in the project

Current context · Portfolio redesign

Me

What should I improve first on this case study?

AI

Add the design decisions, then review the mobile hierarchy.

Continue in context without explaining the project again.

Launch a local preview when I need it

The workspace handles the project command, readiness checks and browser opening. Waiting and failures have clear status feedback, so I do not have to find the folder, open a terminal and remember the port each time.

Local previewAgent Dashboard

Open localhost from the project

Personal portfolio · Local run

  1. 01
    Read the project launch settings

    Identify the declared development command

  2. 02
    Start the service and wait

    Show progress and return a reason on failure

  3. 03
    Open the local page

    Enter the browser only after the service responds

http://localhost:3000Example address

Ask for the file, not its path

I describe the file in the project conversation and ask AI to locate it in context and return its path. This is a use of project chat, not a separate file-management system.

File searchAgent Dashboard

Find files without memorising paths

Locate files through the project conversation

Me

Where is the case-study requirements document?

AI

It is in the project docs, with the page structure and acceptance criteria.

Case-study requirementsdocs/case-study.md

Illustrative conversation and path · No private file contents

The overview shows the original project UI running locally with example data. Detail cards are reconstructed mockups; conversations, addresses and paths are illustrative. Personal accounts, private files and real execution logs remain excluded. No online trial is provided.

AI model
research

I researched external AI model supply, reviewed conditions of use, and compared integration routes and cost frameworks to support selection decisions.

My scope of work

Five questions for model selection

  1. Map the supply

    Organize available models and their providers into a comparison framework.

  2. Review conditions of use

    Check whether the proposed use fits the available terms, and record questions that remain open.

  3. Compare integration routes

    Consider the route to integration and the dependencies it introduces.

  4. Clarify provider contacts

    Separate published information from questions that require provider confirmation.

  5. Align cost assumptions

    Compare pricing on consistent units and stated assumptions.

Research method

Turn information into a supported decision

My work goes beyond collecting model names: I check sources, compare conditions, and separate supported findings from open questions to inform selection and follow-up.

This page outlines my responsibilities and general research method only.

A continuing body of work in payments

Across requirements, experience design, technical coordination and delivery.

  • 01RequirementsTurn a problem into actionable scope
  • 02ExperienceClarify states, feedback and recovery
  • 03CoordinationAlign dependencies, interfaces and responsibilities
  • 04DeliveryCheck the outcome and follow through