Project Case Study

Lạc Artspace

A premium digital experience designed to simplify workshop booking while showcasing the artistic identity of LAC.ARTSPACE.

RolesUI/UX · Frontend · Database
Tech StackNext.js · Prisma · Supabase
Year2026
Lạc Artspace — Premium digital art coffee space
02 / Challenge

The Challenge

Previously, Lạc Artspace organized art workshops manually via social media posts, resulting in operational bottlenecks:

01

Manual Booking

Time-consuming booking confirmation cycles over chat messages.

02

Scattered Info

Difficulty for users to check available schedules, topics, and pricing.

03

No System

Lacked a centralized repository to manage workshop registrations.

04

Brand Consistency

Standard templates failed to convey the premium, artistic identity.

03 / Research

Research & Discovery

We analyzed the user journey of a painting attendee — from initial discovery on social media to completing their artwork.

01

User Interviews

Interviewed 20 regular attendees to identify key registration friction points.

02

Competitor Analysis

Reviewed top F&B and art workshop concepts in Vietnam & SE Asia.

03

Journey Mapping

Designed a booking flow requiring fewer than 3 steps from start to finish.

04 / Architecture

Information Architecture

A simplified, content-first user flow, eliminating clutter to keep user focus on the artistic experience.

Step 01

Home Page

Introduces the studio space, atmosphere, and highlighted workshops.

Step 02

Booking

Real-time calendar schedules, painting topics, pricing, and materials included.

Step 03

Confirmation

Clean summary card with a dynamic QR code ticket delivered via automated email.

05 / Identity

Visual Language

A warm, natural wood and coffee-derived color palette merged with canvas texture. Premium editorial typography.

Coffee Brown

#3D2B1FWarm cozy coffee hue

Linen Cream

#F9F6F0Rustic canvas cream texture

Charcoal

#1C1C1CDeep structured charcoal grey
06 / Motion

Motion System

Animations at Lạc Artspace are designed to guide user attention and elevate artistic aesthetics, rather than act as mere decoration.

Parallax Scrolling

Creates spatial depth while scrolling through showcase galleries.

Interactive Canvas Zoom

Smooth canvas details expansion on hover.

Smooth Route Transitions

Fluid page shifts preserving continuous aesthetic sentiment.

07 / Engineering

Engineering

Engineered using Next.js for high-speed page delivery, guaranteeing optimal Lighthouse metrics.

Next.js

Server components rendering page loads under 1 second.

Prisma & Supabase

Reliable database schemas to store attendees, schedules, and tickets.

Cloudinary

Media pipeline delivering optimized image assets and video previews.

08 / Performance First

Lighthouse Audit Results

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

SEO Strategy

Technical SEO audits help Lạc Artspace reach organic visitors looking for weekend art experiences.

Structured Data

Event schema implementation displaying workshop times directly in Google Search.

Image SEO

WebP format compression with descriptive keyword alt tags.

Local SEO

Embedded Map coordinates, localized search optimization, and opening times.

10 / Outcome

Outcome

The digital solution transformed operations, boosted brand professionalism, and enhanced business KPIs.

Simplified
Booking Flow
100%
Responsive
Lighthouse
Optimization

"The website transforms the workshop experience into something simple, modern and memorable."

11 / Future

What Comes Next

Online Payments

Integrating Momo and VNPay directly during reservation checkout.

Student Accounts

A dashboard to store completed artwork history and loyalty perks.

Virtual 3D Gallery

An interactive WebGL virtual gallery tour of the studio.

Interested in building something similar?

Let's turn your digital idea into a beautifully designed, high-performance product.