Edit Template
Edit Template

ROOSTER BEERS
WEBSITE DESIGN

Giới thiệu về dự án

Rooster Beers là một hãng bia thủ công tại Việt Nam và được thành lập vào năm 2015 cho đến nay. Họ là những chuyên gia nấu bia đầy đam mê, sáng tạo và nhiệt huyết, mong muốn mang đến cho khách hàng những dòng bia thủ công mang hương vị cổ điển tuyệt hảo. Mỗi ngụm bia Rooster mát lạnh mang đến trải nghiệm thuởng thức đáng nhớ, kể cả đối với những người sành bia lâu năm.

VỊ TRÍ
Lead designer
NĂM THỰC HIỆN
3/2021 - 6/2021
Công việc thực hiện
Quản lí team
thiết kế website
ux research

Khó khăn khi nhận dự án

Ở thời điểm đó website cũ các lãnh đạo nói về các vấn đề như sau:

  • Khó sử dụng trên website và mobile
  • Khó khăn khi cập nhật thêm các trang
  • Người dùng ở Việt Nam khó tiếp cận.
  • Cần sáng tạo để trông hấp dẫn hơn
  • Khó khăn từ đội ngủ và công cụ: thời điểm đó team các bạn làm cùng cũng rất trẻ, và không rành về làm website hoặc quản lí nó.

Giải pháp đưa ra

  • Thời điểm đó, mình mới bắt đầu rà soát lại toàn bộ phần quản lý của website. Vì hệ thống đang sử dụng nền tảng WordPress và phía lãnh đạo cũng không muốn thay đổi quá nhiều, nên mình quyết định tìm hướng tối ưu dựa trên nền tảng hiện tại.

  • Sau một thời gian tìm kiếm, mình chọn hợp tác với đội ngũ lập trình từ công ty GKC để cùng xây dựng lại hệ thống sao cho dễ quản lý và linh hoạt hơn trong tương lai.

  • Mình cũng lên danh sách các trường nhập liệu cần thiết, đồng thời đảm bảo chúng phù hợp với giai đoạn thiết kế sau này.

  • Tiếp đó, mình bắt đầu dựng wireframe và tìm cảm hứng thiết kế từ các thương hiệu bia thủ công, cả trong nước lẫn quốc tế, để định hình giải pháp phù hợp nhất.

  • Mình cũng thực hiện đồng bộ màu sắc thương hiệu và các yếu tố hiển thị khác nhằm đảm bảo sự nhất quán trong mọi tình huống. Bộ chữ được phân loại lại theo tỉ lệ và cách sử dụng cụ thể để bám sát Brand Guideline đã đặt ra.

  • Bên cạnh đó, mình hỗ trợ bạn designer trong việc làm việc với Figma để quy trình thiết kế mượt mà hơn. Lúc ấy, Figma vẫn còn khá sơ khai và chưa có nhiều tính năng hỗ trợ như prototype hiện nay. Vì vậy, mình kết hợp thêm animation từ After Effect và xuất ra dưới dạng gif để đưa vào Figma, giúp phần trình bày sinh động hơn.

     

Giai đoạn thực hiện

  • Trong giai đoạn này, mình bắt đầu xây dựng hệ thống màu sắc và kiểu chữ, xác định rõ ràng từng loại sẽ được sử dụng khi nào, trong hoàn cảnh nào – nhằm đảm bảo tính nhất quán xuyên suốt toàn bộ website.
  • Tiếp theo là phần thiết kế các thành phần giao diện và lên layout cho trang web. Vì đây là một bước quan trọng, mình đã đưa ra nhiều phương án thiết kế khác nhau để mọi người có thể dễ dàng lựa chọn và đánh giá.
  • Sau khi thống nhất, mình tiến hành tạo prototype sát với trải nghiệm thực tế nhất có thể, giúp mọi người hình dung rõ hơn khi đưa vào vận hành.
  • Khi hoàn thành phần thiết kế, mình chuyển sang giai đoạn test code. Mình rà soát lại toàn bộ để phát hiện những lỗi hiển thị hoặc bug nhỏ, đảm bảo giao diện hiển thị chính xác theo thiết kế ban đầu.
  • Mình cũng chủ động vào phần quản trị (admin) để kiểm tra trải nghiệm người dùng. Nếu có điểm nào còn khó sử dụng hoặc chưa hoạt động như mong đợi, mình sẽ đề xuất giải pháp xử lý ngay để mọi thứ vận hành mượt mà hơn.

Lời kết

Website đã được vận hành được 3 năm. Và khi mình nhìn lại vẫn thấy vui vì được làm từ đầu đến khi hoàn thành chỉnh chu. 

Năm nay mình sẽ cho ra mắt phiên bản nâng cấp thêm cho webite Rooster Beers. Hi vọng các bạn sẽ hóng chờ nhé.

MÀN HÌNH FILE THIẾT KẾ

MỘT SỐ MÀN HÌNH MOCKUP

CÙNG MÌNH TRIỂN KHAI Ý TƯỞNG THIẾT KẾ. TẠO RA TRẢI NGHIỆM TỐT CHO KHÁCH HÀNG VÀ GIÁ TRỊ CHO CỘNG ĐỒNG

loc07.creative@gmail.com

© 2024 Lộc Trọc Design