Design Brief · SuaXe V2 · Phase 1 · Uber-inspired

Tìm thợ sửa xe,
trên bản đồ.

Phase 1 — web app tìm kiếm shop sửa xe quanh bạn. Không cần đăng ký, xem được cả shop đã xác thực lẫn shop gợi ý từ hệ thống. Gọi điện hoặc chỉ đường ngay trên app.

⚡ Phase 1 — Shop Search (no auth, no booking) Primary: #000 Accent: #FF6A00 (giữ cho SOS Phase 3+) Verified: #0E8A5F Stack: Flutter + flutter_map + OSM · .NET 10 + Postgres
v1.0 · 2026-04-22 · Brief cho Phase 1 MVP · Nguồn phân tích: user_business_analysis.md + phase1_search_spec.md

Tham chiếu thiết kế

Kế thừa brief design Uber-inspired đã có — giữ ngôn ngữ thiết kế thống nhất với V1 Phase sau (SOS/booking).

Uber.com (tham chiếu gốc)

Monochrome đen/trắng · typography bold tracking âm · display 48-56px · radius 10px · underline input · ảnh thật · copy ngắn ("Go anywhere with Uber"). Accent màu CHỈ dùng cho urgency.

Áp vào SuaXe V2 Phase 1

Đen là primary · cam giữ lại cho SOS (Phase 3) · Phase 1 thêm xanh (#0E8A5F) làm màu "Đã xác thực" — signal tin cậy không phải urgency. Display "Tìm thợ sửa xe, trên bản đồ." · underline search input · copy thẳng ("Gọi ngay", "Chỉ đường").

1. Brand & màu

Đen là primary. Xanh "Verified" (#0E8A5F) là signal tin cậy — điểm riêng của SuaXe V2. Cam giữ lại cho SOS khi Phase 3 có cứu hộ khẩn cấp.

Primary#000000
Text, CTA chính, pin verified
Surface#FFFFFF
Background app, card
Background#F6F6F6
Section alt, input bg
Muted Text#6B6B6B
Text phụ, caption
Line#E6E6E6
Border, divider
Verified#0E8A5F
Badge "Đã xác thực"
Verified Soft#E3F4EC
Accent (SOS)#FF6A00
Giữ cho Phase 3+ (cứu hộ)
Accent Soft#FFF1E5
Danger#CC2E2E

2. Typography

Inter / Uber Move · bold cho heading · tracking âm · body 16px.

Tìm thợ sửa xe, trên bản đồ.
Display · 48-56/52 · 800 · -0.035em
Shop gần bạn
H1 · 32/38 · 800 · -0.025em
Dịch vụ sửa chữa
H2 · 22/28 · 700 · -0.015em
Garage Hùng · ★ 4.7 · 120 đơn đã hoàn thành · cách 2.4 km. Nhận sửa đa hiệu, có cứu hộ 24/7.
Body · 16/24 · 400
Đã xác thực · mở cửa 8:00 — 22:00 · 0909 123 456
Small · 13/18 · muted

3. Tokens

TokenGiá trịDùng cho
radius-sm6pxChip, tag nhỏ
radius10pxButton, card, input, shop card
radius-lg18pxHero, bottom sheet, modal
border-width1pxLine everywhere — không dùng shadow nặng
shadow0 2px 8px rgba(0,0,0,.1) · 0 -4px 16px cho sheetChỉ dùng cho search pill, bottom sheet, map sheet
spacing4 / 8 / 12 / 16 / 20 / 28 / 40Base 4, gap group 16-20, section 28+
tracking-0.035em (display) → -0.005em (body)Càng to càng âm

4. Screen mockups — Phase 1 MVP (4 màn)

Web app responsive, show mobile view (mobile-first). Desktop = wider layout với map left + list right.

🔧

Shop sửa xe
quanh bạn.

Cho phép vị trí để tìm shop gần nhất. Không cần đăng ký.

1. Welcome · xin GPS
9:41●●●● 5G 🔋
←

Chọn vị trí
của bạn.

Bạn chưa cho phép truy cập vị trí. Chọn 1 trong 2 cách dưới đây.

🔍
Nhập địa chỉ Gõ tên đường, địa điểm…
→
📍
Chọn quận / huyện Danh sách theo tỉnh/thành
→
2. GPS Fallback
9:41●●●● 5G 🔋
🔍 Tìm shop hoặc dịch vụ
⚙
Xe máy Ô tô Sửa tại chỗ Cứu hộ
H✓
N✓
T
P
© OpenStreetMap
12 shop gần bạn Sắp xếp: Gần nhất
N✓
Thợ Nam✓
1.2 km · Honda, Yamaha · ★ 4.9
★ 4.9
120 đơn
H✓
Garage Hùng✓
2.4 km · 24/7 · đa hiệu
★ 4.7
85 đơn
T
Tiệm sửa xe Tuấn
3.1 km · Chưa xác thực
📞
3. Map Home — Verified đen có ✓, Unverified trắng outline
9:41●●●● 5G 🔋
←
1 / 6

Thợ Nam

✓ Đã xác thực
★ 4.9 (48 reviews) 120 đơn hoàn thành
45 Nguyễn Huệ, Q.1, TP.HCM Cách bạn 1.2 km · 0909 123 456
● Đang mở · 8:00 — 22:00 hằng ngày
Dịch vụ (xe máy)
Vá lốp30K
Thay nhớt80K – 120K
Thay ắc quytừ 250K
Cứu hộ (theo km)15K / km
Đánh giá gần đây
Anh Tuấn · ★ 5 2 ngày trước
Thợ đến nhanh, sửa gọn. Giá đúng như app báo, không phát sinh.
Chị Mai · ★ 5 1 tuần trước
Vá lốp 30k chuẩn, thợ vui vẻ nhiệt tình.
4. Shop Detail (Verified)
9:41●●●● 5G 🔋
←

Tiệm sửa xe Tuấn

Chưa xác thực Cách 3.1 km
Shop chưa được xác thực Thông tin lấy từ nguồn công cộng. Bạn có thể gọi điện hoặc đến trực tiếp — chưa đặt lịch / gọi thợ qua app được.
12 Lý Tự Trọng, Q.1, TP.HCM 0912 345 678
● Đang mở · 7:00 — 21:00
Dịch vụ (tham khảo)
Sửa xe máyLiên hệ
Thay nhớtLiên hệ
5. Shop Detail (Unverified) — no rating, no booking

5. Components

Chip Solid ✓ Đã xác thực SOS (Phase 3)

Atoms: Button (primary đen / ghost xám / outline) · Chip (neutral / solid / verified xanh / accent cam) · SearchPill (icon + ph + filter button) · ShopCard (avatar + info + rating/distance) · MapPin (đen = verified có ✓ · trắng outline = unverified · ring cam = active) · MapUserDot (cam + halo) · BottomSheet (grab bar + list) · ReviewCard (bg xám #F8F8F8) · ServiceRow (name + price) · UnverifiedNote (bg vàng nhạt).

5a. Map stack & lý do chọn OSM

Kế thừa stack V1: Leaflet + OpenStreetMap. Free, không cần API key, responsive tốt cho web.

react-leaflet + Leaflet 1.9 + OpenStreetMap tile

Component React thuần, không cần API key / billing. Tile public miễn phí (set user-agent để tuân thủ ToS). Marker với custom HTML div icon → render verified vs unverified khác nhau mà không cần asset. Đổi lại: POI VN yếu, geocoding kém (sẽ bổ sung sau nếu cần autocomplete địa chỉ).

Browser Geolocation API — vị trí user

navigator.geolocation native, không lib bên thứ 3. 3 lớp fallback: permission denied → GPS off → timeout. Khi fallback kích hoạt, show màn "Chọn vị trí" với 2 option: nhập địa chỉ tay hoặc chọn quận/huyện.

Framing — fit bounds theo shop pin

Map center theo vị trí user, zoom mặc định 15. Khi có shop pin trong bán kính viewport → fit bounds bọc user + 3-5 shop gần nhất. User di chuyển/zoom → re-query shops trong viewport.

In-app routing — Leaflet Routing Machine + OSRM

Đề xuất leaflet-routing-machine + public OSRM server (free). Vẽ polyline tới shop, hiển thị khoảng cách + thời gian ước tính. Alternative: vẽ đường thẳng rồi deep-link sang Google Maps — đơn giản hơn, UX thường quen với user. Chốt chọn khi start implement.

Khi nào migrate khỏi OSM

Trigger: cần autocomplete địa chỉ chính xác · cần traffic realtime · cần route chính xác cho xe máy VN. Đích: Google Maps (UX quen) hoặc Mapbox (branding + scale rẻ). Khi đó chỉ cần đổi TileLayer; atom map pin và shop data giữ nguyên.

6. Verified vs Unverified — điểm khác biệt SuaXe V2

Ngày đầu ra mắt vẫn có shop trên map (không rỗng) — nhờ hệ thống seed unverified. Sau khi shop đăng ký + admin xác thực → chuyển thành verified, được nhận booking (Phase 2+).

Khía cạnhVerified (đã xác thực)Unverified (hệ thống seed)
Pin trên mapĐen, có ✓ xanhTrắng outline, không ✓
Badge"✓ Đã xác thực" (xanh)Không có
Rating / ReviewsCó, hiện 3 mới nhất + modal xem thêmKhông
Số đơn hoàn thànhHiện trên card + detailKhông
Giá dịch vụCông khai, cụ thể"Liên hệ" (nếu có)
Thứ tự trong listƯu tiên topSau verified
Action cho userGọi · Chỉ đường · (Phase 2: Đặt lịch)Chỉ Gọi · Chỉ đường
Note trên detailHiển thị đầy đủCó box vàng "Chưa xác thực"

7. Phase roadmap

Brief này chỉ tập trung Phase 1. Các phase sau sẽ thêm auth, booking, payment...

PhaseTrạng tháiPhạm viBổ sung cho design
Phase 1Brief nàySearch shop trên map (không auth, không booking)Splash, GPS fallback, Map home, Shop detail (V/UV)
Phase 2Tiếp theoAuth + Đặt lịch trước với Verified shopLogin, Profile, Booking flow, Lịch sử
Phase 3FutureĐặt thợ đến (SOS) + Notification + Real-timeSOS panel (accent cam), tracking screen
Phase 4FuturePayment + Hóa đơnPayment sheet, invoice view
Phase 5FutureShop dashboardShop side UI
Phase 6FutureAdmin toolsAdmin verify queue, dispute

8. Bước tiếp theo

  1. Anh bổ sung Shop data schema chi tiết (fields) + nguồn unverified shops.
  2. Chốt in-app routing lib: Leaflet Routing Machine + OSRM vs redirect sang Google Maps.
  3. Thiết kế design tokens trong code: tailwind.config.js hoặc theme.css với palette đen/xanh/cam.
  4. Code 4 màn Phase 1 (Welcome, GPS Fallback, Map Home, Shop Detail) theo mockup.
  5. Setup seed data: vài shop verified + unverified để test + dev.
  6. API endpoints Phase 1: GET /shops, GET /shops/:id, GET /service-categories, GET /services.
  7. UAT + feedback → điều chỉnh trước khi tiến sang Phase 2.

Brief v1.0 · SuaXe V2 Phase 1 · kế thừa design language Uber-inspired · V2/design_brief/index.html