IBD-HK App
- Sep 11, 2025
- 2 min read
Updated: Mar 22
Client background
Hong Kong IBD Society (HKIBDS) established in 2009 to serves as a professional medical organization dedicated to managing and improving care for patients with Inflammatory Bowel Disease (IBD). Its formation followed a 30-fold increase in IBD incidence in Hong Kong over the past three decades, with prevalence projected to reach 100 per 100,000 people by 2034.
Project Objective
This is a mobile app developed by the Hong Kong IBD Society to help patients with inflammatory bowel disease (IBD) to better monitor their own health records and treatment.
Patients can record their conditions with Health Tracker, present treatment & medications, and hospital visit events. Patients can also prepare & share their health tracker record for doctor’s reference.
Research
Found some existing apps about IBD of similar category can take a reference.
HA Go
is a one-stop mobile application launched by the Hospital Authority (HA) in Hong Kong to help patients manage their healthcare journey and medical records.
Appointment Management: Patients can review their medical records in this year and future. View scheduled appointments from the past year and upcoming ones (e.g., Specialist Outpatient Clinics (SOPC), Radiology, and General Outpatient Clinics).
GOPC Booking: Book, enquire about, or cancel appointments for General Out-patient Clinics (GOPC).
Medication Records: Access dispensing records from the past two years, along with drug information and allergy history.
Activaid – IBD(炎症性腸疾患)アプリ
is a free SNS and symptom-tracking platform specifically designed for individuals living with Inflammatory Bowel Disease (IBD), including Ulcerative Colitis and Crohn’s disease.
Symptom Tracking & Visualization: Users can record daily physical conditions, bowel movements, and diet. The app visualizes this data in graphs to help users and their doctors identify patterns.
Doctor Communication: Helps patients manage their illness based on points that medical professionals prioritize during care, fillin patient daily physical condition.
BC App
Display chart about health tracker and questionnaire results.
User Flow
Explain whole app to display each page and section. Some pages or sections only appear if certain conditions are met (e.g., showing a "Dashboard" only after a successful login).
Wireframe
Refer to user flow, created in the early stages of digital product design to help visualize and communicate the structure of IBD-HK App.
Application Level
The root container that manages global states, such as user authentication or shared data.
Pages (or Screens)
The primary functional units of an app. In mobile development, these are often called "screens" or "activities".
Sections
Visual and logical divisions within a single page that group related components (e.g., a "Profile" section within a Settings page).
Layout
Built and implemented a design system for IBD-HK to provide a consistent learning experience help with patients.
Separate 4 colour selections to-do list:
Health Tracker
Biologic Treatment
Hospital Visit
Medical Treatment
Layout Templates
Global headers and footers that stay consistent across all pages while only the middle "slot" changes content.
Tutorial video
Teach patients how to use IBD app
Created these software with After Effects and Canva
Murf AI voice generator
Behind the scenes and how to work
Presentation video
A4 Leaflet (Trifolds)
For hospitals and clinics.
Comments