Skip to content
H-Studio
Mulai Proyek
Refresh brand dan redesign website responsif WunderDerm

WunderDerm — Refresh Brand dan Platform Layanan

Transformasi digital untuk beauty studio yang sudah established di Jerman: art direction yang lebih kuat, pencarian layanan yang lebih mudah, serta fondasi Next.js + Sanity yang maintainable.

Klien

WunderDerm

Market

Augsburg · Jerman

Delivery

Brand · UX/UI · Next.js · Sanity · Migrasi SEO

Redesign homepage WunderDerm untuk desktop dan mobile

Memperbarui pengalaman tanpa menghapus karakter brand

WunderDerm sudah memiliki nama yang dikenal dan identitas yang kuat. Kami mempertahankan ekuitas itu, lalu menggeser presentasi beauty-laboratory yang lama menuju positioning “Laser + Hautkonzepte” yang lebih jelas.

Struktur WordPress yang tumbuh per halaman membuat layanan, harga, teknologi, dan booking terpisah-pisah. Pengalaman baru disusun berdasarkan pertanyaan nyata customer: area mana, layanan apa, berapa harganya, dan apa langkah berikutnya.

Sistem brand WunderDerm yang diperbarui

Bahasa visual yang fleksibel untuk katalog layanan lengkap

Wordmark ekspresif tetap menjadi pusat identitas. Deep blue memberi rasa percaya diri, sementara brown hangat, pink terang, dan off-white memberi variasi untuk halaman editorial, card, dan momen conversion.

  • Sistem logo dan positioning line yang diperbarui
  • Aturan warna, tipografi, spacing, dan komponen yang reusable
  • Arah fotografi yang hangat dan dinamis
  • Desktop dan mobile dirancang sebagai satu sistem
Modul layanan dan teknologi WunderDerm yang responsif

Kompleksitas layanan diubah menjadi product flow yang mudah dipahami

Area treatment, paket, pricing, penjelasan kontekstual, dan aksi booking sekarang terhubung sebagai satu journey — bukan kumpulan landing page yang berdiri sendiri.

Arsitektur area treatment yang responsif

Discovery area treatment yang interaktif

Body map responsif membantu visitor memilih tampilan, area tubuh, dan informasi layanan yang relevan tanpa harus membaca price list panjang yang datar.

State selector area tubuh yang interaktif

Alur orientasi singkat dengan batas yang jelas

WunderQuiz menyusun preferensi dan mengarahkan visitor ke informasi yang relevan. Fungsinya adalah orientasi, bukan diagnosis atau pengganti konsultasi profesional.

Alur orientasi WunderQuiz

Story microneedling yang editorial di dalam design system yang sama

Microneedling memerlukan ritme berbeda dari layanan laser: visual produk, penjelasan bertahap, proses, serta informasi persiapan dan aftercare. Navigasi, tipografi, dan pola conversion tetap konsisten.

Layout lengkap microneedling untuk desktop dan mobile

Layout lengkap dan page capture yang detail

Komposisi desktop dan mobile dibuat secara paralel. Screen pilihan memperlihatkan transisi dari offer di hero menuju edukasi, proses, dan fotografi tanpa terasa seperti microsite terpisah.

Hero halaman microneedling dengan visual produk
Modul editorial untuk penjelasan microneedlingLayout proses microneedling tiga tahap
Bagian editorial microneedling dengan fotografi portrait

Fondasi platform yang maintainable di balik relaunch visual

Website dibangun ulang sebagai aplikasi Next.js dengan TypeScript, sementara Sanity memberi kontrol editorial yang terstruktur. Arsitektur ini mendukung halaman layanan, artikel, FAQ, section reusable, dan pengembangan berikutnya.

Ownership konten melalui CMS terstruktur
Sistem komponen responsif
Metadata, structured data, dan redirect untuk migrasi
Automated checks untuk delivery lanjutan yang lebih aman

Hasil

WunderDerm sekarang memiliki satu sistem digital untuk identitas, pencarian layanan, pricing, orientasi, booking, dan operasi konten. Brand terasa lebih modern tanpa kehilangan pengenalan dari customer lama.

Case ini mendokumentasikan pekerjaan brand, interface, dan software. Konten tidak dimaksudkan sebagai klaim efektivitas klinis atau hasil treatment individual.

Tampilan lain dari sistem

Paket layanan dan pricing yang responsifModul lokasi dan booking yang responsifHalaman area treatment untuk priaNavigasi mobile WunderDermBanner booking mobile WunderDerm
Studi kasus terkait

Studi Kasus

  1. My Office AsiaCase · 001
    Next.js 16 · React 19

    My Office Asia

    Platform katalog dan admin editorial untuk advisory flexible workspace di Hong Kong — dengan halaman lokasi terstruktur, alur inquiry, CMS admin, model konten SEO-ready, dan arsitektur siap-ekspansi untuk pasar APAC.

    Lihat studi kasus
  2. Forschungsmittel.comCase · 002
    Next.js · TypeScript

    Forschungsmittel.com

    Website B2B dan layer produk untuk bisnis advisory pendanaan: halaman publik, lead capture, dashboard klien, alur dokumen, workspace tim, dan operasi internal.

    Lihat studi kasus
  3. Creator Marketing PlatformCase · 003
    Next.js · React

    Creator Marketing Platform

    Engineering end-to-end untuk platform creator marketing multi-role: backend, dashboard, console admin, katalog provider, role user, dan alur kerja terstruktur untuk beberapa tipe layanan.

    Lihat studi kasus
  4. Vulken FMCase · 004
    React Native · Next.js

    Vulken FM

    Platform mobile dan web untuk inspeksi, record aset, pemeriksaan compliance, reporting, dan alur kerja operasional internal.

    Lihat studi kasus
  5. AERACase · 005
    Brand Strategy · UX/UI Design

    AERA

    Website produksi yang menghubungkan identitas ekspresif, halaman kapabilitas responsif, arsip project terstruktur, storytelling tim, dan alur kontak siap-lead.

    Lihat studi kasus
  6. VillaStackCase · 006
    React · TypeScript

    VillaStack

    Reference arsitektur untuk portofolio multi-villa: alur booking, logika pricing, komunikasi tamu, reporting owner, tampilan payout, dan titik integrasi untuk workflow OTA / channel-manager.

    Lihat studi kasus
  7. Platform Real Estate Mewah UAECase · 007
    React · TypeScript

    Platform Real Estate Mewah UAE

    Reference build untuk portofolio property bernilai tinggi: listing terstruktur, operasi tenant, reporting finansial, analytics market, dan dashboard untuk investor.

    Lihat studi kasus
  8. FORMA Architecture StudioCase · 008
    Next.js · TypeScript

    FORMA Architecture Studio

    Portofolio terstruktur dan platform editorial untuk studio arsitektur internasional, dengan halaman proyek, arsitektur konten, struktur SEO, dan presentasi brand premium.

    Lihat studi kasus