BuildCost App – 260004

Thiết kế một ứng dụng di động hiện đại có tên là BuildCost – công cụ ước tính chi phí xây dựng, giúp chủ nhà, nhà thầu, kiến ​​trúc sư và quản lý dự án xây dựng dự toán chi phí công trình một cách nhanh chóng và chính xác.

Buildcost App – 260004

Mobile Tablet Desktop

Nhu cầu: Ước tính chi phí xây dựng trước khi bắt đầu dự án.
Giải pháp: Tính toán chi phí vật liệu và nhân công dựa trên các thông số như kích thước dự án, loại hình xây dựng, diện tích công trình, lựa chọn vật liệu và đơn giá nhân công.

Triết lý thiết kế:

Giao diện (UI) tinh gọn, trải nghiệm (UX) trực quan, giảm thiểu gánh nặng nhận thức, mang phong cách chuyên nghiệp đặc thù của ngành xây dựng, cùng các luồng người dùng (user flow) tập trung vào việc chuyển đổi.

Xây dựng 8 màn hình ứng dụng di động với độ chi tiết cao (high-fidelity), kết hợp thành một sản phẩm hoàn chỉnh và đồng nhất.

Đối tượng người dùng

• Chủ nhà đang lên kế hoạch xây mới hoặc cải tạo nhà ở.
• Nhà thầu chuẩn bị báo giá dự án.
• Kiến trúc sư và tư vấn xây dựng.
• Quản lý dự án theo dõi ngân sách.
• Các doanh nghiệp xây dựng quy mô nhỏ quản lý chi phí vật liệu và nhân công.

Hệ thống thiết kế trực quan (Visual Design System)

Xây dựng giao diện tinh gọn, hiện đại và đáng tin cậy, lấy cảm hứng từ các ứng dụng quản lý xây dựng và lập kế hoạch tài chính chuyên nghiệp.

Bảng màu

• Màu chủ đạo: Xanh navy đậm (đặc trưng ngành xây dựng) #17324D.
• Màu phụ: Xanh dương #2878B5.
• Màu nhấn: Cam cảnh báo (Safety orange) #F59E0B.
• Màu nền: Xám nhạt #F6F8FA.
• Màu bề mặt: Trắng #FFFFFF.
• Trạng thái thành công: Xanh lá #16A34A.
• Trạng thái cảnh báo: Cam hổ phách #D97706.
• Văn bản chính: #172B3A.
• Văn bản phụ: #64748B.
• Đường viền: #E2E8F0.

Kiểu chữ (Typography)

• Sử dụng font Inter hoặc một font chữ không chân (sans-serif) hiện đại tương tự.
• Phân cấp thị giác rõ ràng.
• Các con số chi phí hiển thị lớn, dễ đọc.
• Nhãn thông tin rõ ràng, khoảng cách nhất quán và độ tương phản đảm bảo khả năng tiếp cận.

• Các thẻ (card) bo góc với bán kính 12–16px.
• Đường viền tinh tế và đổ bóng tối giản.
• Biểu tượng dạng đường nét (line icons) đơn giản.
• Các chỉ báo tiến trình rõ ràng.
• Thanh điều hướng phía dưới gồm 4 mục: Trang chủ, Dự án, Công cụ tính toán, Hồ sơ cá nhân.
• Khu vực chạm (touch target) lớn và các nút bấm chính nổi bật.
• Sử dụng thuật ngữ xây dựng chuẩn tại Việt Nam và định dạng tiền tệ VND.

Nguyên tắc trải nghiệm người dùng (UX principles)

• Mỗi màn hình chỉ tập trung vào một tác vụ chính duy nhất. Sử dụng phương pháp hiển thị thông tin dần dần để tránh làm người dùng choáng ngợp.
• Cung cấp các giá trị mặc định hữu ích và xác thực trực tiếp.
• Hiển thị tóm tắt kết quả tính toán ngay lập tức.
• Giúp người dùng dễ dàng tìm thấy tất cả các thao tác quan trọng.
• Sử dụng điều hướng nhất quán và các thành phần có thể tái sử dụng.