Case Study Dự án

Lạc Artspace

Một trải nghiệm kỹ thuật số cao cấp giúp tối ưu hóa việc đặt chỗ workshop trong khi tôn vinh bản sắc nghệ thuật độc đáo của Lạc Artspace.

Vai tròUI/UX · Frontend · Database
Công nghệNext.js · Prisma · Supabase
Năm thực hiện2026
Lạc Artspace — Premium digital art coffee space
02 / Challenge

Bài toán đặt ra

Trước đây, Lạc Artspace tổ chức các workshop vẽ tranh thủ công qua mạng xã hội, dẫn đến nhiều bất cập trong vận hành và trải nghiệm khách hàng:

01

Đặt lịch thủ công

Tương tác và chốt lịch thủ công qua tin nhắn tốn nhiều thời gian.

02

Thông tin phân tán

Khách hàng khó xem được lịch trống, chủ đề vẽ và thông tin chi tiết.

03

Vận hành rời rạc

Không có hệ thống quản lý tập trung danh sách khách tham dự.

04

Nhận diện thương hiệu

Giao diện bài viết thông thường chưa làm bật được cá tính nghệ thuật cao cấp.

03 / Research

Nghiên cứu & Khám phá

Chúng tôi bắt đầu bằng cách tìm hiểu hành trình của một học viên vẽ tranh — từ lúc tìm thấy thông điệp trên MXH cho đến khi hoàn thành bức vẽ tại studio.

01

Phỏng vấn người dùng

Khảo sát ý kiến của 20 học viên thường xuyên tham gia vẽ tranh để nắm bắt rào cản đặt chỗ.

02

Phân tích đối thủ

Tìm hiểu các mô hình F&B kết hợp Workshop nghệ thuật tại Việt Nam và Đông Nam Á.

03

Hành trình đặt lịch

Thiết kế luồng thao tác rút ngắn xuống dưới 3 bước từ lúc chọn chủ đề đến hoàn tất.

04 / Architecture

Kiến trúc thông tin

Sơ đồ luồng hoạt động tối giản hóa, loại bỏ hoàn toàn các thông tin gây nhiễu để hướng sự tập trung của khách hàng vào trải nghiệm nghệ thuật.

Step 01

Trang chủ

Giới thiệu không gian Lạc Artspace, không khí nghệ thuật và các workshop nổi bật.

Step 02

Đặt lịch

Lịch trống cập nhật thời gian thực, chi tiết chủ đề vẽ, mức phí và công cụ đi kèm.

Step 03

Xác nhận

Trang tóm tắt đặt chỗ tinh gọn kèm vé điện tử QR Code gửi trực tiếp về email khách.

05 / Identity

Ngôn ngữ thiết kế trực quan

Sử dụng tông màu ấm tự nhiên của gỗ và cà phê kết hợp với chất liệu Canvas tối giản. Font chữ serif cao cấp tạo cảm giác biên tập và nghệ thuật.

Coffee Brown

#3D2B1FMàu nâu cà phê ấm cúng

Linen Cream

#F9F6F0Kem vải lanh mộc mạc

Charcoal

#1C1C1CXám than đen sâu thẳm
06 / Motion

Hệ thống chuyển động

Chuyển động trong Lạc Artspace được thiết kế để điều hướng sự chú ý và nâng tầm xúc cảm nghệ thuật thay vì trang trí đơn thuần.

Parallax Scrolling

Tạo chiều sâu không gian khi cuộn qua các bức tranh trưng bày.

Interactive Canvas Zoom

Phóng to mượt mà các chi tiết màu vẽ khi di chuột qua bộ sưu tập.

Smooth Route Transitions

Chuyển trang không giật lag, giữ nguyên cảm xúc nghệ thuật liền mạch.

07 / Engineering

Giải pháp Kỹ thuật

Xây dựng trên nền tảng Next.js tối ưu hóa tốc độ tải trang, đảm bảo Lighthouse tối ưu tuyệt đối cho cả SEO và Accessibility.

Next.js

Hỗ trợ Server Components tải nhanh dưới 1 giây.

Prisma & Supabase

Quản lý cơ sở dữ liệu học viên và lịch workshop tin cậy.

Cloudinary

Tối ưu hóa hình ảnh độ phân giải cao và video demo chất lượng không giảm.

08 / Performance First

Lighthouse Audit Results

98
Performance
98
Accessibility
96
Best Practices
100
SEO
09 / Strategy

Chiến lược SEO & Khám phá

Tối ưu hóa SEO kỹ thuật giúp Lạc Artspace tiếp cận tệp khách hàng tự nhiên tìm kiếm workshop vẽ tranh cuối tuần.

Structured Data

Khai báo Schema Event cho từng lịch workshop để Google hiển thị trực tiếp lịch vẽ trên trang tìm kiếm.

Image SEO

Nén WebP toàn bộ tác phẩm nghệ thuật, thêm thuộc tính alt giàu từ khóa hữu ích.

Local SEO

Tích hợp bản đồ địa điểm và thông tin giờ mở cửa tối ưu.

10 / Outcome

Kết quả thực nghiệm

Giải pháp đã chuyển đổi hoàn toàn cách hoạt động của Lạc Artspace, nâng tầm chuyên nghiệp và cải tiến vượt bậc chỉ số kinh doanh.

Rút gọn
Luồng đặt lịch
100%
Tương thích di động
Lighthouse
Điểm tối ưu

"Trang web đã biến quy trình đặt chỗ workshop rối rắm thành một trải nghiệm nghệ thuật đơn giản, sang trọng và khó quên."

11 / Future

Lộ trình phát triển tiếp theo

Thanh toán trực tuyến

Tích hợp cổng thanh toán Momo, VNPay trực tiếp khi giữ chỗ.

Tài khoản học viên

Nơi lưu trữ lịch sử tác phẩm đã vẽ và ưu đãi thành viên thân thiết.

Triển lãm ảo 3D

Xem không gian triển lãm tranh số trực tiếp bằng công nghệ WebGL.

Bạn muốn xây dựng một giải pháp cao cấp?

Hãy cùng chúng tôi biến ý tưởng số của bạn thành một sản phẩm có tư duy thiết kế đột phá.