← Gallery / F PWA — KHI Pilates Flow

Pilates app flow

Trải nghiệm app KHI Wellness trên mobile — 5 màn hình end-to-end cho hội viên đặt lớp Pilates. Demonstrate 10 booking UX pattern dùng được cho mọi PWA studio/wellness.

Archetype F · Aesthetic warm · Brand KHI · 5 screens · 10 patterns
01 Home — Hôm nay
9:41 ●● 100%

Chào, Trang

🔔
Lớp tiếp theo

Reformer Pilates
9:30 sáng

HLV Hà · Studio Q.7 · 60 phút

⏱ Còn 30 phút nữa
Lớp hôm nay
Xem tất →
09:30 sáng
Reformer Intermediate
Còn 3/8 slot
HHLV Hà
11:00 sáng
Mat Pilates Basic
Còn 5/10 slot
QHLV Quỳnh
17:00 chiều
Reformer Advanced
Đã FULL · vào waitlist
HHLV Hà
Phù hợp với anh chị
Xem tất →
Beginner 🌿
Mat cho người mới
250.000đ
Intermediate 🧘
Reformer phục hồi
300.000đ
🏠Home 📅Schedule 📝Booked2 👤Profile
02 Class — Chi tiết
9:42 ●● 100%
←
♡
🧘
Buổi sáng Trial OK
Reformer Pilates — Intermediate
HLV Hà · 60 phút · 8 slot
★★★★★ 4.9 · 124 đánh giá
Slot còn lại 3 / 8

Lớp Reformer dành cho học viên đã quen máy, tập trung core + tay với resistance vừa phải. HLV Hà hướng dẫn từng động tác, có HLV phụ điều chỉnh tư thế cho từng anh chị.

Reformer #4–#7 All level Inter Có HLV phụ
03 Schedule — Lịch tuần
9:43 ●● 100%

Lịch tuần

⚙
Tháng 5, 2026 ▾
T2
20
T3
21
T4
22
T5
23
T6
24
T7
25
CN
26
🌅 Sáng
7:00SA
Reformer Beginner
T
HLV Trang · còn 5/8
9:30SA
Reformer Intermediate
H
HLV Hà · còn 3/8
🌇 Chiều
17:00CH
Mat Pilates · FULL
Q
HLV Quỳnh · waitlist
19:00TỐI
Reformer Advanced
H
HLV Hà · còn 6/8
🏠Home 📅Schedule 📝Booked2 👤Profile
04 Confirm — Xác nhận đặt
9:44 ●● 100%

Xác nhận đặt buổi

Bước 2 / 3
Reformer Intermediate
📅Thứ 4, 22 May · 9:30 sáng · HLV Hà
📍Studio KHI Q.7 · 60 phút
Thông tin hội viên
Hội viên
Trang Phan · 0901 234 567
⭐ Pro · còn 8 buổi tháng này
Mã ưu đãi
Voucher
Nhập mã (nếu có)
Lưu ý
✓Hủy miễn phí trước 4 giờ — sau đó trừ 1 buổi gói
✓Đến studio sớm 10 phút để thay đồ + warm-up
✓Mang theo khăn + bình nước cá nhân
✓ Em đã đọc và đồng ý điều khoản đặt lớp
05 Success — Đã đặt
9:45 ●● 100%
✓

Đã đặt lịch
thành công

Hẹn anh chị 9:30 sáng Thứ 4
Studio KHI Q.7 · 36 Nguyễn Thị Thập

Mã bookingKHI26-4521
LớpReformer Intermediate
HLVHà · Studio Q.7
Thời gianT4, 22 May · 9:30–10:30
Còn4h 22m

10 mobile patterns demonstrate

Mỗi screen show 2-3 pattern booking-app cho studio Pilates / wellness. Fork screen nào phù hợp project mobile của anh.

01 · Bottom tab nav
4-col grid Home/Schedule/Booked/Profile, active tinted sage, badge dot count buổi đã đặt.
02 · Class hero + countdown
Hero card lớp tiếp theo với pill countdown "Còn X phút" + emoji bg 🧘 opacity nhẹ.
03 · Capacity bar
Slot remaining visual: bar 4px primary fill / red khi FULL. Reuse cả card mini lẫn detail block 8px.
04 · Week strip picker
7-col grid T2→CN với date number, active day tinted primary + shadow ring. Min-height 60px touch.
05 · Time grouped list
Group theo "Sáng/Chiều/Tối" với emoji header, mỗi item có HLV avatar mini + slot bar inline.
06 · Member status badge
Pill nhỏ "⭐ Pro · còn 8 buổi" trong input-group hội viên, accent soft bg phân biệt rõ.
07 · Level chip
Chip differentiate Beginner (accent soft) / Intermediate (white blur) / Advanced (primary solid).
08 · Add-to-calendar CTA
Sau success: 2 button row "📅 Thêm vào lịch" (primary) + "💬 HLV" (outline) bằng nhau.
09 · Sticky CTA + safe-area
Bottom bar fixed với primary CTA "Đặt buổi · giá". Safe-area inset padding bottom.
10 · Calm success state
Check circle 2-layer halo (12px + 28px ring), gradient sage + accent radial. Confetti-free — match wellness brand.