Case Study: Pizza 4Ps - UI/UX cho ứng dụng giao hàng trực tuyến

Client

Pizza 4Ps trước đây chỉ cung cấp dịch vụ ăn uống tại nhà hàng. Tuy nhiên, do covid và giãn cách xã hội, họ cần một kênh giao hàng trực tuyến không chỉ để giao những món ăn của nhà hàng mà còn những thực phẩm của cửa hàng trực tuyến của họ.

Mục tiêu của họ là kết nối khách hàng và nhà hàng với mong muốn có thể cài đặt thời gian sao cho giao hàng mà thực phẩm giữ được độ tươi ngon nhất.

Overview

Nhiệm vụ của chúng tôi là phát triển chức năng giao hàng (nhà hàng) cho ứng dụng, và cải thiện giao diện để tăng tương tác.

Project Stages

Để thực hiện dự án này, chúng tôi tuân theo quy trình tư duy thiết kế với việc sửa đổi thiết kế sản phẩm lấy người dùng làm trung tâm. Chúng ta hãy cùng xem quy trình sau:

User Research

Trong quá trình điều tra thị trường, chúng tôi đã thực hiện phỏng vấn và làm khảo sát để biết rõ hơn về nhu cầu của khách hàng. Khảo sát cho chúng tôi thấy cái nhìn tổng thể đầu tiên về khách hàng của chúng tôi thông qua các dữ liệu thống kê được. Ngoài ra chúng tôi còn thực hiện phỏng vấn để hiểu rõ hơn khách hàng để tiếp cận được hướng thiết kế.

Điều quan trọng nhất chúng tôi tìm ra được sau khi phỏng vấn là:

Research competitor analysis

Chúng tôi còn tiến hành thực hiện nghiên cứu đối thủ cạnh tranh để tìm ra điểm mạnh và điểm yếu của các đối thủ trong thị trường này.

The scheme of information Architecture

User Flow

Sau đó chúng tôi tiến hành tạo user flow để mô tả luồng hành động của người dùng để giải quyết vấn đề của họ. Chúng tôi quyết định sẽ tập trung vào quy trình tạo đơn hàng và quá trình xác nhận đơn hàng.

Đây sẽ là giai đoạn thử thách nhất, vì giải quyết được những vấn đề đó, chúng tôi sẽ có thể hỗ trợ phân khúc khách hàng của mình, cải thiện trải nghiệm người dùng và tăng các chỉ số kinh doanh. Kết quả là, user flow đã giúp chúng tôi tìm ra cách thức để đặt hàng và quy trình xác nhận đơn hàng tối ưu nhất.

Low-fidelity wireframes

Chúng tôi luôn tập trung vào wireframe(khung sườn) trước, vì phần này sẽ quyết định bản mẫu thiết kế cao cấp (High fidelity Prototypes). Đây là một bước quan trọng để tìm ra được những điểm không tốt mà người dùng đang gặp phải.

High-Fidelity wireframe

UI design: Create a Pizza

Một ứng dụng đặt món ăn điển hình cho các nhà hàng thường có bánh pizza với công thức cố định. Pizza 4Ps đẩy mạnh các giới hạn: ứng dụng này gợi ý người dùng không chỉ tùy chỉnh các loại pizza hiện có bằng cách thêm hoặc bớt nguyên liệu mà còn tạo ra bánh pizza của riêng họ bằng cách chọn vị khác nhau cho các nửa bánh, giá tiền sẽ thay đổi tương ứng theo tuỳ chọn của người dùng.

Choose the half and half pizza

Thực đơn hiển thị các vị trí thực tế và các loại thực phẩm đặc biệt mà nhà hàng hoặc dịch vụ có tại thời điểm hiện tại. Người dùng có thể thấy ảnh mặt hàng và giá cơ bản. Các điểm nhấn màu sắc làm nổi bật nút Half and Half và CTA để quét nhanh. Hơn nữa, hệ thống danh mục ở đầu màn hình cho phép người dùng xem nhiều menu hơn và tìm vị trí cần thiết nhanh hơn.

Sau khi chọn một nút cụ thể – và chuyển sang chọn nửa màn hình bên trái, người dùng sẽ thấy danh sách ảnh sản phẩm ở nửa bên trái, thông tin cốt lõi về giá cả và nút CTA cho phép họ thêm vị trí vào giỏ hàng . Sau đó, người dùng được điều hướng đến một nửa bên phải và chọn nửa kia.
Ngoài ra, màn hình trông gọn gàng – không bị quá tải với các thông tin chi tiết về thành phần không gây hứng thú cho những người dùng hoặc không quá quan tâm đến các chi tiết và muốn đặt hàng càng sớm càng tốt.

Variety of Choices

Những ai quan tâm đến topping có thể sử dụng nút “Add more” ở giữa màn hình, chỉ cần chạm vào nó, họ sẽ kéo cửa sổ bật lên và kiểm tra nội dung của topping. Biểu tượng xe đẩy với một chấm màu cam có số lượng trên đó đưa ra lời nhắc nhanh chóng kết thúc đơn hàng để nhận được thức ăn nhanh hơn.

Quá trình thiết kế ứng dụng cho Pizza 4Ps là một thử thách sáng tạo thú vị đối với nhóm thiết kế ALIVE: đó là một nổ lực tuyệt vời để có một ứng dụng đặt món ăn với các chức năng mở rộng và tính thân thiện với người dùng cao.