Seland
Tổng quan
Seland.vn là một nền tảng công nghệ hỗ trợ quản lý và đầu tư bất động sản toàn diện, tập trung vào thị trường tỉnh – đặc biệt là Bắc Giang. Dự án hướng tới mục tiêu kết nối người mua – người bán – nhà đầu tư trên cùng một hệ sinh thái thông tin, đồng thời cung cấp các công cụ tra cứu và phân tích mạnh mẽ giúp người dùng ra quyết định chính xác, nhanh chóng và an toàn hơn. Dự án hướng đến việc cung cấp:
Công cụ đăng tin mua bán miễn phí, dễ sử dụng.
Tra cứu quy hoạch chính xác, theo số tờ số thửa.
Phân tích xu hướng sốt đất và dòng tiền đầu tư.
Ngày bắt đầu
10 thg 2, 2023
Khách hàng
Tâm Thành Land (SeLand)
Vai trò & phạm vi công việc của tôi
Tôi đóng vai trò UI Designer, tham gia vào tất cả các giai đoạn của quy trình thiết kế giao diện, bao gồm:
Phối hợp với BA xây dựng sitemap tổng thể dựa trên hành vi người dùng và nhu cầu thị trường.
Phân chia hệ thống giao diện theo module chức năng, tạo nền tảng cho việc quản lý & phát triển mở rộng sau này.
Thiết kế toàn bộ UI WebApp, gồm hơn 100 màn hình – bao gồm cả phiên bản desktop, responsive và mobile.
Kiến trúc sản phẩm & cách tổ chức thiết kế
Để đảm bảo khả năng phát triển bền vững và dễ bảo trì, tôi chủ động phân chia UI thành các nhóm module rõ ràng (như thể hiện ở bản thiết kế):
Module chức năng | Mô tả |
|---|---|
Login / Register | Giao diện đăng nhập, xác thực 2 bước, đăng ký |
Homepage | Trang chủ hiển thị danh sách tin, filter và điều hướng chính |
Post Management | Quản lý tin đăng, chỉnh sửa, theo dõi lượt xem |
Map / Quy hoạch | Giao diện bản đồ tra cứu quy hoạch, hiển thị thông tin đa lớp |
Dự án | Hiển thị dự án bất động sản, gắn với các tiện ích bản đồ |
Yêu thích / Lịch sử | Quản lý danh sách BĐS đã lưu, đã xem |
Tài khoản người dùng | Quản lý thông tin cá nhân, quảng cáo, lịch hẹn, khuyến mãi |
Gói tin & Khuyến mãi | UI cho các gói dịch vụ, nạp tiền, sử dụng mã ưu đãi |
Tin tức & Đào tạo | Blog thị trường, phong thuỷ, tài chính, pháp lý |
Thiết kế responsive / mobile-first
Với mobile, tôi rút gọn header và dùng bottom navigation để giữ hành vi tìm kiếm và lưu tin luôn dễ truy cập. Các thao tác như chọn số tờ/số thửa được thiết kế lại dạng dropdown đơn giản, tránh việc người dùng nhập tay phức tạp.
Thách thức & giải pháp thiết kế
Hệ thống thông tin quá rộng, dễ gây nhiễu. Tôi và BA đã cùng thống nhất xây dựng sitemap theo 2 chiều:
Theo mục tiêu người dùng (tìm tin, đăng tin, quản lý tài khoản)
Theo dữ liệu nội dung (quy hoạch, dự án, tin tức, phân tích đầu tư)
Bản đồ quy hoạch có nhiều lớp dữ liệu phức tạp, tôi đã quyết định:
Thiết kế bộ lọc nằm bên trái (sidebar filter), hỗ trợ bật/tắt layer.
Cấu trúc lại tooltip theo dạng “thẻ nội dung” dễ đọc khi hover/lít.
Tin đăng nhiều loại bất động sản, cần phân loại rõ, tôi đã quyết định thiết kế:
Phân chia danh mục theo loại hình (nhà riêng, shophouse, đất nền...) bằng hệ thống tab + màu nhận diện nhẹ.
Giao diện đăng tin dạng nhiều bước (step form), tránh bị quá tải thông tin.
Teamwork
Sau khi bàn giao bản đầu tiên, nhóm Dev phản hồi rằng filter bản đồ quá nặng vì dữ liệu tải nhiều lớp cùng lúc. Tôi đã rút gọn giao diện bằng cách nhóm theo chủ đề quy hoạch và thêm hiệu ứng loading tối giản theo từng lớp → giúp cải thiện hiệu năng đáng kể nhưng vẫn giữ được trải nghiệm trực quan.
Ngoài ra, việc chú tâm hợp tác với BA giúp tôi hiểu rõ các ràng buộc logic từ backend (ví dụ: các trạng thái tin đăng, gói khuyến mãi áp dụng). Tôi thường dùng Figma comments hoặc tự tạo các note ngay trong bản thiết kế để mô tả logic và states, vừa để trao đổi nhanh với BA và cũng giúp Dev nắm được điều kiện hiển thị mà không cần mockup riêng cho mỗi biến thể.
📌 Quick Stats:
100+ màn hình giao diện
12 nhóm chức năng chính
30+ reusable UI components
Thời gian thiết kế: ~5 tuần
Seland
Tổng quan
Seland.vn là một nền tảng công nghệ hỗ trợ quản lý và đầu tư bất động sản toàn diện, tập trung vào thị trường tỉnh – đặc biệt là Bắc Giang. Dự án hướng tới mục tiêu kết nối người mua – người bán – nhà đầu tư trên cùng một hệ sinh thái thông tin, đồng thời cung cấp các công cụ tra cứu và phân tích mạnh mẽ giúp người dùng ra quyết định chính xác, nhanh chóng và an toàn hơn. Dự án hướng đến việc cung cấp:
Công cụ đăng tin mua bán miễn phí, dễ sử dụng.
Tra cứu quy hoạch chính xác, theo số tờ số thửa.
Phân tích xu hướng sốt đất và dòng tiền đầu tư.
Ngày bắt đầu
10 thg 2, 2023
Khách hàng
Tâm Thành Land (SeLand)
Vai trò & phạm vi công việc của tôi
Tôi đóng vai trò UI Designer, tham gia vào tất cả các giai đoạn của quy trình thiết kế giao diện, bao gồm:
Phối hợp với BA xây dựng sitemap tổng thể dựa trên hành vi người dùng và nhu cầu thị trường.
Phân chia hệ thống giao diện theo module chức năng, tạo nền tảng cho việc quản lý & phát triển mở rộng sau này.
Thiết kế toàn bộ UI WebApp, gồm hơn 100 màn hình – bao gồm cả phiên bản desktop, responsive và mobile.
Kiến trúc sản phẩm & cách tổ chức thiết kế
Để đảm bảo khả năng phát triển bền vững và dễ bảo trì, tôi chủ động phân chia UI thành các nhóm module rõ ràng (như thể hiện ở bản thiết kế):
Module chức năng | Mô tả |
|---|---|
Login / Register | Giao diện đăng nhập, xác thực 2 bước, đăng ký |
Homepage | Trang chủ hiển thị danh sách tin, filter và điều hướng chính |
Post Management | Quản lý tin đăng, chỉnh sửa, theo dõi lượt xem |
Map / Quy hoạch | Giao diện bản đồ tra cứu quy hoạch, hiển thị thông tin đa lớp |
Dự án | Hiển thị dự án bất động sản, gắn với các tiện ích bản đồ |
Yêu thích / Lịch sử | Quản lý danh sách BĐS đã lưu, đã xem |
Tài khoản người dùng | Quản lý thông tin cá nhân, quảng cáo, lịch hẹn, khuyến mãi |
Gói tin & Khuyến mãi | UI cho các gói dịch vụ, nạp tiền, sử dụng mã ưu đãi |
Tin tức & Đào tạo | Blog thị trường, phong thuỷ, tài chính, pháp lý |
Thiết kế responsive / mobile-first
Với mobile, tôi rút gọn header và dùng bottom navigation để giữ hành vi tìm kiếm và lưu tin luôn dễ truy cập. Các thao tác như chọn số tờ/số thửa được thiết kế lại dạng dropdown đơn giản, tránh việc người dùng nhập tay phức tạp.
Thách thức & giải pháp thiết kế
Hệ thống thông tin quá rộng, dễ gây nhiễu. Tôi và BA đã cùng thống nhất xây dựng sitemap theo 2 chiều:
Theo mục tiêu người dùng (tìm tin, đăng tin, quản lý tài khoản)
Theo dữ liệu nội dung (quy hoạch, dự án, tin tức, phân tích đầu tư)
Bản đồ quy hoạch có nhiều lớp dữ liệu phức tạp, tôi đã quyết định:
Thiết kế bộ lọc nằm bên trái (sidebar filter), hỗ trợ bật/tắt layer.
Cấu trúc lại tooltip theo dạng “thẻ nội dung” dễ đọc khi hover/lít.
Tin đăng nhiều loại bất động sản, cần phân loại rõ, tôi đã quyết định thiết kế:
Phân chia danh mục theo loại hình (nhà riêng, shophouse, đất nền...) bằng hệ thống tab + màu nhận diện nhẹ.
Giao diện đăng tin dạng nhiều bước (step form), tránh bị quá tải thông tin.
Teamwork
Sau khi bàn giao bản đầu tiên, nhóm Dev phản hồi rằng filter bản đồ quá nặng vì dữ liệu tải nhiều lớp cùng lúc. Tôi đã rút gọn giao diện bằng cách nhóm theo chủ đề quy hoạch và thêm hiệu ứng loading tối giản theo từng lớp → giúp cải thiện hiệu năng đáng kể nhưng vẫn giữ được trải nghiệm trực quan.
Ngoài ra, việc chú tâm hợp tác với BA giúp tôi hiểu rõ các ràng buộc logic từ backend (ví dụ: các trạng thái tin đăng, gói khuyến mãi áp dụng). Tôi thường dùng Figma comments hoặc tự tạo các note ngay trong bản thiết kế để mô tả logic và states, vừa để trao đổi nhanh với BA và cũng giúp Dev nắm được điều kiện hiển thị mà không cần mockup riêng cho mỗi biến thể.
📌 Quick Stats:
100+ màn hình giao diện
12 nhóm chức năng chính
30+ reusable UI components
Thời gian thiết kế: ~5 tuần
Seland
Tổng quan
Seland.vn là một nền tảng công nghệ hỗ trợ quản lý và đầu tư bất động sản toàn diện, tập trung vào thị trường tỉnh – đặc biệt là Bắc Giang. Dự án hướng tới mục tiêu kết nối người mua – người bán – nhà đầu tư trên cùng một hệ sinh thái thông tin, đồng thời cung cấp các công cụ tra cứu và phân tích mạnh mẽ giúp người dùng ra quyết định chính xác, nhanh chóng và an toàn hơn. Dự án hướng đến việc cung cấp:
Công cụ đăng tin mua bán miễn phí, dễ sử dụng.
Tra cứu quy hoạch chính xác, theo số tờ số thửa.
Phân tích xu hướng sốt đất và dòng tiền đầu tư.
Ngày bắt đầu
10 thg 2, 2023
Khách hàng
Tâm Thành Land (SeLand)
Vai trò & phạm vi công việc của tôi
Tôi đóng vai trò UI Designer, tham gia vào tất cả các giai đoạn của quy trình thiết kế giao diện, bao gồm:
Phối hợp với BA xây dựng sitemap tổng thể dựa trên hành vi người dùng và nhu cầu thị trường.
Phân chia hệ thống giao diện theo module chức năng, tạo nền tảng cho việc quản lý & phát triển mở rộng sau này.
Thiết kế toàn bộ UI WebApp, gồm hơn 100 màn hình – bao gồm cả phiên bản desktop, responsive và mobile.
Kiến trúc sản phẩm & cách tổ chức thiết kế
Để đảm bảo khả năng phát triển bền vững và dễ bảo trì, tôi chủ động phân chia UI thành các nhóm module rõ ràng (như thể hiện ở bản thiết kế):
Module chức năng | Mô tả |
|---|---|
Login / Register | Giao diện đăng nhập, xác thực 2 bước, đăng ký |
Homepage | Trang chủ hiển thị danh sách tin, filter và điều hướng chính |
Post Management | Quản lý tin đăng, chỉnh sửa, theo dõi lượt xem |
Map / Quy hoạch | Giao diện bản đồ tra cứu quy hoạch, hiển thị thông tin đa lớp |
Dự án | Hiển thị dự án bất động sản, gắn với các tiện ích bản đồ |
Yêu thích / Lịch sử | Quản lý danh sách BĐS đã lưu, đã xem |
Tài khoản người dùng | Quản lý thông tin cá nhân, quảng cáo, lịch hẹn, khuyến mãi |
Gói tin & Khuyến mãi | UI cho các gói dịch vụ, nạp tiền, sử dụng mã ưu đãi |
Tin tức & Đào tạo | Blog thị trường, phong thuỷ, tài chính, pháp lý |
Thiết kế responsive / mobile-first
Với mobile, tôi rút gọn header và dùng bottom navigation để giữ hành vi tìm kiếm và lưu tin luôn dễ truy cập. Các thao tác như chọn số tờ/số thửa được thiết kế lại dạng dropdown đơn giản, tránh việc người dùng nhập tay phức tạp.
Thách thức & giải pháp thiết kế
Hệ thống thông tin quá rộng, dễ gây nhiễu. Tôi và BA đã cùng thống nhất xây dựng sitemap theo 2 chiều:
Theo mục tiêu người dùng (tìm tin, đăng tin, quản lý tài khoản)
Theo dữ liệu nội dung (quy hoạch, dự án, tin tức, phân tích đầu tư)
Bản đồ quy hoạch có nhiều lớp dữ liệu phức tạp, tôi đã quyết định:
Thiết kế bộ lọc nằm bên trái (sidebar filter), hỗ trợ bật/tắt layer.
Cấu trúc lại tooltip theo dạng “thẻ nội dung” dễ đọc khi hover/lít.
Tin đăng nhiều loại bất động sản, cần phân loại rõ, tôi đã quyết định thiết kế:
Phân chia danh mục theo loại hình (nhà riêng, shophouse, đất nền...) bằng hệ thống tab + màu nhận diện nhẹ.
Giao diện đăng tin dạng nhiều bước (step form), tránh bị quá tải thông tin.
Teamwork
Sau khi bàn giao bản đầu tiên, nhóm Dev phản hồi rằng filter bản đồ quá nặng vì dữ liệu tải nhiều lớp cùng lúc. Tôi đã rút gọn giao diện bằng cách nhóm theo chủ đề quy hoạch và thêm hiệu ứng loading tối giản theo từng lớp → giúp cải thiện hiệu năng đáng kể nhưng vẫn giữ được trải nghiệm trực quan.
Ngoài ra, việc chú tâm hợp tác với BA giúp tôi hiểu rõ các ràng buộc logic từ backend (ví dụ: các trạng thái tin đăng, gói khuyến mãi áp dụng). Tôi thường dùng Figma comments hoặc tự tạo các note ngay trong bản thiết kế để mô tả logic và states, vừa để trao đổi nhanh với BA và cũng giúp Dev nắm được điều kiện hiển thị mà không cần mockup riêng cho mỗi biến thể.
📌 Quick Stats:
100+ màn hình giao diện
12 nhóm chức năng chính
30+ reusable UI components
Thời gian thiết kế: ~5 tuần
