Giải pháp thiết kế

Áp dụng Atomic Design

Tôi tổ chức toàn bộ hệ thống UI theo phương pháp Atomic Design, bao gồm:

• Atoms: Icon, thẻ thông tin nhỏ, button, input search, checkbox,...

• Molecules: Khối thông tin địa điểm, khối dự báo thời tiết, thanh lựa chọn chủ đề,...

• Organisms: Popup chia sẻ, popup chỉnh sửa địa điểm, khối chỉ đường,...

• Templates: Giao diện Home, Search, Chi tiết địa điểm, Chủ đề thời tiết, BĐS, Bus,...

• Pages: Tổng hợp toàn bộ trang hoàn chỉnh gồm 12 page: Home, Tìm kiếm, Chi tiết, Chỉ đường, Chia sẻ, Thời tiết, Không khí, Du lịch, BĐS, Bus, Đóng góp, Đăng nhập

👉 Việc tổ chức theo cấu trúc này giúp tôi đảm bảo tính nhất quán khi mở rộng tính năng, đồng thời dễ dàng chỉnh sửa và phối hợp cùng đội dev.

Trang chủ

Mục tiêu thiết kế

Tạo ra giao diện bản đồ hiện đại, có khả năng:

• Hiển thị nhiều lớp dữ liệu (giao thông, thời tiết, không khí…).

• Cho phép tương tác nhanh chóng, rõ ràng.

• Đảm bảo trực quan nhưng không rối mắt, đặc biệt với người dùng phổ thông Việt Nam.

Các điểm nổi bật trong thiết kế

1. Bố cục bản đồ – Ưu tiên trải nghiệm xem và tương tác

• Giao diện bản đồ chiếm gần như toàn màn hình, giúp người dùng dễ quan sát.

• Thanh công cụ chọn lớp dữ liệu (giao thông, không khí, thời tiết…) bố trí ở góc dưới phải hoặc giữa – dễ tiếp cận bằng ngón cái (mobile) hoặc chuột (desktop).

• Thanh tìm kiếm + các bộ lọc như "Nhà hàng", "Bệnh viện", "Khách sạn" được đặt trên đầu bản đồ → gợi ý hành vi tra cứu thực tế.

2. Biểu tượng thông minh & tối giản

• Các icon (PM2.5, AQI, nhiệt độ...) sử dụng màu sắc và hình ảnh gợi liên tưởng (mặt cười xanh, biểu đồ không khí).

• Mã màu theo chuẩn quốc tế (xanh – tốt, đỏ – xấu...) giúp hiểu nhanh mà không cần đọc nhiều.

• Tooltip khi hover/click: hiển thị thông tin chi tiết mà không che toàn bộ bản đồ.

3. Bảng điều khiển linh hoạt

• Bảng “Chọn chủ đề” (giao thông, thời tiết, không khí, du lịch, BĐS) cho phép bật/tắt layer tùy ý → người dùng kiểm soát thông tin mình muốn xem.

• Bản đồ có thể đổi giữa chế độ mặc định và vệ tinh, phục vụ cả người dân và chuyên gia.

4. Popup vị trí chi tiết

• Khi người dùng click vào bản đồ → hiển thị toạ độ và lựa chọn thao tác nhanh: chỉ đường, thêm địa điểm, lưu địa chỉ.

• Đây là tính năng được người dùng yêu thích vì rất tiện trong việc chia sẻ vị trí hoặc tạo bookmark cá nhân.

Những gì tôi đảm nhiệm trong phần này

Với tư cách UI Designer chính, tôi chịu trách nhiệm thiết kế toàn bộ giao diện trang chủ bản đồ – nơi người dùng sẽ tiếp xúc đầu tiên với Meey Atlas.

• Tạo hệ thống layout bố cục cho bản đồ chính, phân vùng UI theo hành vi sử dụng.

• Thiết kế các component cho từng lớp dữ liệu (bảng AQI, chọn chủ đề, popup vị trí…).

• Xây dựng guideline về màu sắc – biểu tượng – font – spacing để đảm bảo trải nghiệm mạch lạc và dễ nhìn.

• Phối hợp cùng dev để đảm bảo trải nghiệm mượt, tối ưu render trên Mapbox với dữ liệu động.

Search

Mục tiêu thiết kế

Tìm kiếm không chỉ là gõ từ khóa mà còn là hành trình giúp người dùng tiếp cận nhanh thông tin họ cần, trong đúng ngữ cảnh.

• Hỗ trợ tìm kiếm địa điểm, loại hình dịch vụ (ăn uống, bệnh viện, tiện ích…).

• Tìm kiếm phải nhanh, kết quả rõ ràng, dễ chọn – kể cả với người không rành công nghệ.

• Tích hợp thông tin bổ sung: thời tiết tại điểm đến, tình trạng mở cửa, điều hướng.

  
  

Các điểm nổi bật trong thiết kế

1. Thanh tìm kiếm nổi bật, gợi mở

• Đặt ở vị trí dễ thấy, luôn cố định ở đầu màn hình.

• Thiết kế placeholder có tính gợi ý hành vi: “Tìm kiếm địa điểm…” thay vì chỉ đơn giản là "Search".

• Icon 🔍 tách biệt với nút lọc giúp dễ nhận biết hành động.

2. Danh sách kết quả đơn giản hóa

• Giao diện kết quả tìm kiếm sử dụng thẻ nhỏ gọn, đồng nhất: tên địa điểm, địa chỉ, icon địa điểm.

• Hiển thị nhanh các kết quả giống nhau (ví dụ "Bánh Mì 25") – hỗ trợ so sánh.

• Kết quả có marker bản đồ tương ứng, giúp định vị trực quan.

3. Popup chi tiết địa điểm

Khi chọn một kết quả → mở popup chi tiết:

• Hình ảnh địa điểm

• Tên + địa chỉ + trạng thái hoạt động (mở/đóng cửa)

• Tọa độ – copy hoặc dẫn đường nhanh

• Dự báo thời tiết 8 ngày tới tại địa điểm → đây là điểm độc đáo mang bản sắc Meey Atlas!

4. Trải nghiệm tìm kiếm không bị ngắt mạch

• Giao diện không chuyển trang – tất cả diễn ra trên một khung bản đồ duy nhất.

• Người dùng không mất kết nối với vị trí ban đầu khi tìm kiếm → tạo cảm giác liền mạch.

  
  

Những gì tôi đảm nhiệm trong phần này

Tôi tập trung tối ưu hóa trải nghiệm từ lúc người dùng gõ từ khóa đến khi họ chọn được địa điểm phù hợp.

• Thiết kế UI cho toàn bộ luồng: thanh tìm kiếm → danh sách kết quả → popup chi tiết.

• Đề xuất thêm thông tin phụ như trạng thái mở cửa và thời tiết tại điểm đến để gia tăng ngữ cảnh sử dụng.

• Làm việc trực tiếp với team backend để đảm bảo UI hoạt động ổn định với API tìm kiếm.

• Kiểm tra trải nghiệm mobile: đảm bảo popup không che bản đồ, danh sách kết quả dễ cuộn và chọn.

Chi tiết địa điểm & Địa giới hành chính

Mục tiêu thiết kế

Giao diện chi tiết cần không chỉ cung cấp thông tin – mà còn tạo ra cảm giác tin cậy, dễ hiểu, và giúp người dùng ra quyết định tại chỗ (đi hay không đi, mở hay đã đóng, có gì xung quanh…).

Các điểm nổi bật trong thiết kế

1. Popup thông tin địa điểm – giàu nội dung, dễ đọc

• Bố cục rõ ràng: Ảnh địa điểm, tên + địa chỉ, tình trạng hoạt động, website, số điện thoại, chỉ đường.

• Phân lớp thông tin: Phần mô tả và lịch hoạt động nằm dưới cùng, chỉ hiện khi người dùng kéo xuống.

• Cá nhân hóa: Dự báo thời tiết 8 ngày tại địa điểm → gợi ý ngữ cảnh cho chuyến đi.

2. Trạng thái đa dạng – UI có logic động

Tôi đã thiết kế UI theo nhiều trạng thái thời gian khác nhau, gồm:

• Đang hoạt động

• Nghỉ giữa trưa

• Đã đóng cửa

• Mở lại vào ngày khác

Điều này giúp người dùng nhanh chóng nắm tình trạng, không cần gọi điện hỏi.

3. Hiển thị địa giới hành chính

• Layer ranh giới phường/xã/quận nổi bật, có bóng nền nhẹ (màu hồng nhạt), giúp người dùng xác định rõ phạm vi quản lý.

• Popup hành chính đơn giản, gồm:

  • Tên địa phương

  • Tọa độ trung tâm

  • Nút chỉ đường

Đây là bước kết nối dữ liệu hành chính và bản đồ sống, phục vụ nhiều trường hợp: tra cứu quy hoạch, xác định ranh giới tranh chấp, tìm cơ sở công.

Những gì tôi đảm nhiệm trong phần này

Tôi tập trung thiết kế các thành phần UI cho chi tiết địa điểm, bao gồm cả trạng thái động và hiển thị địa giới. Tôi đã thực hiện:

• Thiết kế 4 trạng thái UI khác nhau dựa vào logic thời gian thực trả về từ API.

• Tạo hệ thống biểu tượng và màu sắc chuẩn hóa: xanh (mở cửa), xám (đóng), đỏ (quá giờ),... – đảm bảo nhận diện nhanh.

• Phối hợp với dev để định nghĩa rõ từng trạng thái hiển thị theo giờ giấc, kể cả khi dữ liệu bị thiếu.

• Thiết kế layer bản đồ hành chính với màu phủ bán trong suốt, tương thích với các lớp dữ liệu khác.

Chỉ đường

Mục tiêu thiết kế

Tạo ra trải nghiệm dẫn đường không chỉ đúng – mà còn rõ ràng, dễ đọc, hỗ trợ đa dạng phương tiện và tình huống sử dụng.

Các điểm nổi bật trong thiết kế

1. Tìm đường đa phương tiện – Một chạm, nhiều lựa chọn

• Thanh điều hướng phía trên hỗ trợ đổi nhanh giữa các phương tiện:

  • Ô tô

  • Xe máy

  • Xe đạp

  • Đi bộ

• Thời gian & quãng đường hiển thị theo phương tiện đã chọn → tạo cảm giác “tức thì – chính xác – có cơ sở”.

2. Tìm đường nhiều điểm đến (multi-stop)

• Người dùng có thể thêm nhiều điểm đến, sắp xếp lại thứ tự → rất phù hợp cho:

  • Du lịch nhiều chặng

  • Lên kế hoạch giao hàng, di chuyển phức hợp

• Hệ thống tự động vẽ lại lộ trình và tính toán thời gian lại sau mỗi thay đổi.

3. Bản đồ dẫn đường chi tiết – từng bước rõ ràng

• Hệ thống chỉ đường liệt kê từng bước nhỏ: rẽ trái – đi thẳng – vào vòng xoay...

• Có đo khoảng cách và góc rẽ theo từng bước → rất hữu ích với người đi bộ và xe máy.

• Tích hợp luôn bản đồ bên cạnh → người dùng có thể xem tuyến đường + hướng di chuyển ngay trên nền bản đồ.

4. Thêm địa điểm giữa hành trình

• Popup địa điểm chi tiết (như Ga Cát Linh) cho phép “Thêm điểm đến” chỉ với một chạm – giữ mạch tìm kiếm xuyên suốt.

• Cách này giúp người dùng dễ ghép điểm ngẫu nhiên vào lộ trình mà không cần nhập lại.

Những gì tôi đảm nhiệm trong phần này

Tôi phụ trách thiết kế toàn bộ phần chỉ đường, từ giao diện nhập liệu đến visual hóa lộ trình.

Tôi đã:

• Tạo hệ thống UI component linh hoạt cho nhiều loại phương tiện và trạng thái tuyến đường.

• Thiết kế trải nghiệm thêm/sửa/xoá điểm đến mượt mà – tránh việc người dùng phải làm lại từ đầu.

• Đề xuất flow hiển thị từng bước đi kèm bản đồ thu nhỏ giúp dễ hình dung khi đang di chuyển.

• Kiểm tra UI trên các cỡ màn hình nhỏ để đảm bảo khả năng đọc rõ từng bước trên mobile.

  
  

Chia sẻ

Mục tiêu thiết kế

Giúp người dùng chia sẻ vị trí một cách nhanh chóng, dễ hiểu, và linh hoạt theo thói quen người Việt.

Các điểm nổi bật trong thiết kế

1. Modal nổi bật nhưng không chiếm bản đồ

• Khi nhấn "Chia sẻ", một modal nổi ở trung tâm màn hình, làm mờ nền xung quanh → giúp tập trung vào hành động chia sẻ mà không mất định hướng vị trí.

2. Thông tin trực quan & chuẩn hóa

• Hiển thị:

  • Ảnh địa điểm

  • Tên chính xác

  • Địa chỉ chi tiết

• Phần nội dung này được căn giữa và sắp xếp gọn gàng, giúp người nhận link cũng hiểu rõ địa điểm đó là gì.

3. Chia sẻ theo nền tảng phổ biến tại Việt Nam

• 3 tùy chọn chia sẻ:

  • Sao chép liên kết

  • Facebook

  • Zalo

Đúng hành vi người dùng Việt, không chỉ hỗ trợ mạng xã hội quốc tế mà còn tích hợp nền tảng bản địa.

4. Giao diện đơn giản, dễ thao tác

• Một hành động – một chức năng – không rối rắm.

• Icon rõ ràng + màu sắc nền nút nhẹ nhàng giúp người dùng chạm đúng, không nhầm.

Những gì tôi đảm nhiệm trong phần này

Tôi đảm nhiệm thiết kế giao diện chia sẻ vị trí, tập trung vào tốc độ thao tác và sự thân thiện với người dùng phổ thông.

• Thiết kế layout modal hiển thị đẹp cả trên desktop và mobile.

• Đề xuất chọn lọc nền tảng chia sẻ dựa trên nghiên cứu hành vi người dùng tại Việt Nam.

• Làm việc với team backend để đảm bảo link chia sẻ có thể gắn theo ảnh đại diện và preview thông minh khi gửi qua mạng xã hội.

• Thiết kế icon + bố cục đảm bảo người lớn tuổi cũng dễ nhận biết.

Giao diện Chủ đề Thời tiết

Mục tiêu thiết kế

Thay vì chỉ hiển thị con số, Meey Atlas cung cấp một trải nghiệm thời tiết “có thể cảm nhận được” – trực quan, đa tầng, có hành động gợi ý.

Các điểm nổi bật trong thiết kế

1. Giao diện địa phương – tùy biến theo vị trí

• Dự báo chi tiết cho từng quận/huyện.

• Giao diện thông minh:

  • Nhiệt độ hiện tại + diễn biến theo giờ

  • Độ ẩm, 🌤️ trạng thái trời (nắng, mưa, âm u…)

  • Chỉ số UV (có tooltip bảng phân cấp khi hover)

Trực quan + cảnh báo + dự đoán + khuyến nghị

2. Thông tin đi kèm hành động gợi ý

• Giao diện hiển thị lời khuyên sức khỏe dựa trên thời tiết:

  • UV cao → dùng kem chống nắng, tránh ra đường

  • Ẩm độ thấp → cần dưỡng ẩm, uống nhiều nước

• Icon minh họa cực dễ hiểu (chai nước, khẩu trang, nón, kem chống nắng...)

3. Lớp dữ liệu bản đồ theo chủ đề

• Hiển thị trạng thái thời tiết trên bản đồ toàn quốc theo dạng icon: mây, mưa, nắng 🌧️🌤️☀️

• Có lớp phủ gradient nhiệt độ hiển thị bằng màu sắc (cam – đỏ – xanh lạnh) → cảm nhận vùng nóng/lạnh trực tiếp.

• Hỗ trợ nhiều chế độ:

  • Theo vùng

  • Theo điểm cụ thể

  • Theo ngày (dự báo nhiều ngày tới)

4. Dữ liệu mô phỏng thời tiết động

• Có chế độ mô phỏng gió, nhiệt độ, mưa và bão:

  • Mũi tên gió di chuyển → tạo cảm giác thời tiết “sống”

  • Layer động này rất trực quan cho người xem thời tiết biển, ngư dân, tàu thuyền...

Những gì tôi đảm nhiệm trong phần này

Tôi thiết kế giao diện cho toàn bộ chức năng thời tiết – từ popup thời tiết địa phương đến bản đồ toàn quốc, từ dữ liệu tĩnh đến hiệu ứng động.

• Thiết kế weather card chuẩn hóa: thông tin – màu – icon – tooltip.

• Gợi ý phân tầng cảnh báo UV + khuyến nghị sức khỏe, tạo giá trị gia tăng cho người dùng.

• Đề xuất màu bản đồ và ký hiệu chuẩn khí tượng, giúp người dùng dễ phân biệt trạng thái.

• Làm việc cùng data team để đảm bảo các biểu tượng động không gây rối giao diện.

Chủ đề Chất lượng Không khí (AQI)

Mục tiêu thiết kế

Giúp người dùng dễ dàng tra cứu, hiểu và hành động dựa trên chất lượng không khí quanh họ – qua một bản đồ trực quan, mã màu rõ ràng, và lời khuyên thiết thực.

Các điểm nổi bật trong thiết kế

1. Biểu tượng đo AQI trên bản đồ – mã màu cực kỳ dễ nhận biết

• Chỉ số AQI được hiển thị tại các điểm quan trắc bằng chấm tròn màu + số:

  • 🟢 Tốt (0–50)

  • 🟡 Trung bình (51–100)

  • 🟠 Kém (101–150)

  • 🔴 Xấu (151–200)

  • 🟣 Rất xấu (201–300)

  • 🟤 Nguy hại (300+)

Người dùng nhìn lướt bản đồ là hiểu ngay chất lượng không khí khu vực nào đáng lo.

2. Popup chi tiết chỉ số & cảnh báo sức khỏe

• Giao diện chi tiết gồm:

  • AQI tổng và trạng thái (Tốt/Xấu…)

  • Các chỉ số thành phần (PM2.5, PM10, CO, SO2…)

  • Biểu đồ AQI 8 ngày tới

  • Gợi ý hoạt động nên/tránh dựa trên AQI (đi bộ, chạy, hạn chế ra ngoài, tránh thể thao...)

3. Hiển thị theo khu vực / layer lọc

• Có layer lọc nhanh: chỉ hiển thị điểm "Xấu", "Tốt", hoặc tất cả.

• Tooltip giải thích mỗi cấp độ AQI bằng icon + màu + lời khuyên sức khỏe, giúp người không chuyên vẫn hiểu được.

4. Thiết kế màu sắc nhất quán với chuẩn quốc tế

• Màu sắc và hệ thống phân loại AQI theo chuẩn EPA hoặc tương đương, tạo cảm giác tin cậy, dễ hiểu, không gây hiểu lầm.

Những gì tôi đảm nhiệm trong phần này

Tôi thiết kế toàn bộ phần hiển thị không khí, từ biểu tượng đến popup chi tiết và hệ thống cảnh báo sức khỏe.

• Thiết kế UI biểu tượng AQI phù hợp cả trên desktop và mobile (kể cả khi zoom bản đồ nhỏ).

• Đề xuất phân tầng màu AQI, tạo hệ thống biểu tượng dễ đọc cho người không chuyên.

• Thiết kế popup đa trạng thái: AQI tốt, AQI xấu, AQI rất xấu → mỗi trạng thái hiển thị thông tin và cảnh báo khác nhau.

• Phối hợp với team dữ liệu để xử lý bất thường (thiếu dữ liệu, lỗi sensor, đang cập nhật...).

Chủ đề Du lịch

Mục tiêu thiết kế

Không chỉ giúp người dùng tìm địa điểm du lịch, mà còn giúp họ khám phá, lên lịch trình và cảm nhận không khí trước cả khi đến nơi.

Điểm nổi bật trong thiết kế

1. Giao diện giới thiệu quốc gia – vùng đất – điểm đến

• Mở đầu với modal lớn về “Việt Nam”, có hình ảnh cờ + cảnh đẹp → tạo cảm xúc yêu nước & khám phá.

• Tiếp theo là card điểm đến hấp dẫn (Phú Quốc, Hồ Gươm, Tam Cốc…) với hình ảnh đẹp, rõ vùng miền.

• Mỗi card đều được chuẩn hóa: Tên + địa phương, phù hợp cả khi duyệt bằng mobile/tablet.

2. Popup điểm đến du lịch chi tiết

• Giao diện gồm:

  • Ảnh nổi bật

  • Giờ mở cửa

  • Vị trí + dẫn đường

  • Mô tả ngắn + nút "Xem thêm"

  • Tour 360 (nút bật giao diện 3D quay thực tế)

3. Tính năng Tour 360 độ

• Trải nghiệm không gian chụp thực tế dạng 3D xoay 360° như Google Street View.

• Người dùng có thể kéo chuột để xem toàn cảnh xung quanh, click ảnh nhỏ để chuyển không gian.

• Tích hợp thêm mô tả văn bản (popup bên phải) khi cần tìm hiểu sâu hơn → học & đi cùng lúc.

4. Tiện ích du lịch xung quanh

• Giao diện đề xuất địa điểm gần đó trong bán kính 5km:

  • Nhà hàng, khách sạn, ATM, quán cà phê...

• Giúp người dùng lên kế hoạch ngay trên bản đồ, không cần chuyển app khác.

Những gì tôi đảm nhiệm trong phần này

Tôi phụ trách thiết kế toàn bộ giao diện du lịch từ giao diện quốc gia – popup chi tiết – trải nghiệm Tour 360.

• Thiết kế layout card điểm đến phù hợp cho người khám phá nhanh, có thể mở rộng số lượng vô hạn theo vùng miền.

• Tối ưu UI cho Tour 360 độ: giữ không gian hình ảnh lớn, icon điều hướng rõ ràng, không đè lên nội dung chính.

• Thiết kế hệ thống gợi ý tiện ích xung quanh sử dụng icon + phân loại gọn gàng.

• Gợi ý chia popup thành các tầng: mô tả ngắn → tour 360 → thông tin chi tiết → gallery → giúp người dùng đọc theo nhu cầu.

Chủ đề Bất động sản

Mục tiêu thiết kế

Không chỉ giúp người dùng tìm được bất động sản, mà còn hiểu được bức tranh thị trường theo khu vực: giá trị, biến động, mật độ, tiềm năng.

Các điểm nổi bật trong thiết kế

1. Hiển thị mức giá trung bình trên bản đồ

• Mỗi khu vực hiển thị mức giá trung bình/m², ví dụ:

  • 🟡 21 tr/m²

  • 🔴 32 tr/m²

• Phân theo từng quận/huyện hoặc bán kính → giúp định vị khu vực giá cao – giá rẻ nhanh chóng.

2. Mã màu theo biên độ giá

• Có từ 2 đến 3 màu nổi bật:

  • Cam/vàng: trung bình

  • Đỏ: cao

  • Xanh/nhạt: thấp

• Hệ mã màu giúp đánh giá cơ hội đầu tư chỉ trong vài giây.

3. Chế độ vệ tinh và đơn giản

• Cho phép chuyển đổi giữa:

  • Chế độ bản đồ thường

  • Vệ tinh (xem hạ tầng xung quanh)

• Phù hợp với nhà đầu tư muốn khảo sát khu vực chưa phát triển nhưng hạ tầng đang xây dựng.

4. Phân loại theo chủ đề BĐS

• Có thể lọc theo:

  • Chung cư

  • Đất nền

  • Thương mại

• Mỗi loại có icon và màu riêng → hỗ trợ phân tích chuyên sâu hơn cho từng nhóm người dùng.

Những gì tôi đảm nhiệm trong phần này

Tôi chịu trách nhiệm thiết kế UI bản đồ phân tích giá trị BĐS, định hướng trực quan hóa dữ liệu cho người mua và nhà đầu tư cá nhân.

• Thiết kế hệ thống icon BĐS (theo loại sản phẩm: nhà, đất, chung cư…).

• Xây dựng cách hiển thị mức giá theo vùng, đảm bảo rõ ràng mà không rối mắt.

• Gợi ý màu sắc dữ liệu theo hướng “thị trường nóng – nguội – tiềm năng”.

• Đảm bảo tính tương thích trên các kích thước màn hình và khả năng tương tác trên thiết bị cảm ứng.

Tìm điểm Bus

Mục tiêu thiết kế

Giúp người dùng tra cứu, lập kế hoạch và theo dõi tuyến xe buýt một cách trực quan – dễ dùng – thân thiện với cả người lớn tuổi và người đi lại thường xuyên.

Các điểm nổi bật trong thiết kế

1. Tìm điểm bus quanh vị trí

• Bản đồ tự động hiển thị các điểm đỗ xe buýt quanh vị trí người dùng.

• Tooltip hiển thị:

  • Tên điểm

  • Số hiệu tuyến đi qua

  • Thời gian hoạt động

Dễ dàng chọn điểm gần nhất mà không cần nhập địa chỉ.

2. Tìm tuyến xe theo số hiệu

• Giao diện tra cứu tuyến theo:

  • Số tuyến (VD: 09A, 22B…)

  • Lộ trình từ – đến

• Khi chọn một tuyến cụ thể:

  • Hiển thị hành trình đi – về

  • Tô đậm tuyến trên bản đồ

  • Danh sách điểm dừng và vị trí hiện tại

3. Lập kế hoạch di chuyển bằng bus

• Người dùng nhập điểm A – B → hệ thống gợi ý:

  • Tuyến xe phù hợp nhất

  • Tổng thời gian dự kiến

  • Số lần đổi xe (nếu có)

• Thay vì chỉ xem bản đồ, giờ đây họ có thể lên kế hoạch đi lại bằng bus mà không cần Google Maps.

4. Giao diện tối giản – dễ dùng

• Thiết kế theo mô hình 3 cột:

  • Cột trái: danh sách tuyến hoặc điểm

  • Trung tâm: bản đồ tương tác

  • Cột phải (nếu cần): thông tin chi tiết, gợi ý

• Tối ưu hiển thị khi thu nhỏ trình duyệt (mobile-first thinking)

Những gì tôi đảm nhiệm trong phần này

Tôi chịu trách nhiệm thiết kế luồng UX cho việc tìm tuyến – tìm điểm – hiển thị lộ trình và gợi ý hành trình bus trên nền bản đồ.

• Thiết kế hệ thống icon trạm + đường tuyến dễ phân biệt (đi/về, trạm trung chuyển…)

• Đề xuất luồng “Gợi ý hành trình bằng bus” – nhập điểm A → B → chọn tuyến

• Tối ưu bố cục để không rối mắt, đặc biệt khi có nhiều tuyến chồng lên nhau

• Hỗ trợ thiết kế bộ lọc theo số tuyến / hướng đi / điểm đến cuối cùng

Đóng góp thông tin

Mục tiêu thiết kế

Giúp người dùng cập nhật, chỉnh sửa, đề xuất địa điểm mới hoặc xóa thông tin sai lệch – từ đó xây dựng một hệ sinh thái bản đồ chính xác và cập nhật liên tục, do cộng đồng đóng góp.

Các chức năng chính

1. Thêm một địa điểm mới

• Form điền thông tin rõ ràng:

  • Tên địa điểm, Danh mục, Địa chỉ

  • Vị trí bản đồ (có thể chỉnh lại bằng “Chỉnh sửa vị trí trên bản đồ”)

  • Số điện thoại, website, ảnh địa điểm (nếu có)

• Tự động kiểm tra trùng lặp địa điểm để hạn chế spam

Tính năng đáng chú ý:

Giao diện map tương tác cho phép kéo pin chỉnh sửa lại vị trí chính xác, rất thân thiện với người dùng.

2. Sửa địa điểm có sẵn

• Cho phép chỉnh:

  • Tên địa điểm, loại hình, địa chỉ

  • Thêm hình ảnh, cập nhật số điện thoại, website

Thiết kế theo phong cách inline-edit giúp người dùng chỉ cần sửa phần cần thiết, không phải điền lại toàn bộ.

3. Báo cáo địa điểm sai lệch / xóa

• Giao diện báo cáo trực quan:

  • Tạm thời đóng cửa

  • Đóng vĩnh viễn

  • Không tồn tại ở đây

  • Trùng lặp

  • Phản cảm, sai sự thật

• Cho phép đính kèm ảnh chứng minh (mặt tiền, biển hiệu, thông báo...)

Có liên kết "Xác nhận quyền sở hữu doanh nghiệp", mở ra khả năng chuyển đổi bản đồ thành công cụ quản lý địa điểm chính thống.

Những gì tôi đảm nhiệm trong phần này

Tôi chịu trách nhiệm thiết kế UX toàn bộ hành trình người dùng đóng góp dữ liệu địa điểm, bao gồm cả logic xác thực và phân quyền.

• Thiết kế UI theo hướng “Form theo ngữ cảnh” – chỉ hiển thị các field phù hợp với từng hành động.

• Đảm bảo trải nghiệm liền mạch giữa:

  • Tìm địa điểm → Xem chi tiết → Chọn “Sửa” hoặc “Báo cáo”

  • Giao diện tương tác vị trí (map edit)

• Làm việc với đội backend để đề xuất các trạng thái phê duyệt: Chờ duyệt – Được xác thực – Bị từ chối

Kết quả & tác động thực tế

A/B Testing (nội bộ Meey)

Tôi phối hợp cùng team sản phẩm thực hiện A/B test giữa giao diện cũ (login đơn thuần) và giao diện tôi đề xuất:

User feedback: “Mọi thứ rõ ràng, không cảm giác bị ép buộc phải tạo tài khoản, lại có nhiều cách để đăng nhập.”

Tác động hệ sinh thái

• Giao diện đăng nhập giúp thúc đẩy MeeyID như một nền tảng xác thực trung tâm.

• Tăng tỷ lệ đăng nhập thành công → tăng tỷ lệ khám phá các chủ đề bản đồ như Thời tiết, Chỉ đường, Du lịch, BĐS.