Delarft - Food Ordering App UI Kit
UI kit cho ứng dụng đặt món ăn: từ user flow, wireframe đến giao diện và tương tác.
Mục lục
Delarft là bộ UI kit cho ứng dụng đặt món từ quán ăn gần nhà và giao tới tận cửa, làm cùng Futix Lab và phát hành cho cộng đồng Figma. Bộ kit gồm luồng người dùng, wireframe, style guide, bộ icon, các màn hình dựng sẵn ở hai giao diện sáng và tối, cùng hệ component để đội thiết kế chỉnh sửa nhanh.
Bài này kể lại bộ kit theo đúng thứ tự đã làm: bài toán, cách làm, luồng người dùng, nền thị giác, các màn hình và phần đóng gói cho người dùng kit.
01. Bài toán
Ứng dụng giải quyết việc đặt món trực tuyến từ quán địa phương và giao đến tận nơi, giúp hạn chế tiếp xúc trực tiếp giữa người với người. Với người thiết kế, bài toán là có một bộ kit đủ đầy để rút ngắn thời gian thiết kế sản phẩm thay vì dựng lại từ đầu.
Bốn mục tiêu được đặt ra từ đầu:
- Trọn luồng ứng dụng: bộ công cụ đầy đủ nhất có thể để tối ưu thời gian thiết kế sản phẩm.
- Thiết kế tốt: chú trọng phong cách thiết kế để phần lớn người dùng tiếp cận được bộ kit.
- Thư viện component: một hệ component giúp người thiết kế dễ chỉnh sửa và tuỳ biến giao diện.
- Dễ dùng: layer và component được phân loại theo nhóm, kèm hướng dẫn thiết kế.
02. Cách làm: ba chặng
Nhóm đặt mình vào vị trí của startup và người thiết kế để tìm giải pháp phù hợp, với đích là một bộ kit chất lượng giúp tối ưu thời gian thiết kế. Công việc chia thành ba chặng nối tiếp: khởi đầu với luồng người dùng, wireframe và thiết lập style guide; thiết kế với giao diện, minh hoạ, icon và giao diện tối; đóng gói với hệ component theo cấu trúc atomic và bộ hướng dẫn.
03. Luồng người dùng
Luồng bắt đầu từ onboarding và màn chào, rồi vào trang chủ với vị trí, tìm kiếm, quán gần bạn, danh mục, banner, quán yêu thích và món nổi bật. Luồng đặt món đi từ danh mục món đến quán và món, sang thanh toán, rồi tới đánh giá với xếp hạng, bình luận và hỗ trợ. Luồng tài khoản gồm quản lý thanh toán, địa chỉ, lịch sử đơn, hỗ trợ, danh sách yêu thích và sửa hồ sơ. Ngoài ra còn có thông báo, chọn vị trí, giỏ hàng, ví, thẻ, địa chỉ và theo dõi đơn.
Wireframe độ chi tiết cao được dựng cho các màn chọn vị trí, chi tiết và trạng thái đơn, thông báo, tìm kiếm, trang chủ, chi tiết quán, thêm địa chỉ và quán yêu thích trước khi lên giao diện.
04. Nền thị giác
Style guide toàn cục gồm bảng màu chính đỏ cam, màu phụ xanh lá, xanh dương và cam, màu nhấn vàng và đỏ, dải trung tính mười bậc, kèm biến thể cho giao diện tối. Chữ dùng Averta với các bậc Headline, Body, Caption và Button.
Bộ icon minh hoạ theo chủ đề ẩm thực: các nhóm món như burger, cơm cuộn, salad, mì, bánh, đồ uống, hải sản, cùng icon cho khuyến mãi, vé và ví.
05. Màn hình dựng sẵn
Onboarding gồm ba bước giới thiệu: đặt món từ quán yêu thích, giao nhanh tới cửa và kết nối ví điện tử, tiếp theo là màn tạo tài khoản, đăng nhập hoặc tiếp tục với Google.
Trang chủ hiện vị trí giao, ô tìm kiếm, quán nổi bật gần bạn, danh mục và banner khuyến mãi. Từ đó người dùng vào lưới danh mục, danh sách quán gần bạn với bộ lọc sắp xếp, khoảng cách và phí giao, chi tiết một danh mục, quán yêu thích và trang quán với các món kèm giá.
Thanh toán gom địa chỉ giao trên bản đồ, các món đã chọn với tuỳ chọn và nút sửa, tạm tính cùng phí dịch vụ và phí giao, phương thức thanh toán qua ví hoặc thẻ, khuyến mãi phù hợp với đơn và màn chọn vị trí.
Trạng thái đơn đi qua các bước đã nhận đơn, shipper đang tới quán và đơn đang trên đường, với bản đồ trực tiếp, khung giờ giao, thông tin shipper và chi tiết đơn.
Hai đoạn demo tương tác dưới đây được quay từ bản prototype của bộ kit.
06. Giao diện tối
Toàn bộ màn hình có bản giao diện tối dùng chung bảng màu đã định nghĩa: hồ sơ với tài khoản liên kết, thông báo, vị trí giao, danh sách quán, trang chủ, menu, danh mục, quán yêu thích, chi tiết quán, chọn vị trí, khuyến mãi và tìm kiếm.
07. Đóng gói cho người dùng kit
Bộ kit có 358 component với variant và 88 section dựng bằng auto layout theo cấu trúc atomic, chia thư mục theo nhóm như button, card, header, input, list, navigate, account, address, check-out, dish, notification và restaurant để đổi instance ngay trong Figma. Style guide và guideline đi kèm gồm bảng màu, thang chữ và các biến thể thanh điều hướng.
08. Trạng thái và giới hạn
Delarft là bộ UI kit, không phải ứng dụng đã phát hành; tên quán, món, giá và địa chỉ trong màn hình là dữ liệu mẫu. Bộ kit được giới thiệu trên UI8 và có bản miễn phí trên Figma Community.