Calon klien menilai sebuah studio dari beberapa detik pertama melihat karyanya. Sebelumnya karya hsn.Studio tersebar di feed Instagram, folder Google Drive, dan kiriman WhatsApp, sehingga kualitasnya tenggelam di antara konten lain dan tidak ada jalan yang jelas menuju pemesanan.
i.
Tersebar
Foto terbaik hidup di tiga tempat berbeda. Klien harus mencari sendiri, dan link Drive terasa seperti berkas kerja, bukan karya.
ii.
Tidak terkurasi
Tanpa kategori dan cerita per acara, calon klien wedding melihat foto produk, dan sebaliknya. Kesan premium hilang.
iii.
Buntu
Setelah kagum, pengunjung harus menyalin nomor dan menyusun pesan sendiri. Setiap langkah tambahan menurunkan niat menghubungi.
1.2
Business Goals
Tujuan bisnis dan cara mengukurnya.
01
Naikkan citra premium
Tampilan setara studio papan atas, supaya harga paket terasa sepadan sebelum calon klien bertanya.
Ukuran: waktu di halaman, foto dibuka per kunjungan02
Ubah kunjungan jadi percakapan
Setiap halaman punya ajakan WhatsApp dengan pesan yang sudah terisi sesuai kategori atau album yang dilihat.
Ukuran: persentase kunjungan album yang klik WhatsApp03
Mudah ditemukan di Google
Halaman dirender di server lengkap dengan judul, deskripsi, dan data terstruktur, supaya muncul untuk pencarian lokal Tasikmalaya.
Ukuran: impresi dan klik di Search Console04
Dikelola tanpa developer
Admin menambah kategori, album, foto, dan film langsung dari Google Drive lewat panel admin, tanpa menyentuh kode.
Ukuran: waktu publikasi album baru
1.3
User Persona
Proto-persona dari pola pertanyaan klien yang masuk ke admin. Belum divalidasi lewat wawancara terstruktur.
N
Nadia, 26Calon pengantin · karyawan swasta · Tasikmalaya
“Aku mau lihat hasil satu acara utuh, bukan cuma satu foto terbaik.”
Tujuan
Memastikan gaya foto cocok dengan konsep pernikahannya
Membandingkan 2 sampai 3 studio dalam satu malam
Menunjukkan pilihan ke pasangan dan keluarga
Pain points
Ragu karena hanya melihat foto pilihan di Instagram
Lelah membuka link Drive yang lambat di HP
Canggung menanyakan harga lewat chat pertama
HP 90%Malam hariDari Instagram
R
Raka, 34Pemilik UMKM kuliner · butuh foto produk
“Saya perlu bukti cepat bahwa foto produk mereka bisa menjual.”
Tujuan
Melihat contoh produk sejenis dalam hitungan detik
Langsung tahu cara memesan dan kisaran paket
Membagikan contoh ke tim lewat WhatsApp
Pain points
Waktu sempit, membuka situs di sela pekerjaan
Kuota terbatas, halaman berat langsung ditutup
Bingung kalau kategori bercampur
HPSiang hariDari Google
1.4
Empathy Map
Ringkasan untuk persona utama, Nadia.
Says · Berkata
“Ada contoh wedding yang lengkap?”
“Paketnya mulai berapa ya?”
Thinks · Berpikir
Apakah hasil di hari H akan sebagus foto di Instagram?
Studio ini sepadan dengan budget kami?
Does · Melakukan
Menyimpan tangkapan layar, mengirim ke pasangan, membuka beberapa studio bergantian.
Feels · Merasakan
Antusias tapi cemas salah pilih. Malu bertanya harga sebelum yakin.
Nadia calon pengantin
Pains yang harus hilang
Menunggu foto besar dimuat di jaringan seluler
Kehilangan jejak album yang tadi dilihat
Menyusun pesan pertama dari nol
Gains yang dicari
Satu acara utuh, dari persiapan sampai resepsi
Bukti sosial: rating Google dan kata klien
Satu ketukan menuju admin, pesan sudah siap
02
Flow Design & Architecture
Dari rasa penasaran ke satu ketukan.
2.1
User Journey Map
Lima tahap dari menemukan studio sampai menghubungi admin. Geser ke samping di HP.
01Menemukan
02Masuk
03Menjelajah
04Meyakinkan diri
05Menghubungi
Aktivitas
Melihat link di bio Instagram, hasil Google, atau kiriman teman
Membuka beranda, melihat foto besar dan nama kategori
Memilih kategori, membuka album, menggeser foto
Membaca kata klien, melihat rating, memutar film
Menekan WhatsApp, mengirim pesan
Touchpoint
Pratinjau link (judul, gambar Open Graph)
Hero bergantian, bilah kategori
Kartu album, penyaring kategori, penampil foto
Testimoni, lencana rating Google, film YouTube
Tombol melayang, ajakan di akhir album
Emosi
Hambatan
Link terlihat seperti berkas kerja
Layar putih saat data dimuat
Foto besar lambat di 4G
Tidak ada bukti dari pihak ketiga
Bingung harus menulis apa
Solusi
Render server per halaman: judul, deskripsi, gambar pratinjau
Data tertanam di HTML, tampil tanpa menunggu server
Ukuran foto sesuai layar + pratinjau buram 32 px
Lencana Google 5,0 dan kutipan klien per album
Pesan WhatsApp terisi otomatis sesuai album
2.2
Information Architecture
Tiga tingkat yang dangkal: beranda, kategori, album. Setiap tingkat punya alamat sendiri yang bisa dibagikan.
Beranda portofolio/portfolio
Kategori/portfolio/wedding
6 kategori: Studio, Graduation, Prawedding, Wedding, Product, Event
Deskripsi + ajakan “Tanya paket”
Grid semua album
Album/portfolio/wedding/best-curation
Hero sampul + data acara
Bagian per sesi (misal Akad, Resepsi)
Foto, film YouTube, sebelum/sesudah
Kata klien + ajakan akhir
Lapisan globaldi setiap halaman
Bilah kategori di atas
Penampil foto layar penuh
Pemutar film (dimuat saat dibuka)
Tombol WhatsApp melayang, kontak, rating
2.3
Key User Flow
Alur inti: dari link Instagram sampai pesan terkirim, dengan keputusan di setiap titik.
Ketuk link portofolio
Dari bio Instagram, Google, atau pesan teman.
Keputusan desainServer langsung mengirim HTML lengkap beserta datanya. Teks pertama tampil sekitar 0,3 sampai 0,6 detik di desktop.
Terpikat hero
Lima sampul album unggulan bergantian, nama album bisa langsung diketuk.
Keputusan desainFoto memenuhi layar, teks serif tipis. Karya jadi bintang, antarmuka mundur.
Sudah tahu yang dicari?
Pengunjung memilih jalur sesuai kebutuhannya.
Ya: ketuk chip kategori, grid tersaring tanpa pindah halamanBelum: gulir, setiap kategori tampil 5 album teratas
Keputusan desainChip memakai angka jumlah album, jadi pengunjung tahu isinya sebelum memilih.
Masuk album
Cerita satu acara utuh: sesi, foto, film, dan data acara.
Keputusan desainFoto bermatte putih seperti cetakan galeri. Urutan bisa diatur admin per bagian.
Lihat foto layar penuh
Geser kiri kanan, tombol panah, atau papan ketik.
Keputusan desainLatar hitam, foto tidak terpotong, posisi “2 dari 38” selalu terlihat.
Sudah yakin?
Titik keraguan terbesar di journey map.
Belum: kata klien, rating Google 5,0, dan film menjawab keraguanYa: tombol WhatsApp melayang selalu dalam jangkauan jempol
Keputusan desainBukti sosial diletakkan tepat sebelum ajakan, bukan di halaman terpisah.
Pesan terkirim
“Halo hsn.Studio, saya suka karya ‘Best Curation’ (Wedding) di portofolio. Boleh info paket serupa...”
Keputusan desainPesan menyebut album yang dilihat, jadi admin langsung tahu konteksnya. Klik dicatat untuk statistik per album.
03
UI Design & System
Tenang, editorial, dan biru.
3.1
Design System Blueprint
Token asli yang dipakai halaman portofolio, lengkap dengan rasio kontrasnya. Biru logo #0152CC tetap dipakai pada logo.
Color palette
Paper#F4F0E8Latar utama
Ink#15130F16,3 : 1 · AAA
Brand blue#0141A38,1 : 1 · AAA
Muted#4A453C8,4 : 1 · AAA
Dark#0F0E0CPenampil & kontak
Paper 2#EBE5D9Bidang sekunder
Brand deep#00317DTeks putih 12,1 : 1 · AAA
On dark#EFE9DF16,0 : 1 · AAA
On dark muted#B7B0A39,0 : 1 · AAA
Blue soft#7FB0FF8,8 : 1 · AAA
Typography scale
Display XLCormorant 300 · clamp(60, 11vw, 176)
Karya pilihan
Display LCormorant 300 · clamp(44, 7vw, 96)
Wedding
HeadingCormorant 400 · clamp(26, 2.8vw, 38)
Retya & Yasa
BodyJost 300 · 16 / 1.6
Dokumentasi Studio, Graduation, Prawedding, Wedding, Product dan Event.
EyebrowJost 400 · 13 · spasi 0.15em
Portofolio · Tasikmalaya
Design tokens
Token
Nilai
Dipakai untuk
--pf-gutter
clamp(18px, 4.5vw, 72px)
Jarak tepi, ikut lebar layar tanpa breakpoint
--pf-max
1440px
Lebar isi maksimum
--pf-ease
cubic-bezier(.22,.61,.36,1)
Satu kurva gerak untuk seluruh situs
radius
999px · 0
Tombol berbentuk pil, foto bersudut tegas
touch
min 44px · tombol utama 48px
Target sentuh di HP
motion
0.4s warna · 1.4s foto
Hover cepat, perubahan foto perlahan
Component library
Button
Garis tipis berubah jadi isi pekat saat disentuh. Huruf kapital berjarak lebar.
WhatsApp CTA
Satu-satunya tombol berwarna biru penuh, supaya mata langsung menemukannya.
Filter chip
Coba ketuk. Angka kecil memberi tahu jumlah album sebelum memilih.
★★★★★5,0 dari 5 ulasan Google
Rating badge
Bukti sosial dari pihak ketiga, tertaut ke Google Business Profile.
Product
Album card
Foto memenuhi kartu, judul di atas foto, zoom pelan saat disentuh. Coba arahkan kursor.
Saat disentuh, garis berubah jadi isi pekat dalam 0,4 detik. Saat ditekan, tombol mengecil 2% seperti tombol fisik.
Kartu album memperbesar foto perlahan selama 1,4 detik, gerakan yang terasa mahal karena tidak terburu-buru.
transition: background-color .4s var(--pf-ease)
Pratinjau buram 32 px (sekitar 1 KB) tampil dulu, lalu foto tajam memudar masuk.
Loading
Tidak ada layar putih. Kunjungan ulang langsung tampil dari salinan di HP, lalu data baru diambil diam-diam di belakang.
Rasio pratinjau buram dipakai untuk memesan tempat, jadi susunan tidak melompat saat foto tajam datang.
lh3.googleusercontent.com/d/{id}=w32
Koneksi sedang lambat
Kami menampilkan versi terakhir yang tersimpan. Karya terbaru akan muncul sendiri saat koneksi pulih.
Error
Kalau Apps Script lambat bangun (terukur sampai 12 detik), server memakai data terakhir yang tersimpan. Pengunjung jarang melihat error sama sekali.
Foto yang gagal dimuat dari Google dicoba ulang lewat jalur cadangan sebelum menyerah.
return hit?.data || null; // pakai data lama bila ada
Portofolio sedang disiapkan
Karya terbaru hsn.Studio segera tampil di sini.
Empty
Kategori tanpa album disembunyikan otomatis. Kalau seluruh portofolio kosong, pesan menenangkan menggantikan grid, dan ajakan WhatsApp tetap ada.
Album yang tidak ditemukan mendapat halaman 404 bergaya sama dengan jalan kembali ke beranda.
04
System & Performance · Metrics
Mewah itu cepat.
4.1
Scalability & Handover
Bagaimana sistem ini tumbuh tanpa ikut menjadi berantakan.
Tokens
Satu sumber nilai
Warna, jarak, kurva gerak, dan lebar isi disimpan sebagai variabel CSS. Mengganti warna brand cukup di satu baris, tanpa mencari di 2.000 baris gaya.
Auto-layout
Grid dan flex, bukan posisi tetap
Setara auto-layout di Figma: kartu, chip, dan kolom menyesuaikan isi. Jarak tepi memakai clamp(), jadi mengecil mulus dari 1440 px ke 390 px.
Responsif
Titik patah sedikit, ukuran cair
Dua titik utama, 1024 px dan 720 px, ditambah 560 px dan 460 px untuk HP kecil. Lebar foto yang diminta ke Google dihitung dari kolom dan kepadatan layar, sehingga HP mengambil sekitar 85% lebih sedikit data.
Konten
Data, bukan kode
Kategori, album, bagian, urutan foto, film, testimoni, dan album unggulan diatur dari panel admin. Folder Google Drive jadi sumber foto. Album baru tayang tanpa deploy.
4.2
UX Performance Metrics
Target kuantitatif dan cara mengukurnya. Angka di cincin adalah target, bukan hasil yang sudah diukur.
4,6
Target
CSAT ≥ 4,6 / 5
Survei satu pertanyaan, “Seberapa membantu portofolio ini untuk mengenal karya kami?”, muncul sekali per HP: ke pengunjung yang kembali dari WhatsApp, dan ke 1 dari 4 pengunjung yang sudah membuka 5 foto. Kelompok kedua mengimbangi bias, karena orang yang menekan WhatsApp sudah tertarik. Kedua angka dilaporkan terpisah di statistik admin. Pembanding saat ini: rating Google 5,0 dari 5 ulasan.
90%
Target
Task success ≥ 90%
Uji 5 sampai 8 orang dengan tugas: “Temukan album wedding, buka 3 foto, lalu tanyakan paket lewat WhatsApp” dalam 60 detik tanpa bantuan. Skrip uji dan lembar catatan sudah disiapkan.
80
Target
SUS ≥ 80
Kuesioner System Usability Scale 10 butir setelah uji tugas, dihitung otomatis dengan skrip. Skor 80 ke atas masuk kelompok “sangat baik” (sekitar 10% teratas).
Yang sudah diukur otomatis: setiap kunjungan, foto dibuka, film diputar, dan klik WhatsApp dicatat per album dan per perangkat (HP, tablet, laptop). Panel admin menampilkan album paling dilihat dan album dengan persentase ke WhatsApp tertinggi, menjadi dasar memilih album unggulan.
4.3
Technical & Performance Optimization
Diukur di halaman live pada 1 Oktober 2026 dengan Chrome, setelah perbaikan. HP: layar 390 px, jaringan 1,6 Mbps + jeda 150 ms, CPU diperlambat 4 kali.
36 KBTotal JavaScript + CSS terkompresi. Tanpa framework, tanpa build.
0,4 sLCP beranda, desktop. Album: 1,0 s.
1,3 sLCP beranda di HP 4G lambat. Sebelumnya 2,7 s. Album: 1,2 sampai 1,6 s.
0,03CLS tertinggi. Batas “baik” Google: 0,1.
Teknik
Dampak
Render di server + data tertanam di HTML
Halaman tampil tanpa menunggu Apps Script. Cache 10 menit di server, cadangan data lama bila Google lambat.
Ukuran foto sesuai layar
Lebar diminta = kolom × kepadatan layar, dibulatkan ke 100 px. Galeri HP 2 kolom cukup sekitar 400 px, bukan 1.200 px.
Foto WebP dari Google
Sekitar 30% lebih kecil dari JPEG pada resolusi yang sama. Foto hero album wedding: 1,18 MB menjadi 0,79 MB.
Hero bertahap + preload dari server
Hanya slide pertama dimuat saat halaman dibuka, dan server menyuruh browser mengunduhnya sebelum JavaScript berjalan. Slide berikutnya diambil menjelang gilirannya.
Pratinjau buram 32 px
Sekitar 1 KB per foto, mengisi ruang sebelum foto tajam datang dan mencegah layout melompat.
Salinan di HP (24 jam)
Kunjungan ulang tampil seketika, data baru diambil di belakang.
Pemutar YouTube dimuat saat diklik
Halaman album tidak membawa ratusan KB skrip video sampai pengunjung benar-benar menonton.
Huruf web dimuat tanpa menahan tampilan
Teks langsung terbaca memakai huruf cadangan, lalu berganti halus.
Temuan yang tersisa: setiap deploy mengosongkan cache CDN, sehingga pengunjung pertama sebuah album menunggu Apps Script bangun (terukur 3 sampai 11 detik). Kunjungan berikutnya 0,1 detik. Kini cache dipanaskan otomatis setiap hari oleh penjadwal Vercel, dan sekali setelah setiap deploy dengan npm run warm.
4.4
Accessibility · WCAG
Status terhadap kriteria WCAG 2.2. Audit otomatis axe-core di beranda, kategori, dan album (desktop + HP): pelanggaran kontras AAA turun dari 31 menjadi 0.
Kriteria
Status
Bukti
1.4.6 Kontras teks utama (AAA, 7:1)
AAA
Ink di atas Paper 16,3 : 1. Teks di latar gelap 9,0 sampai 16,0 : 1.
1.4.6 Kontras teks sekunder
AAA
Muted 8,4 : 1, biru 8,1 : 1, teks putih di tombol 9,2 : 1. Sebelumnya 5,2 / 6,0 / 6,8 : 1 (AA).
2.5.5 Ukuran target sentuh (AAA, 44 px)
AAA
Semua tombol, chip, dan tautan navigasi minimal 44 px, tombol utama 48 px.
2.4.7 / 2.4.13 Fokus terlihat
AAA
Garis fokus 2 px berjarak 4 px di setiap elemen yang bisa difokus: biru tua di latar terang (8,1 : 1), biru muda di latar gelap (8,8 : 1). Sebelumnya di area gelap hanya 2,1 : 1.
2.3.3 Gerak dari interaksi
AAA
Semua animasi dimatikan bila HP meminta “kurangi gerakan”.
2.4.1 Lewati ke isi · landmark
AA
Tautan “Langsung ke isi”, header, nav, main, footer, judul berurutan.
1.1.1 Teks alternatif
AA
Tombol foto berlabel “Buka foto 2 dari 38”. Sampul kartu dianggap dekoratif karena judul album sudah tertulis, ikon disembunyikan dari pembaca layar.
Halaman studi kasus ini sendiri memakai pasangan warna yang seluruhnya di atas 7 : 1.
4.5
Dari temuan ke perbaikan
Temuan studi kasus ini langsung diterapkan ke galeri portofolio pada 1 Oktober 2026, lalu diukur ulang dengan cara yang sama.
Temuan
Sebelum
Sesudah
Perbaikan
LCP beranda, HP 4G lambat
2,7 s
1,3 s
Lima foto hero 2.048 px dulu dimuat bersamaan. Kini hanya slide pertama, di-preload server, format WebP.
Pelanggaran kontras AAA (beranda)
31 elemen
0
Abu #6B6458 menjadi #4A453C, biru teks dan tombol #0152CC menjadi #0141A3.
Pelanggaran kontras AAA (kategori, album)
7 sampai 8
0
Token warna yang sama, tanpa mengubah tata letak.
Ukuran foto hero album wedding
1,18 MB
0,79 MB
Foto diminta dalam WebP dari Google (sekitar 30% lebih kecil).
Album pertama setelah deploy
3 sampai 11 s
0,1 s
Cache dipanaskan setiap hari secara otomatis dan setelah deploy dengan npm run warm.
CSAT belum terukur
Hanya target
Survei aktif
Satu pertanyaan, sekali per HP: setelah kembali dari WhatsApp dan untuk sampel pengunjung yang menjelajah. Hasil dua kelompok dipisah supaya tidak bias.
·
Glosarium
Istilah di halaman ini dalam bahasa sehari-hari.
Persona
Gambaran tokoh pengguna khas, dipakai supaya keputusan desain berpijak pada kebutuhan orang nyata.
Empathy map
Peta empat kotak: apa yang pengguna katakan, pikirkan, lakukan, dan rasakan.
Journey map
Urutan langkah pengguna dari awal sampai tujuan, lengkap dengan emosi dan hambatannya.
Information architecture
Cara isi situs dikelompokkan dan disusun supaya mudah ditemukan.
Design token
Nilai desain bernama (warna, jarak, gerak) yang dipakai ulang di seluruh situs.
CSAT
Customer Satisfaction, skor kepuasan pelanggan dari survei singkat.
Task success rate
Persentase orang yang berhasil menyelesaikan tugas tertentu tanpa bantuan.
SUS
System Usability Scale, kuesioner 10 butir untuk menilai kemudahan pakai, skor 0 sampai 100.
LCP
Largest Contentful Paint, waktu sampai gambar atau teks terbesar tampil. Baik bila 2,5 detik atau kurang.
CLS
Cumulative Layout Shift, seberapa banyak tampilan melompat saat dimuat. Baik bila 0,1 atau kurang.
WCAG AA / AAA
Standar aksesibilitas web. AAA tingkat tertinggi, misalnya kontras teks minimal 7 : 1.
Render server
Halaman disusun di server sebelum dikirim, sehingga cepat tampil dan terbaca Google.
Hasilnya
Lihat sendiri karyanya.
Studi kasus terbaik adalah produknya. Buka galeri portofolio hsn.Studio, atau ceritakan acara Anda kepada kami.
Product
