Meey Finance
Tổng quan
Nền tảng giúp người dùng phổ thông dễ dàng quản lý tài sản, đăng ký tư vấn viên, tham gia đầu tư và truy cập các dịch vụ tài chính phức tạp một cách đơn giản.
Ngày bắt đầu
3 thg 12, 2022
Khách hàng
Meey Group
Bối cảnh & Vấn đề
Người dùng phổ thông thường gặp khó khăn khi tiếp cận các dịch vụ tài chính như đầu tư, quản lý tài sản, hoặc tư vấn hợp đồng. Meey Finance đặt mục tiêu trở thành một siêu ứng dụng tài chính, nơi người dùng có thể:
Đăng ký tài khoản dễ dàng (kể cả với người ít hiểu công nghệ).
Theo dõi tài sản (đa kênh: đầu tư, vay, ngân hàng, hợp đồng).
Trải nghiệm đầu tư một cách "mềm mại", không áp lực, không phức tạp.
Quy trình tiếp cận
1. System Thinking – Phân tích tổng thể
Tôi bắt đầu bằng việc dựng App Map tổng quan giúp toàn bộ team thấy rõ phạm vi tính năng, kết nối logic giữa các module:
Core: Đăng ký, đăng nhập, xác thực
Đầu tư – tài sản – ngân hàng – hợp đồng
Quản lý tư vấn viên (2 phân hệ: End User & Admin)
2. User Journey – Hiểu người dùng từ nỗi đau đến giải pháp
Tôi xây dựng 2 bảng Journey:
End User: Tập trung vào hành trình từ đăng ký → đầu tư → theo dõi tài sản
Admin: Tập trung vào việc vận hành hệ thống (setup sản phẩm, quản lý hợp đồng…)
🎯 Insight rút ra:
Người dùng phổ thông lo sợ mất tiền, thiếu niềm tin, thiếu trải nghiệm tài chính số.
Admin lo ngại thao tác setup phức tạp, rườm rà.
3. User Flow – Thiết kế theo logic thực tế
Tôi vẽ chi tiết 4 flow chính:
Đăng ký đăng nhập (với cả sinh trắc học & xác thực nhiều tầng)
Đầu tư (bao gồm xác minh, chọn gói, ký hợp đồng…)
Quản lý tài khoản (thêm tài khoản ngân hàng, thêm địa chỉ nhận hợp đồng…)
Quản lý sale (luồng đăng ký và xác thực từ phía tư vấn viên)
Flow được vẽ chi tiết đến từng quyết định nhánh (Yes/No), xử lý cả các tình huống thất bại.
4. Thiết kế UI – Tối ưu từng touchpoint
Tôi thiết kế giao diện cho 10 nhóm màn hình chính, tiêu biểu:
Đăng ký & Login: Hỗ trợ sinh trắc học, xử lý lỗi sinh trắc học, đăng nhập không sinh trắc, avatar mặc định, đăng nhập lại dễ dàng.
Trang chủ đầu tư: Skeleton & Lazy load, giao diện hoạt họa nhẹ, hiển thị biến động tài sản.
Tư vấn viên: Giao diện quản lý 2 tầng (Tư vấn viên và Admin), xử lý empty state & phân quyền.
Hộp thư: Giao diện thông báo theo nhóm, swipe để xoá, xem chi tiết.
💡 Tôi dùng các pattern vi mô như:
Bottom bar co giãn khi scroll
Popup xác nhận trước khi xóa
Empty state và hướng dẫn CTA rõ ràng
Công cụ sử dụng
Figma (design + prototyping)
FigJam (flow, journey, brainstorm)
Notion (documentation & backlog UX)
Tổng quan luồng & các nhóm tính năng chính
Tôi đã chia các màn theo 12 page, và định hình 4 nhóm chức năng lớn:
Nhóm tính năng | Bao gồm các page |
|---|---|
A. Onboarding | Page 1 (Đăng nhập), Page 2 (Đăng ký), Page 11 (System) |
B. Trang chính & trải nghiệm | Page 3 (Home), Page 5 (Hộp thư), Page 6 (Cá nhân + Tư vấn viên) |
C. Chức năng tài chính | Page 4 (Scan QR), Page 7 (Đầu tư), Page 8 (Tài sản), Page 10 (Nguồn vốn) |
D. Quản lý & hệ thống | Page 9 (Ngân hàng), App map, Journey map |
Nhóm A: Onboarding
Gồm các page:
Page 1: Đăng nhập
Page 2: Đăng ký
Page 11: System (quyền truy cập, lỗi hệ thống, kết nối, cập nhật...)
Ứng dụng Meey Finance hướng đến đối tượng người dùng phổ thông trong lĩnh vực đầu tư và quản lý tài chính. Do đó, trải nghiệm đầu vào (onboarding) cần đảm bảo:
Dễ tiếp cận, đơn giản nhưng an toàn.
Hỗ trợ đa kịch bản (người mới, người cũ, người quên mật khẩu, dùng sinh trắc học, lỗi hệ thống…).
Tối ưu hiệu suất và tăng tỷ lệ chuyển đổi đăng ký.
Tôi chịu trách nhiệm UX flow, UI design, logic xử lý và error state cho toàn bộ nhóm onboarding:
Mapping đầy đủ các trường hợp edge-case (mạng yếu, FaceID fail, nhập sai, thiết bị không hỗ trợ…).
Thiết kế hệ thống thông báo lỗi dễ hiểu, nhất quán.
Tối ưu entry-point để tăng tỷ lệ đăng ký thành công và giảm bỏ cuộc giữa chừng.
Kỹ năng | Cách áp dụng |
|---|---|
UX logic | Mapping >10 flow phụ cho đăng nhập/đăng ký: sinh trắc học, xác minh OTP, tạo mật khẩu, quên mật khẩu, thiết bị không hỗ trợ… |
Thiết kế UI phản hồi | Các state lỗi: nhập sai mật khẩu, OTP sai, hệ thống lỗi, avatar mặc định, skeleton loading, v.v… |
Design for fallback | Dự đoán tình huống lỗi phần cứng (camera, flash) hoặc quyền hệ điều hành can thiệp — có hướng dẫn cụ thể. |
Tư duy hệ thống | Làm việc chặt với BA để phân biệt lỗi BE vs lỗi hệ điều hành. |
Page 1: Đăng nhập
Đăng nhập bằng sinh trắc học → huỷ → tự focus vào ô password.
Nhận diện lại → sai → thông báo rõ ràng + tùy chọn “Chuyển đổi tài khoản”.
Hiện avatar người dùng hoặc avatar mặc định.
Tư duy UX:
Giữ lại trải nghiệm thân thuộc với người cũ (auto điền tên, gợi nhắc).
Ưu tiên người dùng mới dễ tiếp cận — hiển thị rõ tùy chọn “Đăng ký”.
Page 2: Đăng ký
Đăng ký thường / qua liên kết sale / từ QR code.
Xác minh OTP: lỗi từng ký tự, hết hạn, gửi lại, loading...
Đặt mật khẩu: xác thực độ mạnh, xác nhận trùng khớp.
Kỹ thuật xử lý:
Sử dụng skeleton UI để tránh nhấp nháy khi loading trạng thái.
Nhận diện Galaxy Fold để kiểm tra hiển thị theo tỉ lệ đặc biệt.
Cảnh báo nếu thiết bị không có NFC / camera.
Page 11: System
Các case quan trọng:
Thiết bị không hỗ trợ (iOS can thiệp camera / bộ nhớ ảnh).
Kết nối yếu → popup lỗi kết nối.
Cập nhật phiên bản → buộc cập nhật khi cần.
Thiếu quyền app → hướng dẫn mở setting.
UX Decision:
Tránh để user "mò" lỗi → cung cấp hướng dẫn thao tác bằng ngôn ngữ tự nhiên.
Dùng màu đỏ/xanh tiêu chuẩn cho các loại lỗi / trạng thái để tạo phản xạ.
👑 Kết quả
Giảm 40% tỷ lệ rớt giữa chừng khi đăng ký (so với prototype đầu).
Tăng 1.7x tỷ lệ hoàn tất đăng ký tài khoản từ landing page QR.
Tối ưu trải nghiệm cho >95% tình huống lỗi thiết bị phổ biến.
Nhóm B: Trang chính
Gồm các page:
Page 3: Home
Page 4: Scan QR Code
Page 5: Hộp thư
Tôi phụ trách mapping flow người dùng thực tế, kết hợp với các nhóm BA và vận hành để:
Thiết kế màn Home động tùy theo vai trò (Admin / Nhà đầu tư).
Thiết kế logic Scan QR Code kèm hệ thống cảnh báo và lỗi.
Thiết kế lại Hộp thư, bao gồm cả xem – xoá – popup xác nhận và trạng thái rỗng.
Mục tiêu UX chính | Vai trò cụ thể |
|---|---|
Tạo cảm giác "có gì đó dành cho tôi" | Hiển thị nội dung cá nhân hoá trên Home |
Hành động ngay (Scan) | Rút ngắn thời gian thao tác khi khách đầu tư offline |
Giao tiếp tức thì | Kênh “Hộp thư” chứa thông báo, CTKM, cảnh báo, xác nhận |
Page 3: Home
Home chia theo vai trò:
Khách hàng: Portfolio đầu tư, sự kiện, tin tức, sản phẩm đang mở.
Tư vấn viên: Bảng KPI cá nhân, khách hàng mới nhất, link chia sẻ nhanh.
Tích hợp module sự kiện truyền thông khi có event.
Áp dụng skeleton loading giúp cảm giác load mượt, tránh flash trắng.
UX logic:
Không dồn quá nhiều module đầu màn hình → ưu tiên hiển thị giá trị rõ ràng như "Tài sản hôm nay", "Sản phẩm đang mở bán".
Nếu vắng khách hàng (tư vấn viên mới), hệ thống hiển thị lời mời kết nối để giữ engagement.
Page 4: Scan QR Code
Những luồng đã xử lý:
Scan QR hợp lệ → chuyển đúng link (sản phẩm, xác minh, đăng ký…).
QR không hợp lệ → hiện toast message + icon cảnh báo.
Cho phép bật/tắt flash, chọn ảnh từ thư viện để quét.
Thiết bị không có camera → hiện popup + điều hướng xử lý thủ công.
Điều đặc biệt:
Xây dựng quy trình fallback khi:
Người dùng dùng thiết bị giả lập / camera lỗi.
Trình duyệt không hỗ trợ (nếu là webapp).
Page 5: Hộp thư
Tính năng chính:
Thông báo theo tag màu (xanh, đỏ, vàng) để phân loại nội dung.
Vuốt trái xoá + popup xác nhận khi người dùng click xoá.
Xử lý xem chi tiết → mở nội dung dạng long-read.
Có trạng thái trống đẹp mắt khi không có thư.
Tối ưu UX:
Không để người dùng "lạc lõng" khi hết thư → hiển thị CTA gợi ý hành động tiếp theo.
Popup xác nhận xoá đơn giản, nhấn mạnh yếu tố “không thể hoàn tác” để giảm lỗi người dùng.
Kỹ năng | Cách áp dụng |
|---|---|
Conditional Rendering | Hiển thị các khối nội dung Home tùy theo vai trò người dùng |
Fallback UX | QR không quét được, camera lỗi, quyền chưa cấp – đều có luồng xử lý cụ thể |
Micro-interaction | Vuốt xoá thư, loading skeleton, popup xác nhận |
Design for Empty State | Thiết kế “Hộp thư trống” & Home khi không có dữ liệu thực tế |
👑 Kết quả
Thời gian trung bình đọc thư tăng 24% sau khi tối ưu giao diện và chi tiết.
Tăng 3.2 lần lượt scan QR sau khi thêm logic flash / chọn ảnh.
Tỷ lệ tương tác lại sau đăng nhập tăng rõ khi Home hiển thị đúng vai trò.
Nhóm C: Đầu tư & Tài sản
Gồm các page:
Page 7: Đầu tư
Page 8: Tài sản
Page 10: Nguồn vốn
Mục tiêu | Vai trò UX |
|---|---|
Đơn giản hóa sản phẩm đầu tư phức tạp | Thiết kế luồng đầu tư dạng từng bước (step form) |
Làm rõ giá trị đầu tư – rủi ro – kỳ hạn | Trình bày trực quan, biểu đồ, mô tả dễ hiểu |
Theo dõi tài sản đã đầu tư & trạng thái | Giao diện tổng quan tài sản, hợp đồng, sinh lời |
Minh bạch dòng vốn | Kết nối tài khoản ngân hàng + dòng tiền đi/đến |
Page 7: Đầu tư
Hiển thị sản phẩm đang mở bán, theo mức độ rủi ro & kỳ hạn.
Khi click vào → mở chi tiết sản phẩm: mô tả, pháp lý, bảng tính lợi nhuận.
Luồng đầu tư:
Xác thực KYC
Chọn sản phẩm
Nhập số tiền
Ký hợp đồng điện tử
Xác nhận chuyển khoản
Điểm UX mạnh:
Luồng từng bước (Step form) giúp người dùng dễ theo dõi tiến trình.
Giao diện chi tiết đầu tư cho phép tra cứu giấy tờ pháp lý → tăng độ tin cậy.
Có flow fallback nếu chưa xác minh: hiện popup → điều hướng về KYC.
Page 8: Tài sản
Xem toàn bộ danh mục đầu tư đã thực hiện.
Hiển thị:
Tổng tài sản hiện có
Biểu đồ phân bổ theo loại hình đầu tư
Từng hợp đồng: trạng thái, sinh lời, kỳ hạn
UX:
Biểu đồ phân bổ dạng donut chart đơn giản dễ hiểu.
Trạng thái tài sản rõ ràng:
Đang hoạt động
Đã đáo hạn
Đang xét duyệt
Nếu không có dữ liệu → hiện “Empty State” với CTA mời đầu tư.
Page 10: Nguồn vốn
Kết nối tài khoản ngân hàng
Quản lý thông tin chuyển khoản
Kiểm tra lịch sử nạp vốn
Phân loại theo: ngân hàng cá nhân / ngân hàng công ty
Vấn đề tôi giải quyết:
Người dùng có thể gặp lỗi khi:
Không nhớ STK
Không biết cách đối soát giao dịch
Tôi thiết kế giao diện:
Hiển thị rõ mã đối soát cá nhân
Hướng dẫn cách chuyển khoản chuẩn
Có logic nếu hệ thống không tìm thấy giao dịch
Kỹ năng | Áp dụng |
|---|---|
Process simplification | Chuyển luồng đầu tư phức tạp thành từng bước nhỏ, có chỉ dẫn |
Information hierarchy | Ưu tiên thông tin pháp lý – mô tả – CTA rõ ràng |
Error prevention | Tránh nhập sai số tiền, chưa xác minh mà vẫn thao tác được |
Data visualization | Biểu đồ đơn giản mà giàu thông tin – giúp người dùng có niềm tin hơn vào tài sản |
Kết quả
Tăng 48% lượt xem chi tiết sản phẩm đầu tư sau khi cải thiện layout mô tả & biểu đồ.
Tăng gấp đôi tỷ lệ hoàn thành đầu tư khi thiết kế step-by-step flow.
Tỷ lệ "đầu tư xong nhưng không biết theo dõi ở đâu" giảm còn <10%.
Nhóm D: Hệ thống & Quản trị
Gồm các page:
Page 6: Cá nhân + Tư vấn viên
Page 9: Ngân hàng
Page 11 (phần liên quan đến quyền truy cập, hệ thống)
Logic liên quan đến chuyển đổi vai trò, xác thực, và quyền hệ thống
Tôi đóng vai trò “thiết kế tổng hợp”:
Mapping tất cả các vai trò & hành vi có thể có (admin, khách, tư vấn viên).
Thiết kế giao diện đa mục đích: người mới – người đã xác minh – người đã đầu tư – người vừa là tư vấn vừa là khách.
Logic kiểm tra vai trò khi đăng nhập, đồng bộ menu và quyền truy cập theo user type.
Mục tiêu | UX cần đáp ứng |
|---|---|
Quản lý vai trò người dùng rõ ràng | End user ↔ Tư vấn viên ↔ Quản trị viên |
Giao diện hồ sơ cá nhân dễ truy cập | Thông tin cơ bản, tài khoản, tài sản |
Hỗ trợ hành vi đăng ký sale | Đăng ký – xác minh – liên kết khách hàng |
Bảo mật & truy cập hệ thống | Quyền camera, flash, thiết bị |
Page 6: Cá nhân + Tư vấn viên
Với người dùng cá nhân:
Xem hồ sơ, tài sản, cài đặt bảo mật.
Trạng thái xác thực tài khoản.
Thêm tài khoản ngân hàng, số điện thoại phụ.
Với tư vấn viên:
Bảng quản lý khách hàng → lọc theo trạng thái: “chưa đầu tư”, “đang xử lý”, “hoàn thành”.
KPI bản thân: Doanh số, số lượt mời thành công.
Giao diện đăng ký làm tư vấn viên: từng bước, có xác minh.
UX:
Chuyển đổi vai trò mượt mà: giữ session, không load lại toàn bộ app.
Giao diện tư vấn viên gọn, rõ, không rối cho người ít kinh nghiệm số.
Nếu là người dùng chưa từng xác minh → hướng dẫn bật định danh.
Page 9: Ngân hàng
Kết nối tài khoản ngân hàng để rút tiền
Danh sách ngân hàng đã xác minh
Chọn tài khoản mặc định
UX logic:
Hiển thị đầy đủ thông tin ngân hàng: tên chủ tài khoản, STK, ngân hàng.
Có luồng kiểm tra trùng lặp tài khoản → báo lỗi nếu STK đã dùng.
Flow chọn tài khoản chính rõ ràng – chỉ 1 tài khoản có thể là mặc định.
Page 11 (System – quyền truy cập)
Các tình huống đã xử lý:
Người dùng từ chối quyền camera → hiện modal hướng dẫn mở lại.
Người dùng không bật flash → có fallback.
Thiết bị không hỗ trợ NFC / camera → thông báo rõ, không bị crash.
Kỹ năng | Áp dụng |
|---|---|
Design for Roles | Xác định logic hiển thị khác nhau theo vai trò |
Flow Mapping | Người dùng có thể trở thành TVV từ home, hoặc từ lời mời → tôi xây flow hợp nhất |
Error Scenario Design | Với mỗi quyền hệ thống → đều có hướng xử lý & mô tả người dùng dễ hiểu |
UX cho Admin | Quản lý khách, xem báo cáo → tôi tạo màn quản trị đơn giản, dễ thao tác trên mobile |
Kết quả
Giảm 60% trường hợp chuyển đổi vai trò bị lỗi session.
Tăng 35% người dùng tự đăng ký làm tư vấn viên nhờ form đơn giản, rõ ràng.
Số lỗi người dùng từ chối quyền hệ thống nhưng không biết xử lý gần như về 0.
Kết quả tổng quát
Tăng tỷ lệ đăng ký thành công sau 3 bước: +28%
Giảm 40% thời gian hoàn tất đăng ký đầu tư nhờ thiết kế flow mạch lạc
Feedback từ người dùng thử nghiệm: "Ứng dụng dễ hiểu, nhìn đã tin tưởng rồi"
Meey Finance
Tổng quan
Nền tảng giúp người dùng phổ thông dễ dàng quản lý tài sản, đăng ký tư vấn viên, tham gia đầu tư và truy cập các dịch vụ tài chính phức tạp một cách đơn giản.
Ngày bắt đầu
3 thg 12, 2022
Khách hàng
Meey Group
Bối cảnh & Vấn đề
Người dùng phổ thông thường gặp khó khăn khi tiếp cận các dịch vụ tài chính như đầu tư, quản lý tài sản, hoặc tư vấn hợp đồng. Meey Finance đặt mục tiêu trở thành một siêu ứng dụng tài chính, nơi người dùng có thể:
Đăng ký tài khoản dễ dàng (kể cả với người ít hiểu công nghệ).
Theo dõi tài sản (đa kênh: đầu tư, vay, ngân hàng, hợp đồng).
Trải nghiệm đầu tư một cách "mềm mại", không áp lực, không phức tạp.
Quy trình tiếp cận
1. System Thinking – Phân tích tổng thể
Tôi bắt đầu bằng việc dựng App Map tổng quan giúp toàn bộ team thấy rõ phạm vi tính năng, kết nối logic giữa các module:
Core: Đăng ký, đăng nhập, xác thực
Đầu tư – tài sản – ngân hàng – hợp đồng
Quản lý tư vấn viên (2 phân hệ: End User & Admin)
2. User Journey – Hiểu người dùng từ nỗi đau đến giải pháp
Tôi xây dựng 2 bảng Journey:
End User: Tập trung vào hành trình từ đăng ký → đầu tư → theo dõi tài sản
Admin: Tập trung vào việc vận hành hệ thống (setup sản phẩm, quản lý hợp đồng…)
🎯 Insight rút ra:
Người dùng phổ thông lo sợ mất tiền, thiếu niềm tin, thiếu trải nghiệm tài chính số.
Admin lo ngại thao tác setup phức tạp, rườm rà.
3. User Flow – Thiết kế theo logic thực tế
Tôi vẽ chi tiết 4 flow chính:
Đăng ký đăng nhập (với cả sinh trắc học & xác thực nhiều tầng)
Đầu tư (bao gồm xác minh, chọn gói, ký hợp đồng…)
Quản lý tài khoản (thêm tài khoản ngân hàng, thêm địa chỉ nhận hợp đồng…)
Quản lý sale (luồng đăng ký và xác thực từ phía tư vấn viên)
Flow được vẽ chi tiết đến từng quyết định nhánh (Yes/No), xử lý cả các tình huống thất bại.
4. Thiết kế UI – Tối ưu từng touchpoint
Tôi thiết kế giao diện cho 10 nhóm màn hình chính, tiêu biểu:
Đăng ký & Login: Hỗ trợ sinh trắc học, xử lý lỗi sinh trắc học, đăng nhập không sinh trắc, avatar mặc định, đăng nhập lại dễ dàng.
Trang chủ đầu tư: Skeleton & Lazy load, giao diện hoạt họa nhẹ, hiển thị biến động tài sản.
Tư vấn viên: Giao diện quản lý 2 tầng (Tư vấn viên và Admin), xử lý empty state & phân quyền.
Hộp thư: Giao diện thông báo theo nhóm, swipe để xoá, xem chi tiết.
💡 Tôi dùng các pattern vi mô như:
Bottom bar co giãn khi scroll
Popup xác nhận trước khi xóa
Empty state và hướng dẫn CTA rõ ràng
Công cụ sử dụng
Figma (design + prototyping)
FigJam (flow, journey, brainstorm)
Notion (documentation & backlog UX)
Tổng quan luồng & các nhóm tính năng chính
Tôi đã chia các màn theo 12 page, và định hình 4 nhóm chức năng lớn:
Nhóm tính năng | Bao gồm các page |
|---|---|
A. Onboarding | Page 1 (Đăng nhập), Page 2 (Đăng ký), Page 11 (System) |
B. Trang chính & trải nghiệm | Page 3 (Home), Page 5 (Hộp thư), Page 6 (Cá nhân + Tư vấn viên) |
C. Chức năng tài chính | Page 4 (Scan QR), Page 7 (Đầu tư), Page 8 (Tài sản), Page 10 (Nguồn vốn) |
D. Quản lý & hệ thống | Page 9 (Ngân hàng), App map, Journey map |
Nhóm A: Onboarding
Gồm các page:
Page 1: Đăng nhập
Page 2: Đăng ký
Page 11: System (quyền truy cập, lỗi hệ thống, kết nối, cập nhật...)
Ứng dụng Meey Finance hướng đến đối tượng người dùng phổ thông trong lĩnh vực đầu tư và quản lý tài chính. Do đó, trải nghiệm đầu vào (onboarding) cần đảm bảo:
Dễ tiếp cận, đơn giản nhưng an toàn.
Hỗ trợ đa kịch bản (người mới, người cũ, người quên mật khẩu, dùng sinh trắc học, lỗi hệ thống…).
Tối ưu hiệu suất và tăng tỷ lệ chuyển đổi đăng ký.
Tôi chịu trách nhiệm UX flow, UI design, logic xử lý và error state cho toàn bộ nhóm onboarding:
Mapping đầy đủ các trường hợp edge-case (mạng yếu, FaceID fail, nhập sai, thiết bị không hỗ trợ…).
Thiết kế hệ thống thông báo lỗi dễ hiểu, nhất quán.
Tối ưu entry-point để tăng tỷ lệ đăng ký thành công và giảm bỏ cuộc giữa chừng.
Kỹ năng | Cách áp dụng |
|---|---|
UX logic | Mapping >10 flow phụ cho đăng nhập/đăng ký: sinh trắc học, xác minh OTP, tạo mật khẩu, quên mật khẩu, thiết bị không hỗ trợ… |
Thiết kế UI phản hồi | Các state lỗi: nhập sai mật khẩu, OTP sai, hệ thống lỗi, avatar mặc định, skeleton loading, v.v… |
Design for fallback | Dự đoán tình huống lỗi phần cứng (camera, flash) hoặc quyền hệ điều hành can thiệp — có hướng dẫn cụ thể. |
Tư duy hệ thống | Làm việc chặt với BA để phân biệt lỗi BE vs lỗi hệ điều hành. |
Page 1: Đăng nhập
Đăng nhập bằng sinh trắc học → huỷ → tự focus vào ô password.
Nhận diện lại → sai → thông báo rõ ràng + tùy chọn “Chuyển đổi tài khoản”.
Hiện avatar người dùng hoặc avatar mặc định.
Tư duy UX:
Giữ lại trải nghiệm thân thuộc với người cũ (auto điền tên, gợi nhắc).
Ưu tiên người dùng mới dễ tiếp cận — hiển thị rõ tùy chọn “Đăng ký”.
Page 2: Đăng ký
Đăng ký thường / qua liên kết sale / từ QR code.
Xác minh OTP: lỗi từng ký tự, hết hạn, gửi lại, loading...
Đặt mật khẩu: xác thực độ mạnh, xác nhận trùng khớp.
Kỹ thuật xử lý:
Sử dụng skeleton UI để tránh nhấp nháy khi loading trạng thái.
Nhận diện Galaxy Fold để kiểm tra hiển thị theo tỉ lệ đặc biệt.
Cảnh báo nếu thiết bị không có NFC / camera.
Page 11: System
Các case quan trọng:
Thiết bị không hỗ trợ (iOS can thiệp camera / bộ nhớ ảnh).
Kết nối yếu → popup lỗi kết nối.
Cập nhật phiên bản → buộc cập nhật khi cần.
Thiếu quyền app → hướng dẫn mở setting.
UX Decision:
Tránh để user "mò" lỗi → cung cấp hướng dẫn thao tác bằng ngôn ngữ tự nhiên.
Dùng màu đỏ/xanh tiêu chuẩn cho các loại lỗi / trạng thái để tạo phản xạ.
👑 Kết quả
Giảm 40% tỷ lệ rớt giữa chừng khi đăng ký (so với prototype đầu).
Tăng 1.7x tỷ lệ hoàn tất đăng ký tài khoản từ landing page QR.
Tối ưu trải nghiệm cho >95% tình huống lỗi thiết bị phổ biến.
Nhóm B: Trang chính
Gồm các page:
Page 3: Home
Page 4: Scan QR Code
Page 5: Hộp thư
Tôi phụ trách mapping flow người dùng thực tế, kết hợp với các nhóm BA và vận hành để:
Thiết kế màn Home động tùy theo vai trò (Admin / Nhà đầu tư).
Thiết kế logic Scan QR Code kèm hệ thống cảnh báo và lỗi.
Thiết kế lại Hộp thư, bao gồm cả xem – xoá – popup xác nhận và trạng thái rỗng.
Mục tiêu UX chính | Vai trò cụ thể |
|---|---|
Tạo cảm giác "có gì đó dành cho tôi" | Hiển thị nội dung cá nhân hoá trên Home |
Hành động ngay (Scan) | Rút ngắn thời gian thao tác khi khách đầu tư offline |
Giao tiếp tức thì | Kênh “Hộp thư” chứa thông báo, CTKM, cảnh báo, xác nhận |
Page 3: Home
Home chia theo vai trò:
Khách hàng: Portfolio đầu tư, sự kiện, tin tức, sản phẩm đang mở.
Tư vấn viên: Bảng KPI cá nhân, khách hàng mới nhất, link chia sẻ nhanh.
Tích hợp module sự kiện truyền thông khi có event.
Áp dụng skeleton loading giúp cảm giác load mượt, tránh flash trắng.
UX logic:
Không dồn quá nhiều module đầu màn hình → ưu tiên hiển thị giá trị rõ ràng như "Tài sản hôm nay", "Sản phẩm đang mở bán".
Nếu vắng khách hàng (tư vấn viên mới), hệ thống hiển thị lời mời kết nối để giữ engagement.
Page 4: Scan QR Code
Những luồng đã xử lý:
Scan QR hợp lệ → chuyển đúng link (sản phẩm, xác minh, đăng ký…).
QR không hợp lệ → hiện toast message + icon cảnh báo.
Cho phép bật/tắt flash, chọn ảnh từ thư viện để quét.
Thiết bị không có camera → hiện popup + điều hướng xử lý thủ công.
Điều đặc biệt:
Xây dựng quy trình fallback khi:
Người dùng dùng thiết bị giả lập / camera lỗi.
Trình duyệt không hỗ trợ (nếu là webapp).
Page 5: Hộp thư
Tính năng chính:
Thông báo theo tag màu (xanh, đỏ, vàng) để phân loại nội dung.
Vuốt trái xoá + popup xác nhận khi người dùng click xoá.
Xử lý xem chi tiết → mở nội dung dạng long-read.
Có trạng thái trống đẹp mắt khi không có thư.
Tối ưu UX:
Không để người dùng "lạc lõng" khi hết thư → hiển thị CTA gợi ý hành động tiếp theo.
Popup xác nhận xoá đơn giản, nhấn mạnh yếu tố “không thể hoàn tác” để giảm lỗi người dùng.
Kỹ năng | Cách áp dụng |
|---|---|
Conditional Rendering | Hiển thị các khối nội dung Home tùy theo vai trò người dùng |
Fallback UX | QR không quét được, camera lỗi, quyền chưa cấp – đều có luồng xử lý cụ thể |
Micro-interaction | Vuốt xoá thư, loading skeleton, popup xác nhận |
Design for Empty State | Thiết kế “Hộp thư trống” & Home khi không có dữ liệu thực tế |
👑 Kết quả
Thời gian trung bình đọc thư tăng 24% sau khi tối ưu giao diện và chi tiết.
Tăng 3.2 lần lượt scan QR sau khi thêm logic flash / chọn ảnh.
Tỷ lệ tương tác lại sau đăng nhập tăng rõ khi Home hiển thị đúng vai trò.
Nhóm C: Đầu tư & Tài sản
Gồm các page:
Page 7: Đầu tư
Page 8: Tài sản
Page 10: Nguồn vốn
Mục tiêu | Vai trò UX |
|---|---|
Đơn giản hóa sản phẩm đầu tư phức tạp | Thiết kế luồng đầu tư dạng từng bước (step form) |
Làm rõ giá trị đầu tư – rủi ro – kỳ hạn | Trình bày trực quan, biểu đồ, mô tả dễ hiểu |
Theo dõi tài sản đã đầu tư & trạng thái | Giao diện tổng quan tài sản, hợp đồng, sinh lời |
Minh bạch dòng vốn | Kết nối tài khoản ngân hàng + dòng tiền đi/đến |
Page 7: Đầu tư
Hiển thị sản phẩm đang mở bán, theo mức độ rủi ro & kỳ hạn.
Khi click vào → mở chi tiết sản phẩm: mô tả, pháp lý, bảng tính lợi nhuận.
Luồng đầu tư:
Xác thực KYC
Chọn sản phẩm
Nhập số tiền
Ký hợp đồng điện tử
Xác nhận chuyển khoản
Điểm UX mạnh:
Luồng từng bước (Step form) giúp người dùng dễ theo dõi tiến trình.
Giao diện chi tiết đầu tư cho phép tra cứu giấy tờ pháp lý → tăng độ tin cậy.
Có flow fallback nếu chưa xác minh: hiện popup → điều hướng về KYC.
Page 8: Tài sản
Xem toàn bộ danh mục đầu tư đã thực hiện.
Hiển thị:
Tổng tài sản hiện có
Biểu đồ phân bổ theo loại hình đầu tư
Từng hợp đồng: trạng thái, sinh lời, kỳ hạn
UX:
Biểu đồ phân bổ dạng donut chart đơn giản dễ hiểu.
Trạng thái tài sản rõ ràng:
Đang hoạt động
Đã đáo hạn
Đang xét duyệt
Nếu không có dữ liệu → hiện “Empty State” với CTA mời đầu tư.
Page 10: Nguồn vốn
Kết nối tài khoản ngân hàng
Quản lý thông tin chuyển khoản
Kiểm tra lịch sử nạp vốn
Phân loại theo: ngân hàng cá nhân / ngân hàng công ty
Vấn đề tôi giải quyết:
Người dùng có thể gặp lỗi khi:
Không nhớ STK
Không biết cách đối soát giao dịch
Tôi thiết kế giao diện:
Hiển thị rõ mã đối soát cá nhân
Hướng dẫn cách chuyển khoản chuẩn
Có logic nếu hệ thống không tìm thấy giao dịch
Kỹ năng | Áp dụng |
|---|---|
Process simplification | Chuyển luồng đầu tư phức tạp thành từng bước nhỏ, có chỉ dẫn |
Information hierarchy | Ưu tiên thông tin pháp lý – mô tả – CTA rõ ràng |
Error prevention | Tránh nhập sai số tiền, chưa xác minh mà vẫn thao tác được |
Data visualization | Biểu đồ đơn giản mà giàu thông tin – giúp người dùng có niềm tin hơn vào tài sản |
Kết quả
Tăng 48% lượt xem chi tiết sản phẩm đầu tư sau khi cải thiện layout mô tả & biểu đồ.
Tăng gấp đôi tỷ lệ hoàn thành đầu tư khi thiết kế step-by-step flow.
Tỷ lệ "đầu tư xong nhưng không biết theo dõi ở đâu" giảm còn <10%.
Nhóm D: Hệ thống & Quản trị
Gồm các page:
Page 6: Cá nhân + Tư vấn viên
Page 9: Ngân hàng
Page 11 (phần liên quan đến quyền truy cập, hệ thống)
Logic liên quan đến chuyển đổi vai trò, xác thực, và quyền hệ thống
Tôi đóng vai trò “thiết kế tổng hợp”:
Mapping tất cả các vai trò & hành vi có thể có (admin, khách, tư vấn viên).
Thiết kế giao diện đa mục đích: người mới – người đã xác minh – người đã đầu tư – người vừa là tư vấn vừa là khách.
Logic kiểm tra vai trò khi đăng nhập, đồng bộ menu và quyền truy cập theo user type.
Mục tiêu | UX cần đáp ứng |
|---|---|
Quản lý vai trò người dùng rõ ràng | End user ↔ Tư vấn viên ↔ Quản trị viên |
Giao diện hồ sơ cá nhân dễ truy cập | Thông tin cơ bản, tài khoản, tài sản |
Hỗ trợ hành vi đăng ký sale | Đăng ký – xác minh – liên kết khách hàng |
Bảo mật & truy cập hệ thống | Quyền camera, flash, thiết bị |
Page 6: Cá nhân + Tư vấn viên
Với người dùng cá nhân:
Xem hồ sơ, tài sản, cài đặt bảo mật.
Trạng thái xác thực tài khoản.
Thêm tài khoản ngân hàng, số điện thoại phụ.
Với tư vấn viên:
Bảng quản lý khách hàng → lọc theo trạng thái: “chưa đầu tư”, “đang xử lý”, “hoàn thành”.
KPI bản thân: Doanh số, số lượt mời thành công.
Giao diện đăng ký làm tư vấn viên: từng bước, có xác minh.
UX:
Chuyển đổi vai trò mượt mà: giữ session, không load lại toàn bộ app.
Giao diện tư vấn viên gọn, rõ, không rối cho người ít kinh nghiệm số.
Nếu là người dùng chưa từng xác minh → hướng dẫn bật định danh.
Page 9: Ngân hàng
Kết nối tài khoản ngân hàng để rút tiền
Danh sách ngân hàng đã xác minh
Chọn tài khoản mặc định
UX logic:
Hiển thị đầy đủ thông tin ngân hàng: tên chủ tài khoản, STK, ngân hàng.
Có luồng kiểm tra trùng lặp tài khoản → báo lỗi nếu STK đã dùng.
Flow chọn tài khoản chính rõ ràng – chỉ 1 tài khoản có thể là mặc định.
Page 11 (System – quyền truy cập)
Các tình huống đã xử lý:
Người dùng từ chối quyền camera → hiện modal hướng dẫn mở lại.
Người dùng không bật flash → có fallback.
Thiết bị không hỗ trợ NFC / camera → thông báo rõ, không bị crash.
Kỹ năng | Áp dụng |
|---|---|
Design for Roles | Xác định logic hiển thị khác nhau theo vai trò |
Flow Mapping | Người dùng có thể trở thành TVV từ home, hoặc từ lời mời → tôi xây flow hợp nhất |
Error Scenario Design | Với mỗi quyền hệ thống → đều có hướng xử lý & mô tả người dùng dễ hiểu |
UX cho Admin | Quản lý khách, xem báo cáo → tôi tạo màn quản trị đơn giản, dễ thao tác trên mobile |
Kết quả
Giảm 60% trường hợp chuyển đổi vai trò bị lỗi session.
Tăng 35% người dùng tự đăng ký làm tư vấn viên nhờ form đơn giản, rõ ràng.
Số lỗi người dùng từ chối quyền hệ thống nhưng không biết xử lý gần như về 0.
Kết quả tổng quát
Tăng tỷ lệ đăng ký thành công sau 3 bước: +28%
Giảm 40% thời gian hoàn tất đăng ký đầu tư nhờ thiết kế flow mạch lạc
Feedback từ người dùng thử nghiệm: "Ứng dụng dễ hiểu, nhìn đã tin tưởng rồi"
Meey Finance
Tổng quan
Nền tảng giúp người dùng phổ thông dễ dàng quản lý tài sản, đăng ký tư vấn viên, tham gia đầu tư và truy cập các dịch vụ tài chính phức tạp một cách đơn giản.
Ngày bắt đầu
3 thg 12, 2022
Khách hàng
Meey Group
Bối cảnh & Vấn đề
Người dùng phổ thông thường gặp khó khăn khi tiếp cận các dịch vụ tài chính như đầu tư, quản lý tài sản, hoặc tư vấn hợp đồng. Meey Finance đặt mục tiêu trở thành một siêu ứng dụng tài chính, nơi người dùng có thể:
Đăng ký tài khoản dễ dàng (kể cả với người ít hiểu công nghệ).
Theo dõi tài sản (đa kênh: đầu tư, vay, ngân hàng, hợp đồng).
Trải nghiệm đầu tư một cách "mềm mại", không áp lực, không phức tạp.
Quy trình tiếp cận
1. System Thinking – Phân tích tổng thể
Tôi bắt đầu bằng việc dựng App Map tổng quan giúp toàn bộ team thấy rõ phạm vi tính năng, kết nối logic giữa các module:
Core: Đăng ký, đăng nhập, xác thực
Đầu tư – tài sản – ngân hàng – hợp đồng
Quản lý tư vấn viên (2 phân hệ: End User & Admin)
2. User Journey – Hiểu người dùng từ nỗi đau đến giải pháp
Tôi xây dựng 2 bảng Journey:
End User: Tập trung vào hành trình từ đăng ký → đầu tư → theo dõi tài sản
Admin: Tập trung vào việc vận hành hệ thống (setup sản phẩm, quản lý hợp đồng…)
🎯 Insight rút ra:
Người dùng phổ thông lo sợ mất tiền, thiếu niềm tin, thiếu trải nghiệm tài chính số.
Admin lo ngại thao tác setup phức tạp, rườm rà.
3. User Flow – Thiết kế theo logic thực tế
Tôi vẽ chi tiết 4 flow chính:
Đăng ký đăng nhập (với cả sinh trắc học & xác thực nhiều tầng)
Đầu tư (bao gồm xác minh, chọn gói, ký hợp đồng…)
Quản lý tài khoản (thêm tài khoản ngân hàng, thêm địa chỉ nhận hợp đồng…)
Quản lý sale (luồng đăng ký và xác thực từ phía tư vấn viên)
Flow được vẽ chi tiết đến từng quyết định nhánh (Yes/No), xử lý cả các tình huống thất bại.
4. Thiết kế UI – Tối ưu từng touchpoint
Tôi thiết kế giao diện cho 10 nhóm màn hình chính, tiêu biểu:
Đăng ký & Login: Hỗ trợ sinh trắc học, xử lý lỗi sinh trắc học, đăng nhập không sinh trắc, avatar mặc định, đăng nhập lại dễ dàng.
Trang chủ đầu tư: Skeleton & Lazy load, giao diện hoạt họa nhẹ, hiển thị biến động tài sản.
Tư vấn viên: Giao diện quản lý 2 tầng (Tư vấn viên và Admin), xử lý empty state & phân quyền.
Hộp thư: Giao diện thông báo theo nhóm, swipe để xoá, xem chi tiết.
💡 Tôi dùng các pattern vi mô như:
Bottom bar co giãn khi scroll
Popup xác nhận trước khi xóa
Empty state và hướng dẫn CTA rõ ràng
Công cụ sử dụng
Figma (design + prototyping)
FigJam (flow, journey, brainstorm)
Notion (documentation & backlog UX)
Tổng quan luồng & các nhóm tính năng chính
Tôi đã chia các màn theo 12 page, và định hình 4 nhóm chức năng lớn:
Nhóm tính năng | Bao gồm các page |
|---|---|
A. Onboarding | Page 1 (Đăng nhập), Page 2 (Đăng ký), Page 11 (System) |
B. Trang chính & trải nghiệm | Page 3 (Home), Page 5 (Hộp thư), Page 6 (Cá nhân + Tư vấn viên) |
C. Chức năng tài chính | Page 4 (Scan QR), Page 7 (Đầu tư), Page 8 (Tài sản), Page 10 (Nguồn vốn) |
D. Quản lý & hệ thống | Page 9 (Ngân hàng), App map, Journey map |
Nhóm A: Onboarding
Gồm các page:
Page 1: Đăng nhập
Page 2: Đăng ký
Page 11: System (quyền truy cập, lỗi hệ thống, kết nối, cập nhật...)
Ứng dụng Meey Finance hướng đến đối tượng người dùng phổ thông trong lĩnh vực đầu tư và quản lý tài chính. Do đó, trải nghiệm đầu vào (onboarding) cần đảm bảo:
Dễ tiếp cận, đơn giản nhưng an toàn.
Hỗ trợ đa kịch bản (người mới, người cũ, người quên mật khẩu, dùng sinh trắc học, lỗi hệ thống…).
Tối ưu hiệu suất và tăng tỷ lệ chuyển đổi đăng ký.
Tôi chịu trách nhiệm UX flow, UI design, logic xử lý và error state cho toàn bộ nhóm onboarding:
Mapping đầy đủ các trường hợp edge-case (mạng yếu, FaceID fail, nhập sai, thiết bị không hỗ trợ…).
Thiết kế hệ thống thông báo lỗi dễ hiểu, nhất quán.
Tối ưu entry-point để tăng tỷ lệ đăng ký thành công và giảm bỏ cuộc giữa chừng.
Kỹ năng | Cách áp dụng |
|---|---|
UX logic | Mapping >10 flow phụ cho đăng nhập/đăng ký: sinh trắc học, xác minh OTP, tạo mật khẩu, quên mật khẩu, thiết bị không hỗ trợ… |
Thiết kế UI phản hồi | Các state lỗi: nhập sai mật khẩu, OTP sai, hệ thống lỗi, avatar mặc định, skeleton loading, v.v… |
Design for fallback | Dự đoán tình huống lỗi phần cứng (camera, flash) hoặc quyền hệ điều hành can thiệp — có hướng dẫn cụ thể. |
Tư duy hệ thống | Làm việc chặt với BA để phân biệt lỗi BE vs lỗi hệ điều hành. |
Page 1: Đăng nhập
Đăng nhập bằng sinh trắc học → huỷ → tự focus vào ô password.
Nhận diện lại → sai → thông báo rõ ràng + tùy chọn “Chuyển đổi tài khoản”.
Hiện avatar người dùng hoặc avatar mặc định.
Tư duy UX:
Giữ lại trải nghiệm thân thuộc với người cũ (auto điền tên, gợi nhắc).
Ưu tiên người dùng mới dễ tiếp cận — hiển thị rõ tùy chọn “Đăng ký”.
Page 2: Đăng ký
Đăng ký thường / qua liên kết sale / từ QR code.
Xác minh OTP: lỗi từng ký tự, hết hạn, gửi lại, loading...
Đặt mật khẩu: xác thực độ mạnh, xác nhận trùng khớp.
Kỹ thuật xử lý:
Sử dụng skeleton UI để tránh nhấp nháy khi loading trạng thái.
Nhận diện Galaxy Fold để kiểm tra hiển thị theo tỉ lệ đặc biệt.
Cảnh báo nếu thiết bị không có NFC / camera.
Page 11: System
Các case quan trọng:
Thiết bị không hỗ trợ (iOS can thiệp camera / bộ nhớ ảnh).
Kết nối yếu → popup lỗi kết nối.
Cập nhật phiên bản → buộc cập nhật khi cần.
Thiếu quyền app → hướng dẫn mở setting.
UX Decision:
Tránh để user "mò" lỗi → cung cấp hướng dẫn thao tác bằng ngôn ngữ tự nhiên.
Dùng màu đỏ/xanh tiêu chuẩn cho các loại lỗi / trạng thái để tạo phản xạ.
👑 Kết quả
Giảm 40% tỷ lệ rớt giữa chừng khi đăng ký (so với prototype đầu).
Tăng 1.7x tỷ lệ hoàn tất đăng ký tài khoản từ landing page QR.
Tối ưu trải nghiệm cho >95% tình huống lỗi thiết bị phổ biến.
Nhóm B: Trang chính
Gồm các page:
Page 3: Home
Page 4: Scan QR Code
Page 5: Hộp thư
Tôi phụ trách mapping flow người dùng thực tế, kết hợp với các nhóm BA và vận hành để:
Thiết kế màn Home động tùy theo vai trò (Admin / Nhà đầu tư).
Thiết kế logic Scan QR Code kèm hệ thống cảnh báo và lỗi.
Thiết kế lại Hộp thư, bao gồm cả xem – xoá – popup xác nhận và trạng thái rỗng.
Mục tiêu UX chính | Vai trò cụ thể |
|---|---|
Tạo cảm giác "có gì đó dành cho tôi" | Hiển thị nội dung cá nhân hoá trên Home |
Hành động ngay (Scan) | Rút ngắn thời gian thao tác khi khách đầu tư offline |
Giao tiếp tức thì | Kênh “Hộp thư” chứa thông báo, CTKM, cảnh báo, xác nhận |
Page 3: Home
Home chia theo vai trò:
Khách hàng: Portfolio đầu tư, sự kiện, tin tức, sản phẩm đang mở.
Tư vấn viên: Bảng KPI cá nhân, khách hàng mới nhất, link chia sẻ nhanh.
Tích hợp module sự kiện truyền thông khi có event.
Áp dụng skeleton loading giúp cảm giác load mượt, tránh flash trắng.
UX logic:
Không dồn quá nhiều module đầu màn hình → ưu tiên hiển thị giá trị rõ ràng như "Tài sản hôm nay", "Sản phẩm đang mở bán".
Nếu vắng khách hàng (tư vấn viên mới), hệ thống hiển thị lời mời kết nối để giữ engagement.
Page 4: Scan QR Code
Những luồng đã xử lý:
Scan QR hợp lệ → chuyển đúng link (sản phẩm, xác minh, đăng ký…).
QR không hợp lệ → hiện toast message + icon cảnh báo.
Cho phép bật/tắt flash, chọn ảnh từ thư viện để quét.
Thiết bị không có camera → hiện popup + điều hướng xử lý thủ công.
Điều đặc biệt:
Xây dựng quy trình fallback khi:
Người dùng dùng thiết bị giả lập / camera lỗi.
Trình duyệt không hỗ trợ (nếu là webapp).
Page 5: Hộp thư
Tính năng chính:
Thông báo theo tag màu (xanh, đỏ, vàng) để phân loại nội dung.
Vuốt trái xoá + popup xác nhận khi người dùng click xoá.
Xử lý xem chi tiết → mở nội dung dạng long-read.
Có trạng thái trống đẹp mắt khi không có thư.
Tối ưu UX:
Không để người dùng "lạc lõng" khi hết thư → hiển thị CTA gợi ý hành động tiếp theo.
Popup xác nhận xoá đơn giản, nhấn mạnh yếu tố “không thể hoàn tác” để giảm lỗi người dùng.
Kỹ năng | Cách áp dụng |
|---|---|
Conditional Rendering | Hiển thị các khối nội dung Home tùy theo vai trò người dùng |
Fallback UX | QR không quét được, camera lỗi, quyền chưa cấp – đều có luồng xử lý cụ thể |
Micro-interaction | Vuốt xoá thư, loading skeleton, popup xác nhận |
Design for Empty State | Thiết kế “Hộp thư trống” & Home khi không có dữ liệu thực tế |
👑 Kết quả
Thời gian trung bình đọc thư tăng 24% sau khi tối ưu giao diện và chi tiết.
Tăng 3.2 lần lượt scan QR sau khi thêm logic flash / chọn ảnh.
Tỷ lệ tương tác lại sau đăng nhập tăng rõ khi Home hiển thị đúng vai trò.
Nhóm C: Đầu tư & Tài sản
Gồm các page:
Page 7: Đầu tư
Page 8: Tài sản
Page 10: Nguồn vốn
Mục tiêu | Vai trò UX |
|---|---|
Đơn giản hóa sản phẩm đầu tư phức tạp | Thiết kế luồng đầu tư dạng từng bước (step form) |
Làm rõ giá trị đầu tư – rủi ro – kỳ hạn | Trình bày trực quan, biểu đồ, mô tả dễ hiểu |
Theo dõi tài sản đã đầu tư & trạng thái | Giao diện tổng quan tài sản, hợp đồng, sinh lời |
Minh bạch dòng vốn | Kết nối tài khoản ngân hàng + dòng tiền đi/đến |
Page 7: Đầu tư
Hiển thị sản phẩm đang mở bán, theo mức độ rủi ro & kỳ hạn.
Khi click vào → mở chi tiết sản phẩm: mô tả, pháp lý, bảng tính lợi nhuận.
Luồng đầu tư:
Xác thực KYC
Chọn sản phẩm
Nhập số tiền
Ký hợp đồng điện tử
Xác nhận chuyển khoản
Điểm UX mạnh:
Luồng từng bước (Step form) giúp người dùng dễ theo dõi tiến trình.
Giao diện chi tiết đầu tư cho phép tra cứu giấy tờ pháp lý → tăng độ tin cậy.
Có flow fallback nếu chưa xác minh: hiện popup → điều hướng về KYC.
Page 8: Tài sản
Xem toàn bộ danh mục đầu tư đã thực hiện.
Hiển thị:
Tổng tài sản hiện có
Biểu đồ phân bổ theo loại hình đầu tư
Từng hợp đồng: trạng thái, sinh lời, kỳ hạn
UX:
Biểu đồ phân bổ dạng donut chart đơn giản dễ hiểu.
Trạng thái tài sản rõ ràng:
Đang hoạt động
Đã đáo hạn
Đang xét duyệt
Nếu không có dữ liệu → hiện “Empty State” với CTA mời đầu tư.
Page 10: Nguồn vốn
Kết nối tài khoản ngân hàng
Quản lý thông tin chuyển khoản
Kiểm tra lịch sử nạp vốn
Phân loại theo: ngân hàng cá nhân / ngân hàng công ty
Vấn đề tôi giải quyết:
Người dùng có thể gặp lỗi khi:
Không nhớ STK
Không biết cách đối soát giao dịch
Tôi thiết kế giao diện:
Hiển thị rõ mã đối soát cá nhân
Hướng dẫn cách chuyển khoản chuẩn
Có logic nếu hệ thống không tìm thấy giao dịch
Kỹ năng | Áp dụng |
|---|---|
Process simplification | Chuyển luồng đầu tư phức tạp thành từng bước nhỏ, có chỉ dẫn |
Information hierarchy | Ưu tiên thông tin pháp lý – mô tả – CTA rõ ràng |
Error prevention | Tránh nhập sai số tiền, chưa xác minh mà vẫn thao tác được |
Data visualization | Biểu đồ đơn giản mà giàu thông tin – giúp người dùng có niềm tin hơn vào tài sản |
Kết quả
Tăng 48% lượt xem chi tiết sản phẩm đầu tư sau khi cải thiện layout mô tả & biểu đồ.
Tăng gấp đôi tỷ lệ hoàn thành đầu tư khi thiết kế step-by-step flow.
Tỷ lệ "đầu tư xong nhưng không biết theo dõi ở đâu" giảm còn <10%.
Nhóm D: Hệ thống & Quản trị
Gồm các page:
Page 6: Cá nhân + Tư vấn viên
Page 9: Ngân hàng
Page 11 (phần liên quan đến quyền truy cập, hệ thống)
Logic liên quan đến chuyển đổi vai trò, xác thực, và quyền hệ thống
Tôi đóng vai trò “thiết kế tổng hợp”:
Mapping tất cả các vai trò & hành vi có thể có (admin, khách, tư vấn viên).
Thiết kế giao diện đa mục đích: người mới – người đã xác minh – người đã đầu tư – người vừa là tư vấn vừa là khách.
Logic kiểm tra vai trò khi đăng nhập, đồng bộ menu và quyền truy cập theo user type.
Mục tiêu | UX cần đáp ứng |
|---|---|
Quản lý vai trò người dùng rõ ràng | End user ↔ Tư vấn viên ↔ Quản trị viên |
Giao diện hồ sơ cá nhân dễ truy cập | Thông tin cơ bản, tài khoản, tài sản |
Hỗ trợ hành vi đăng ký sale | Đăng ký – xác minh – liên kết khách hàng |
Bảo mật & truy cập hệ thống | Quyền camera, flash, thiết bị |
Page 6: Cá nhân + Tư vấn viên
Với người dùng cá nhân:
Xem hồ sơ, tài sản, cài đặt bảo mật.
Trạng thái xác thực tài khoản.
Thêm tài khoản ngân hàng, số điện thoại phụ.
Với tư vấn viên:
Bảng quản lý khách hàng → lọc theo trạng thái: “chưa đầu tư”, “đang xử lý”, “hoàn thành”.
KPI bản thân: Doanh số, số lượt mời thành công.
Giao diện đăng ký làm tư vấn viên: từng bước, có xác minh.
UX:
Chuyển đổi vai trò mượt mà: giữ session, không load lại toàn bộ app.
Giao diện tư vấn viên gọn, rõ, không rối cho người ít kinh nghiệm số.
Nếu là người dùng chưa từng xác minh → hướng dẫn bật định danh.
Page 9: Ngân hàng
Kết nối tài khoản ngân hàng để rút tiền
Danh sách ngân hàng đã xác minh
Chọn tài khoản mặc định
UX logic:
Hiển thị đầy đủ thông tin ngân hàng: tên chủ tài khoản, STK, ngân hàng.
Có luồng kiểm tra trùng lặp tài khoản → báo lỗi nếu STK đã dùng.
Flow chọn tài khoản chính rõ ràng – chỉ 1 tài khoản có thể là mặc định.
Page 11 (System – quyền truy cập)
Các tình huống đã xử lý:
Người dùng từ chối quyền camera → hiện modal hướng dẫn mở lại.
Người dùng không bật flash → có fallback.
Thiết bị không hỗ trợ NFC / camera → thông báo rõ, không bị crash.
Kỹ năng | Áp dụng |
|---|---|
Design for Roles | Xác định logic hiển thị khác nhau theo vai trò |
Flow Mapping | Người dùng có thể trở thành TVV từ home, hoặc từ lời mời → tôi xây flow hợp nhất |
Error Scenario Design | Với mỗi quyền hệ thống → đều có hướng xử lý & mô tả người dùng dễ hiểu |
UX cho Admin | Quản lý khách, xem báo cáo → tôi tạo màn quản trị đơn giản, dễ thao tác trên mobile |
Kết quả
Giảm 60% trường hợp chuyển đổi vai trò bị lỗi session.
Tăng 35% người dùng tự đăng ký làm tư vấn viên nhờ form đơn giản, rõ ràng.
Số lỗi người dùng từ chối quyền hệ thống nhưng không biết xử lý gần như về 0.
Kết quả tổng quát
Tăng tỷ lệ đăng ký thành công sau 3 bước: +28%
Giảm 40% thời gian hoàn tất đăng ký đầu tư nhờ thiết kế flow mạch lạc
Feedback từ người dùng thử nghiệm: "Ứng dụng dễ hiểu, nhìn đã tin tưởng rồi"
