Senior UX/UI DesignerApp + Web CMSHealthTech / Telemedicine

Dr. Smoothlife Platform

HAPPY THREE CREATION CO., LTD. · 7 mo · Aug 2023 – Feb 2024

Dr. Smoothlife patient website on a laptop and a phone, showing Shop by Symptoms and product listings

Design Process & Workflow

From Consultation to Fulfilment

The service mapped as patient and system scenarios first, then the design system, the patient experience on web and mobile, and the back office that prices delivery and handles orders, returns and cancellations.

Step 01

Service Scenarios: Patient and System Lanes

The service was mapped as scenarios before any screen was drawn, each with a patient lane above a system lane, so every decision point shows what the person sees and what the system has to do. Scenario one covers seeing a doctor straight away, with dispensing and delivery limited to Bangkok and its surrounding provinces. Scenario two covers booking an appointment, with nationwide delivery from regional stock or collection at a partner pharmacy. A third board maps a centralised model that sends medicine from the nearest pharmacy. Laying the scenarios side by side showed where they share steps and where delivery coverage forces them apart.

Service Scenarios: Patient and System Lanes — visual 2

Service Scenarios: Patient and System Lanes — visual 3

Step 02

Design System Foundation

One system board sets the foundation shared by the patient and admin screens: a green primary palette with greys, and yellow and red reserved for alerts; Prompt for headings and Sarabun for Thai body text; button families from primary to ghost, each with default, hover, pressed and disabled states; text fields with focused, error and complete states; tabs, status tags, and toasts for error, warning, info and success; and container widths for desktop, tablet and mobile with their paddings.

Step 03

Patient Web Experience

The patient-facing web was designed at desktop, tablet and mobile widths, each with its own navigation drawer, rather than one layout shrunk to fit. Product pages were specified for every state a pharmacy catalogue meets: items with and without options, out of stock, without an image, a medicine shown without its image, loading and sharing. A buy-more-save-more promotion was taken from the product page through the cart and checkout to its success screen.

Step 04

Consultation & Intake Journeys

The consultation journeys were drawn end to end. On the web, a stepped intake form with a progress bar collects the patient's details and symptom photos, then hands over to a queue number, a waiting screen, the video call with the doctor and the summary that follows. The mobile app adds consent and identity verification with an ID card capture before either track starts, then runs telepharmacy and telemedicine as parallel flows, including the end-call, time-out, hang-up and error branches and a chat option.

Consultation & Intake Journeys — visual 2

Step 05

Shipping Fee Rules

In the back office, delivery is configured as shipping-fee rules: a table of weight bands with the fee and an on-off status for each, filters for normal and express delivery, weight and volume, a form for adding a rule by delivery type, and a confirmation before a rule is deleted.

Step 06

Order Management

Orders are handled from one list with status tabs, search filters, an export and a shipping label to print, and a detail page for each order showing the buyer, the delivery and tax-invoice addresses, a delivery-status timeline, the items, the carrier and the payment breakdown. The boards show the same templates in two states: orders waiting to be received and completed orders.

Step 07

Returns, Exchanges & Cancellations

The exception paths got their own screens. Exchange and refund requests open with the reason and the customer's evidence photos, and each item is approved or rejected on its own; a rejected item needs a reason before the decision can be saved, and the list shows whether a request was approved in part, in full or not at all. Cancelled orders keep their detail page with the cancellation reason and time, for orders cancelled automatically and those cancelled manually.

Returns, Exchanges & Cancellations — visual 2

Returns, Exchanges & Cancellations — visual 3

Executive Summary & Impact

Connected Telemedicine

From intake to delivery

Intake, video consultation, the pharmacy catalogue and delivery designed as one service across the patient app and website.

Guided Intake

Consultation journeys

A stepped intake with identity verification, a queue and the video call, with the time-out, hang-up and error branches drawn as screens too.

Operational Back Office

Connected service management

Admin workflows for shipping-fee rules, order management, and returns, exchanges and cancellations behind the telemedicine service.

Dr. Smoothlife is a telemedicine and online pharmacy service on a mobile app and a responsive website, with a web back office behind it. The design maps each service scenario as patient and system lanes, takes the patient from a stepped intake and identity check through the video consultation to buying and receiving medicine, and gives the back office its own flows for delivery fees, orders, and returns, exchanges and cancellations.

01 / Discovery & Context

Problem & Baseline

Telemedicine involves more than the consultation itself. Patients need to move through intake and identity checks before meeting a doctor, then buy and receive their medicine, on a phone or on the web. Behind the experience, delivery pricing, orders and the exceptions, returns, exchanges and cancellations, each need a workflow of their own.

Disconnected patient journey

Patient intake, consultation, purchase and delivery needed to work together as one continuous experience rather than separate product steps.

Coverage-dependent delivery

Delivery coverage differed between service scenarios, so the same consultation could end in different dispensing and delivery paths.

Complex fulfilment operations

Shipping-fee rules, orders, returns, exchanges and cancellations required structured back-office workflows.

Multiple product surfaces

The platform spanned a patient mobile app, a responsive patient website and a web back office, requiring consistency across different contexts.

02 / Architecture & UX System

Key Design Decisions

01

Structured Medical Intake

Designed a stepped intake with a progress bar, identity verification on mobile and a queue, so patients provide the right information and know where they stand before connecting with a doctor.

02

Scenario-First Service Mapping

Mapped each service scenario with a patient lane above a system lane before drawing screens, so every decision point shows what the patient sees and what the system has to do.

03

One Design System Across Surfaces

Built one system of colour, Thai type, buttons, fields, tags and toasts, each with its states, shared by the patient app, the website and the back office.

04

Patient Web Built for Every State

Designed the patient website at desktop, tablet and mobile widths, each with its own navigation drawer, and specified product pages for every state a pharmacy catalogue meets: with and without options, out of stock, without an image and loading.

05

Operational Back Office

Designed admin workflows for shipping-fee rules, order management, and returns, exchanges and cancellations, including item-by-item approval with a required reason for each rejection.

03 / Verification & Evidence

Outcomes

Area	Before	After	Outcome
Patient journey	Consultation and fulfilment involved multiple disconnected steps	Intake, consultation, purchase and delivery were designed as one connected flow	More connected
Exception paths	Time-outs, dropped calls and errors in a consultation had no defined screens	Each branch of the consultation flow was designed as its own screen	Fully mapped
Product pages	A pharmacy catalogue meets many edge cases	Pages specified with and without options, out of stock, without an image and loading	Fully specified
Delivery pricing	Shipping fees depended on weight bands and delivery type	Fee rules were configured in one table, each with its own on-off status	Configurable
Operations	Delivery, orders, cancellations, and fulfilment required multiple administrative tasks	Operational workflows were organized into clearer management flows	More structured

04 / Retrospective

What I Learned

→

Designing a telemedicine product showed me that healthcare UX is not only about making individual screens easy to use. The experience depends on how patients, pharmacies and operational teams connect across the entire service.

→

Mapping the scenarios as patient and system lanes before drawing screens showed early where delivery coverage splits the journey, so the screens could be designed for each branch from the start.

→

Working across the patient app, the website and the back office reinforced the importance of one design system shared by different users, devices and responsibilities.