Giang Café
Thiết kế và phát triển website giới thiệu thương hiệu cà phê — tối ưu trải nghiệm khách hàng, chuẩn SEO, responsive hoàn hảo và hỗ trợ quản trị nội dung.
Cuộn xuống ↓
Tổng quan dự án
Thách thức
Giang Café cần một website mới thay thế phiên bản cũ — vừa mang nhận diện thương hiệu premium, vừa phục vụ khách hàng thực tế trên mọi thiết bị.
- Website cũ chưa tối ưu trải nghiệm người dùng
- Không responsive — khó dùng trên mobile
- Thiếu nhận diện thương hiệu nhất quán
- SEO yếu, khó tìm trên Google
- Chưa có CMS — cập nhật menu và nội dung khó khăn
- Tốc độ tải chậm, ảnh hưởng tỷ lệ thoát
Giải pháp của chúng tôi
Research
Phân tích đối thủ F&B, hành vi khách hàng và brand story của Giang Café.
Wireframe
Kiến trúc thông tin rõ ràng: hero → menu → story → gallery → liên hệ.
UI Design
Editorial layout, tone coffee brown & cream, typography lớn, nhiều khoảng trắng.
Development
Next.js component-first, animation nhẹ với Framer Motion, media tối ưu.
SEO
Metadata, schema, sitemap, Open Graph và internal linking từ ngày đầu.
Optimization
Lighthouse 95+, lazy-load ảnh, Cloudinary, deploy Vercel edge.
Design System
Hệ thống thiết kế nhất quán — typography, màu sắc và component tái sử dụng xuyên suốt website.
UI Showcase
Từng màn hình được thiết kế như một trang editorial — media lớn, typography thoáng, CTA rõ ràng.
Hero fullscreen với spatial storytelling và orbit navigation.
Menu đồ uống với photography-led layout và filter category.
Câu chuyện thương hiệu với timeline và ảnh không gian quán.
Masonry gallery với hover zoom và lightbox.
Form liên hệ, Google Map và giờ mở cửa.
Dashboard quản trị menu, ảnh và nội dung động.
Responsive
Trải nghiệm nhất quán trên desktop, tablet và mobile — layout thích ứng, touch-friendly.
Tính năng
Hiệu năng
Đo được bằng Lighthouse — không hứa suông.
SEO
Cấu trúc SEO được lên kế hoạch từ discovery — không vá sau khi launch.
- →Sitemap.xml tự động
- →Robots.txt chuẩn
- →Schema.org structured data
- →Metadata & Open Graph đa trang
- →Internal linking có chủ đích
- →Alt text cho mọi media
Quy trình phát triển
Kết quả
Phản hồi khách hàng
★★★★★“Website mới giúp khách nhận ra thương hiệu Giang Café ngay từ giây đầu — nhanh, đẹp và dễ cập nhật menu mỗi tuần.”
