Amela
GurumeBox Co., Ltd. — Câu chuyện ra mắt nền tảng mới
ℹ︎Vì lý do bảo mật, tên công ty, tên dự án và hình ảnh hệ thống đã được thay bằng tên giả và bản mô phỏng.

Một EC đặc sản giao trực tiếp từ nơi sản xuất,Xây nội bộ từ đầu, chỉ với điện thoại.

GurumeBox là một EC giao đồ ăn, chuyển thẳng hương vị theo mùa từ các nhà sản xuất trên toàn quốc—một storefront dễ xem, dễ tìm, dễ mua, đáp ứng hành vi mua sắm lấy điện thoại làm trung tâm.

Trải nghiệm thương hiệu, tối ưu di động, khả năng khám phá và luồng mua mượt mà ─ câu chuyện ra mắt nền tảng mới, xây dựng nội bộ từ đầu trong bốn tháng để đáp ứng đồng thời cả bốn trục mà một EC ẩm thực cần.

Ra mắt
0→1
Một EC thương hiệu mới từ đầu
Lần vẽ đầu tiên
<1.5giây
Vite + Vue 3 SPA
Tối ưu hóa
Di động
Thiết kế phù hợp với nguồn truy cập chính
Danh mục
6+Danh mục
Thịt, hải sản, đồ ngọt và hơn thế
GurumeBox
Tất cả Thịt Hải sản
01
CLIENT
Về khách hàng

GurumeBox, một trong những đơn vị hàng đầu cả nước dẫn dắt lưu thông thực phẩm.

GurumeBox Co., Ltd. vận hành nền tảng đặc sản giao trực tiếp từ nơi sản xuất, kết nối nhà sản xuất và người tiêu dùng trên toàn quốc. Trải khắp các danh mục đa dạng—thịt, hải sản, rau & trái cây, đồ ngọt, đồ uống—thương hiệu mang “hương vị theo mùa” đến những bàn ăn sành điệu.

Khi mở rộng kinh doanh, GurumeBox cần một storefront EC của riêng mình vừa truyền tải thế giới thương hiệu vừa phù hợp với hành vi mua sắm lấy điện thoại làm trung tâm. AMELA đồng hành với vai trò đối tác xây dựng EC này từ đầu và nội bộ.

Danh mục sản phẩm
6+
Khu vực giao trực tiếp
Toàn quốc
Tối ưu di động
100%
BUSINESS FLOW — Quy trình sử dụng
STEP 01
Tìm sản phẩm
Khám phá hương vị theo mùa qua catalog, danh mục và tìm kiếm
STEP 02
Xem chi tiết & đánh giá
Chọn hàng tự tin qua hình ảnh, giá và đánh giá
STEP 03
Giỏ hàng & đăng ký
Thêm vào giỏ và đăng ký thành viên mượt mà
STEP 04
Mua hàng & giao trực tiếp
Sau thanh toán, giao thẳng từ nhà sản xuất
02
CHALLENGE
Bài toán thiết kế cần giải

Bốn yêu cầu cấu trúc mà nền tảng cần đáp ứng.

Không điều nào là vấn đề lựa chọn công nghệ; đó là những yêu cầu kinh doanh gắn trực tiếp với giá trị thương hiệu, trải nghiệm mua sắm và doanh thu. Việc xây mới từ đầu đòi hỏi một thiết kế “đáp ứng tất cả cùng lúc”.

Ra mắt EC thương hiệu mới
Bắt đầu từ khi chưa có EC riêng, họ có được nền tảng truyền tải thế giới thương hiệu—Thiết kế từ đầulà điều cần thiết.
Mua sắm lấy di động làm trung tâm
Nếu xây bằng giao diện ưu tiên PC,Điện thoại, nguồn truy cập chínhtrải nghiệm bị tổn hại và tỷ lệ chuyển đổi giảm.
Khả năng tìm sản phẩm
Khi số lượng sản phẩm tăng, nếu không thiết kế khả năng khám pháDạo xem giảmvà người dùng không thể đến được sản phẩm muốn mua.
Rời bỏ từ đăng ký đến mua
Nếu thiết kế luồng sai, người dùng rời bỏ giữa chừng khi đăng ký hoặc thanh toánBỏ giỏ hàngxảy ra thường xuyên, dẫn đến mất cơ hội.
03
ARCHITECTURE
Kiến trúc xây dựng cùng nhau

Biến EC ẩm thực thành “nền tảng có thể mở rộng” trên bốn mảng.

Chúng tôi xây dựng cả bốn mảng—trải nghiệm thương hiệu, tối ưu di động, khả năng khám phá và luồng mua hàng—từ đầu và nội bộ dưới dạng SPA Vue 3 + TypeScript tốc độ cao. Kiến trúc component hóa mang lại nền tảng dễ cập nhật cho đội vận hành.

Amela
EXECUTION
4tháng
Thời gian
8người-tháng
Tổng công sức
${''}
Mảng ①
Trải nghiệm thương hiệu
Thách thức
Cần ra mắt một EC mới truyền tải thế giới thương hiệu
Giải pháp
Xây dựng từ đầu bằng SPA Vue 3
Truyền tải thương hiệu qua hero, danh mục và đánh giá phong phú
Mảng ②
Tối ưu di động
Thách thức
Cần trải nghiệm mua hàng thoải mái trên điện thoại, nguồn truy cập chính
Giải pháp
Responsive, ưu tiên di động
Giao diện nhất quán, không vỡ ở mọi kích thước màn hình
Mảng ③
Khả năng khám phá
Thách thức
Cần thiết kế khả năng tìm kiếm khi số lượng sản phẩm tăng
Giải pháp
Luồng danh mục, SALE và đánh giá
Bộ lọc và hiển thị đánh giá thúc đẩy dạo xem
Mảng ④
Luồng mua hàng
Thách thức
Cần thiết kế luồng giảm tỷ lệ rời bỏ từ đăng ký đến thanh toán
Giải pháp
Luồng đăng ký đến thanh toán liền mạch
Kiểm soát nhất quán từ giỏ hàng đến xác nhận đơn bằng quản lý trạng thái Pinia
FRONTEND
Vue 3 TypeScript Pinia Tailwind CSS Vvee-validate
TOOLING
Vite ESLint Prettier
04
IMPACT
Giá trị mà nền tảng tạo ra

“Tăng trưởng kinh doanh” của GurumeBox được tăng tốc.

Nền tảng này liên tục tạo ra các kết quả kinh doanh—giá trị thương hiệu, tỷ lệ chuyển đổi, hiệu quả vận hành—chứ không chỉ là các chỉ số kỹ thuật.

Nền tảng để sở hữu một EC truyền tải thương hiệu
Một storefront thể hiện thế giới thương hiệu giúp tối đa hóa giá trị sản phẩm.
Trải nghiệm mua trọn vẹn trên điện thoại
Trên di động—nguồn truy cập chính—người dùng có thể mua hàng mà không gặp trở ngại.
Thiết kế tối đa hóa dạo xem
Danh mục, SALE và đánh giá làm tăng khám phá và mua hàng.
Đội ngũ có thể tập trung vào vận hành dễ cập nhật
Thiết kế component hóa giúp đội vận hành cập nhật sản phẩm và thông điệp nhanh chóng.
🛒
STAKEHOLDER
Người dùng
Thông thường
✕ EC ưu tiên PC thường khó tìm kiếm trên điện thoại
Tại GurumeBox,
✓ Khám phá và mua sản phẩm thoải mái trên điện thoại
Tác động kinh doanh
Cải thiện dạo xem và tỷ lệ chuyển đổi
🚜
STAKEHOLDER
Nhà sản xuất & người bán
Thông thường
✕ Kênh bán hạn chế, khó tiếp cận người tiêu dùng toàn quốc
Tại GurumeBox,
✓ EC giao trực tiếp từ nơi sản xuất, đến bàn ăn khắp cả nước
Tác động kinh doanh
Thu hút khách hàng mới
🛠️
STAKEHOLDER
Vận hành
Thông thường
✕ Việc cập nhật sản phẩm và thông điệp thường tốn công
Tại GurumeBox,
✓ Dễ cập nhật nhờ component hóa
Tác động kinh doanh
Giảm chi phí vận hành
STAKEHOLDER
Thương hiệu
Thông thường
✕ Không truyền tải được thế giới thương hiệu, dễ sa vào cạnh tranh về giá
Tại GurumeBox,
✓ Storefront phong phú thể hiện thế giới thương hiệu
Tác động kinh doanh
Nâng cao giá trị thương hiệu
05
DEMO
Ba kịch bản

Trải nghiệm GurumeBox qua bản demo hoạt động thực tế.