matching_app/docs/ux.md

FORMAT

UX/UI DOCUMENTATION

Page: [Page/Screen Name]

Description: [Brief overview of the page's purpose.]

Elements:

• [Element Name 1] ([Type of Element]): [Brief description and key properties/states.]
• [Element Name 2] ([Type of Element]): [Brief description and key properties/states.]
• ...

Flow:

1. [User Action 1] -> [Resulting UI Change/Navigation]
2. [User Action 2] -> [Resulting UI Change/Data Update]
3. ... (Can also link to flow diagrams)

User Stories/Scenarios Supported:

• [Link/Reference to User Story/Scenario 1]
• [Link/Reference to User Story/Scenario 2]

Accessibility Notes:

• [Brief notes on accessibility considerations for this page.]

References:

• [Link to Figma/Sketch/Adobe XD file]
• [Link to related specifications]

Thiết kế giao diện

1. User-Facing Pages

Homepage

• Giới thiệu campaign
• Thông tin về các team
• CTA đăng ký

Registration Page

• Form đăng ký chi tiết
• Upload ảnh
• Đồng ý điều khoản

Result Page

• Nhập access code hoặc truy cập qua personal link
• Hiển thị 3 kết quả matching
• Nút chọn/từ chối

2. Admin Pages

Login Page

• Form đăng nhập admin

Reporting Dashboard

• Thống kê người dùng
• Số lượng matching theo team
• Biểu đồ hoạt động

Campaign Management

• Timeline campaign
• Trigger các action (bắt đầu matching, gửi thông báo...)

Gift Management

• Danh sách quà tặng
• Thêm/sửa/xóa quà
• Danh sách người trúng thưởng

3. UI Components

• Form Controls: Input, Select, Checkbox, File Upload
• Cards: Hiển thị profile matching
• Modals: Điều khoản, thông báo
• Loading Indicators: Khi xử lý matching

4. UX Flow

1. Đăng ký → Xác nhận email
2. Chờ matching → Nhận thông báo
3. Xem kết quả → Chọn/từ chối
4. (Nếu trúng) Nhận thông báo quà tặng

Color Scheme

Purpose	Color Code
Primary	#4361EE
Success	#4CC9F0
Warning	#F8961E
Danger	#F72585
[Other Purpose]	[Color Code]

Component Library

Component: [Name]

Description: [Brief description of the Goal Card component's purpose.]

Props/Parameters:

• title (string): [Description of the title prop.]
• progress (number): [Description of the progress prop (e.g., 0.0 to 1.0).]
• deadline (string): [Description of the deadline prop (e.g., format).]

States:

• Default
• Completed (visual changes)

Usage Guidelines:

[Brief instructions on when and how to use the Goal Card]