Hermes Task

Overview

How do you make an office say who works in it?

The faculty of the Academy of Interdisciplinary Studies (AIS) invited me to collaborate on an office renovation. My brief was to refresh the brand of its Division of Integrative Systems and Design (ISD) and translate the division's story into large-scale wallpaper, in the two months from May to June 2026.

Problem

A logo cannot cover a wall.

A logo works small and at a glance. A wall is seen every day, from across a corridor and from a step away. ISD needed a system that could repeat, scale up to a room and still mean something up close.

Approach

Everything grows from one dot.

I took the dot from the core geometry of the ISD logo and anchored the entire system on it. Three rules shaped every layout:

• Dots

  The basic unit, taken from the logo: people in ISD connect the way the dots do.

• Breath

  A restrained composition for an ambient space, so the layout breathes and flows.

• Storyline

  Patterns set in a deliberate sequence that invites people to pause and read.

A single dot is one person. Set side by side, dots form a shape. Given different sizes, they show that every person brings a different strength.

When different dots come together, they make a pattern no other group has: a fingerprint, the DNA of ISD.

Storyline

The story is told in four chapters.

• Diverse

  A global collective from many cultural backgrounds.

• Connect

  Unique perspectives converge and radiate like ripples.

• Unite

  Distinct energies merge into one ripple: a shared vision.

• Action

  Layered halftone silhouettes of a team sprinting together.

Graphics

Each chapter also stands on its own.

Taken out of the sequence, every chapter works as a single graphic, ready for a wall, a screen or print.

Stamps

The same dots work at the size of a stamp.

Series 1 celebrates ISD itself: founded in 2017, ISD Works, and Innovation, Design, Tech. Series 2 turns the four chapters into a numbered set of four.

In the space

From the screen to the wall.

In AI mockups of the renovated office, the dots run along the corridor past every door and gather around the ISD mark at the entrance.

The Series 1 stamps also went to work as photo props at the HKUST InnoBay Bootcamp.

Present Slides

Figma Link

Overview

How do you keep someone booking when they arrive from a link in bio?

Booking sites are rarely opened in the visitor's default browser. They arrive from a referral link or a link in bio, inside a social app, where traditional logins and saved booking details do not follow them, and that drives people away. This analysis looks for a booking flow that holds their attention without sending them to other screens to prove they are human or to sign in.

Problem

The booking site did not look like Bowtie & JP Health.

The first thing I noticed was the gap between the booking site and the official site. The booking flow ran on third-party software, so it lost the brand the moment a visitor pressed Book.

So I focused on making the experience feel human and premium again through three things:

• Brand

  Bring the booking flow back in line with the official site.

• Copy

  Say less, and say it the way the brand speaks.

• Progression

  Guide people one clear step at a time.

youtu.be/xelvpnC-hPI

Phases 1 and 2

First, a clearer flow with less on each screen.

With the problem named, I redesigned the flow: better guidance at each step, and no redundant information.

Phase 3

Then the harder question: what if they come from Instagram?

A visitor arriving through social media has to type their details all over again. So I explored keeping verification inside the page, with a built-in CAPTCHA instead of a trip to another screen.

Prototype

The flow on desktop and on a phone.

Desktop, when a login is required:

Mobile:

Trade-off

We kept the login.

Every step removed makes booking easier, but the clinic still has to know each booking comes from a real person and not spam. So the final flow keeps the login, and puts the effort into making everything around it shorter.

Outcome

A quarter less scrolling on a phone.

25%

less page scroll on mobile

Overview

How do you make manufacturing feel like creating?

Kedonia makes custom plush toys on one promise: everyone can be an IP creator. In a team of ten, I designed its identity, its product flow and its website.

Problem

Between an idea and a plush sits a long production cycle.

A plush runs from the first sketch through production to the final delivery, and the person with the idea sees almost none of it. The job was to turn that complex cycle into a creative flow they could follow from start to finish.

Brand

The brand became a mascot, not a wordmark.

My first direction was a professional, bold logo set in text. Then the obvious question: if we are a plush creative and manufacturing company, why not build an IP ourselves? So the brand turned into a search for our mascot.

AI plush generation

From an idea to an order in under two minutes.

Customers generate a plush with AI, iterate on it and order it in one flow, turning curiosity into conversions.

• Generate

  Describe the plush and get a design.

• Review

  Iterate until it looks right.

• Confirm

  Choose size and quantity, and place the order.

• Done

  The order is in.

Landing page

Manufacturing sites are boring. This one should not be.

Kedonia sits between a creative studio and a manufacturer, so the site has small, delicate interactions everywhere, even in the FAQ.

Overview

What does a premium wellness marketplace need, starting from a name?

Neardeal came to me with only a brand name and a bold vision: to be the next Klook for the beauty industry. In a team of five, I built the branding, the website and the product UI from scratch.

Problem

Premium wellness had no platform that worked for both sides.

The premium beauty and wellness sector had no digital home that could give customers a high-end experience while solving the merchants' day-to-day operations. That meant two problems at once:

• Customers question the value

  Premium prices need a premium, frictionless booking to justify them.

• Merchants drown in operations

  Rigid pricing empties off-peak hours, while schedules, copy and video all compete for time.

Brand

The logo is a journey, drawn as a leaf.

The logo begins with a leaf, for wellness, nature and growth. Woven into it is the initial N, which also traces an upward path: each user's own wellness journey, a personal line of progress. That path points to a small star at the peak, for the guidance of AI at the core of the platform, which takes repetitive work off staff and offers insight.

Solution

One marketplace, designed for both sides.

Neardeal is a two-sided marketplace that uses data to serve customers and merchants together.

For customers, a premium, intuitive interface with dynamic pricing that fills off-peak hours, giving users better value and merchants better yield.

For merchants, an AI-integrated dashboard that optimises schedules and handles marketing: it writes package descriptions that convert and helps edit authentic, real-world video quickly.

Product

Three apps, one for each person in the booking.

Customers

A deal app that still feels premium.

Deals are a large part of the vision, but the beauty industry expects a premium atmosphere, so every button, colour, card and animation is made to delight at first touch. Friction is designed out, like the three-step "book first, pay later" flow, to lift conversion.

Merchants

A dashboard you can learn without training.

A dashboard does not have to be complex or stuffed into panels. Most staff are not confident with computers, so the dashboard has to explain itself, need minimal training and prevent errors. I chose the copy carefully and tested several variations with real users.

Staff

Everything at a glance, nothing to mis-tap.

The staff app's home page is free of distractions: one main action and large text. Staff confirm a booking with a slide gesture, so it cannot happen by accident.

Overview

How do you make a seat with a CEO worth competing for?

Melo Portal is the membership app of Project Melo, a community that connects students with like-minded peers and CEOs. Members earn tokens and bid them on events. I designed the portal in a team of four.

Research

We started by asking half the community.

Before designing anything, I interviewed 89 members, half of everyone in Melo. Two questions came out of it and shaped the whole portal:

How do we make bidding exciting the moment an event opens?

How do we make members feel the prestige of belonging?

So I spent the time on the two experiences that answer them:

• Bidding

  Make competing for a seat quick and a little thrilling.

• Membership card and tokens

  Make belonging feel premium.

Bidding

Slide to bid beat every other input.

I iterated through a number pad, a counter, a plain input field and more before settling on slide to bid. It lowers the effort of bidding, and it does three things the others could not:

• See what is left

  The slider shows the share of all tokens remaining.

• See the floor

  The minimum bid is visible at a glance.

• Barely type

  One gesture is the whole input.

Membership card

The card is the membership.

Vertical cards were the trend, so I iterated on a vertical design and invited members to give feedback on each version. Dark blue and orange carry the core Melo brand and give members an identity that feels premium.

Membership card iterations.

The token claim flow and the final membership card.

Outcome

Conversion rose 340% after launch.

Members praised the portal for how easy it was to use and how it looked.

340%

rise in conversion after launch

89

members interviewed, half the community

Visit Incipe Academy

Overview

How do you get a beginner from an idea to working hardware?

Incipe Academy teaches hardware to beginners. Incipe Workspace is its desktop app: describe what your hardware should do, and an AI agent plans the board, writes the firmware and shows every live connection in 3D. I designed and built it.

Problem

One sensor took six steps before you could build anything.

Most beginners give up somewhere in this list, long before they reach their idea. And both paths still end in the same place: the application logic is the part they actually came to write.

Solution

Incipe cuts it to two.

Snap the sensor into Incipe Board, then read it with one line of code using the Incipe libraries. Incipe Workspace mirrors every live connection on screen, so learners see the effect of each change the moment they make it.

US$48K

revenue in the first three months

80K

social media views in three months

Top Performer

HKSTP Incubation 2025

Onboarding

Unboxing the board is a moment worth marking.

Someone opening Incipe for the first time has just unboxed a new board. So the first run treats it as an occasion rather than a settings form: "Build it." on a black screen, the Incipe mark resolving out of a blur, then the mascot saying hello. Only then does it ask you to plug in your board and pick a project, and it hands you straight into the workspace.

Live preview

You see the board connect before you have to trust it.

With hardware, the first doubt is always whether anything is connected at all. Visibility of system status is one of the oldest rules in interface design, and here it is the whole point. The board preview is a live 3D model of the real board: plug in a sensor and it appears in the slot it is actually in, labelled with its port, while the connection panel beside it shows the USB port that was found. Nobody has to guess, and nobody has to read a log.

Craft

Every default I caught became a rule.

When AI writes most of the code, the interface drifts toward defaults: a card inside a card, three dots at the end of every label, a coloured stripe down the side of a box. None of it is a decision. It is what you get when nobody decides.

So I kept a running log. Every time I caught a default, it became a written rule, and most rules became a test that fails the build if the slop comes back. A few of them:

• One thing gets one surface. A field that is already a card does not get another card around it.
• Text that runs out of room fades out. It never ends in three dots.
• Status glows softly at the edge. It is never boxed in by a hard outline.
• No accent stripe down the edge of a box. It is decoration pretending to be information.
• A row of controls reads as one object: everything the same height, and the gaps tell you which buttons belong together.

Panels

Panels follow your hand, not a timer.

The side panels open and close by dragging their edge, and the panel goes wherever the pointer goes. Drag past the edge of the window and back without letting go, and the panel is still there. Nothing is decided until you let go.

• Opens at once

  I cut the entrance short. In a tool people use all day, a panel should be there the moment you ask for it.

• Warns before it closes

  Pull a panel too far and it starts to lean away and fade, as if it is about to leave. Ease off and it settles back.

• Comes back from the edge

  Hover the sidebar button to peek at your projects without docking the panel. Hover the left edge of the window and a tip shows a click brings it back.

A closed panel is never far away. The smallest tug on its edge brings it out right under your hand, and a click puts it back at the width you left it. There is no seam line to hunt for, only a small grip that grows while you hold it.

Press

Everything you can press, presses the same way.

Press anything in the app and it gives a little under your finger, like a real key, and dims as if you are holding it down. It is a dip, not a drop, and nothing floats up just because you hovered over it.

Letting go of a list row has a tiny bounce to it, the only spring in the whole app, so a release feels like letting go of something. Menus work like the ones on a Mac: press to open, slide to your choice, release to pick. They arrive the moment you ask and leave with a quick fade.

Sensor snap

A plugged-in sensor arrives on screen with a click.

Plug a module into the real board and you watch it happen on screen. The module drops into its slot on the 3D board, gathering speed as if it were falling into place, and lands exactly where it sits in your hand. It dips and springs back like a click, a puff of copper sparks bursts out, and its light comes on.

You hear it too. The click is made fresh every time rather than played from a recording, and it stays low and soft, closer to a knock on wood than a beep, so it feels like touching something rather than being alerted.

Board connect

The board lands in the header as a wave of dots.

When the board connects, its 3D model spins into view and then flies up into the Board button in the header, so you see exactly where it went and where to find it again. As it lands, a ripple of dots spreads across the button.

That ripple replaced a copper outline flash, exactly the kind of hard outline the rule log bans. The dots do not zoom towards you. They were there all along, uncovered by a widening ring. The mascot plays the same ripple, so the two feel related.

Agent

The agent is a companion that points, not only a wall of text.

Learning to code alone is lonely, and a long reply is easy to skim past. So the agent comes with a mascot: a small blob that thinks, reacts and keeps a beginner company while they build. Replies render as proper Markdown, with headings, lists and code, so a plan reads like a plan.

When you ask how to do something in the app, the agent does not stop at describing it. It highlights the buttons in the app itself, one coach mark at a time, so the companion works like a pet showing you around the interface.

Corners

Every corner is a continuous curve.

Every corner in the app has the soft, continuous curve of an iPhone icon, rather than a circle stuck onto a straight edge. Where the screen cannot draw it, it quietly falls back to an ordinary rounded corner. And every corner is the same size, so nothing looks borrowed from another app.

Where the curve matters most, I drew it by hand. The blinking cursor in onboarding is a true squircle, and the shader that takes over from it draws the very same curve, so you never see the swap. The mascot's body is one too, softening from squarer to rounder as it shrinks into the message box.

Motion

Blur, fade and morph keep it one moving thing.

A few motion rules kept the app feeling like one continuous thing:

• Blur sells continuity. A plain fade looks like one thing vanishing and another popping in. Add a touch of blur and a slight shrink, and the mascot changing seats reads as the same creature moving.
• Words trade places. "Thinking" drifts up and softens away as "Done" rises in beneath it, so you see the status change instead of missing it.
• Shapes morph instead of cutting. The mascot's outline flows from one shape into the next rather than jumping.
• Exits carry the motion. Things arrive the instant you ask for them. The movement goes on the way out, where it costs you nothing.
• Stagger only when it tells a story. Onboarding unfolds a line at a time because it is a welcome. Panels never do, because you are working.
• Reduced motion keeps the result. It drops the movement, never the content.

Built with

Electron, React and a 3D board.

Electron, React and TypeScript, with React Three Fiber for the 3D board, a LangChain and LangGraph agent, and Supabase. The dot-matrix wave was adapted from the sekei-xyz reference, and the mascot from the open-source Bloub.