UX/UI DesignerWeb + KioskHealthcare / E-Commerce

TH Health Platform

Thonburi Health Group (THG) · 4 weeks · Feb 2024

TH Health symptom-based health e-commerce platform on desktop

Design Process & Workflow

From Symptom to Checkout

The whole store mapped as one flow first, then the pages a customer passes through from finding a product by how they feel to paying by transfer, and the kiosk that carries the same symptom-first entry.

Step 01

Screen Flow Architecture

Laid the whole platform out as one connected flow before designing individual pages. Mapping browse, product detail, cart, checkout, account and order history in a single view showed how far a customer travels between finding a remedy and paying for it — and where that path could be shortened.

Step 02

Core Marketing & Landing Pages

Designed the homepage, promotions, article and about surfaces that carry the brand and drive acquisition. These pages had to establish credibility quickly: in health commerce a customer decides whether to trust the seller before they evaluate any product.

Step 03

Product Discovery & Detail

Built the catalogue browsing, filtering and product detail templates. Detail pages were structured so dosage, indication and pricing are readable without scrolling past marketing copy — the information a customer actually needs to decide comes first.

Step 04

Health Packages & Content Pages

Designed the health check-up package pages and long-form editorial content. Packages are comparison-heavy purchases, so pricing tables and inclusions were laid out to be scanned side-by-side rather than read sequentially.

Step 05

Account & Member Management

Designed member registration, profile management and address book flows, including inline validation and success feedback. A first-time buyer meets these forms before their first order, so each field had to explain itself where it is filled in.

Step 06

Wishlist & Saved Products

Built the saved-products surface so customers can hold items across sessions. For repeat medication and supplement purchases this doubles as a personal reorder list, not just a shopping convenience.

Step 07

Checkout & Payment Confirmation

Designed the bank transfer flow with slip upload, including the error state when a required file is missing. Transfer-and-confirm is how this store takes payment, so this path needed the same care usually reserved for card checkout.

Step 08

Order History & Fulfilment Tracking

Built order history with clear payment-status states and a full order summary covering items, delivery details and QR payment. Customers can reconstruct exactly what they ordered and where it stands without contacting support.

Step 09

Kiosk Touchpoint

The kiosk runs as tall portrait screens. It opens on a grid of symptoms with a LINE QR code for contact, leads to the matching products with the symptom chips kept along the top, and then to product detail with its own LINE QR code. On the product screens a fixed bar along the bottom always offers a way back and a way to contact the store or return to the start, so nobody at the kiosk is left without a next step.

Executive Summary & Impact

Symptom-First Discovery

Several ways into the catalogue

Products can be found by symptom, lifestyle or age group, alongside category, brand and search.

Guided Checkout

Step-by-step purchase

Address, payment method and order summary in clear steps, followed by a bank transfer flow with slip upload.

Connected Touchpoints

Web, member area and kiosk

Account, wishlist and order history online, with kiosk screens that start from the same symptom grid.

TH Health is an e-commerce platform for health products and check-up packages. The design gives customers several ways into the catalogue, starting from how they feel, takes them through a guided checkout and bank transfer flow, and carries the same symptom-first entry onto in-store kiosk screens.

01 / Discovery & Context

Problem & Baseline

Customers looking for health products often know how they feel rather than the name of the product that helps. A catalogue organised only by category or brand asks them to know what to search for before they can find it. The platform also needed a purchase flow built around bank transfer, where the customer still has steps to complete after checkout, and a way to present health check-up packages, which are compared rather than browsed.

Product-led browsing

Customers who knew their symptom but not the product name needed another way into the catalogue.

Transfer-based payment

Paying by bank transfer adds steps after checkout, such as sending proof of payment, which had to be designed as part of the flow.

Comparison purchases

Check-up packages differ by what they include, so customers needed to compare them side by side.

Multiple touchpoints

The experience had to work across the website, the member area and in-store kiosk screens.

02 / Architecture & UX System

Key Design Decisions

01

Several Ways into the Catalogue

Added symptom, lifestyle and age-group entry points on the homepage and in the catalogue sidebar, alongside category, brand and search, so customers can start from how they feel or from what they already know.

02

Guided Checkout and Transfer Flow

Broke checkout into address, payment method and order summary steps, then designed the bank transfer flow with the account details, a slip upload and a clear error state when the slip is missing.

03

Order Status Customers Can Read

Designed order history with a payment status on every order, pending, paid or voided, and a confirmation page summarising items, delivery and the transfer slip, so customers can check where an order stands without contacting support.

04

Packages Compared Side by Side

Laid out health check-up packages with a comparison table of what each one includes and a booking contact beside it, so packages can be scanned against each other rather than read one by one.

05

Kiosk Screens That Start From Symptoms

Designed kiosk screens that open on a grid of symptoms, lead to matching products and product detail, and hand off to LINE for contact, with a fixed bar for going back or returning to the start.

03 / Verification & Evidence

Outcomes

Area	Before	After	Outcome
Product discovery	Finding a product depended on knowing its name or category	Symptom, lifestyle and age-group entry points sit alongside category, brand and search	More ways in
Checkout & payment	Bank transfer left steps to complete after the order	Checkout and transfer designed as guided steps with slip upload	More guided
Order tracking	Customers needed a way to check payment and order status	Order history shows a payment status for every order	Easier to follow
Check-up packages	Packages differ in what they include	Inclusions compared in one table	Easier to compare
In-store kiosk	Kiosk screens needed their own entry point	Kiosk starts from the same symptom grid as the website	More consistent

04 / Retrospective

What I Learned

→

Customers describe health needs by how they feel, so offering several entry points, symptom alongside category and brand, served people with very different levels of product knowledge.

→

A bank transfer purchase does not end at checkout. Designing the slip upload, its error state and the payment status as part of the flow mattered as much as the checkout itself.

→

Carrying the symptom-first entry from the website onto kiosk screens showed the value of a shared structure across touchpoints, even when each screen format is different.