1. Project Brief

Aplikasi ERHA Buddy adalah aplikasi resmi dari ERHA yang saat ini berfungsi sebagai platform untuk membeli produk perawatan kulit dan rambut, serta melakukan appointment konsultasi di klinik ERHA. Namun, berdasarkan observasi dan pengalaman pengguna, aplikasi ini masih memiliki sejumlah keterbatasan dari sisi tampilan visual, navigasi, serta pengalaman pengguna (UX) secara keseluruhan.

Melalui case study ini, saya mencoba melakukan improvement terhadap beberapa fitur dan flow utama agar aplikasi tidak hanya menjadi alat fungsional saat dibutuhkan, tetapi juga menjadi platform yang mendorong eksplorasi, retensi, dan konversi penjualan yang lebih tinggi.

2. About ERHA

3. Defining the Goals

User Goals:

• Mudah dalam menemukan produk yang sesuai dengan kebutuhan kulit/rambut.

• Proses appointment yang cepat, jelas, dan praktis.

• Riwayat konsultasi dan transaksi yang mudah diakses dalam satu tempat.

• Tampilan aplikasi yang modern, menarik, dan mudah dinavigasi.

• Merasa terkoneksi dengan layanan ERHA baik online maupun offline.

Business Goals

• Meningkatkan penjualan produk dan treatment melalui aplikasi.

• Mendorong penggunaan aplikasi tidak hanya ketika butuh (misal: konsultasi), tetapi juga untuk eksplorasi dan engagement jangka panjang.

• Meningkatkan efisiensi proses appointment dan transaksi di klinik.

• Memperkuat ekosistem digital ERHA sebagai beauty & medical commerce.

4. Project Stages

A. Learn & Analyse

1. Studi kompetitor & benchmarking

Melakukan analisis terhadap aplikasi sejenis di industri yang sama (seperti ZAP Clinic, Klinik NMW, Alodokter, Halodoc) untuk mengetahui fitur yang umum digunakan, kelebihan, dan kekurangannya. ASDAS

2. Benchmarking Visual dan UX

Mengumpulkan referensi visual dan alur UX dari e-commerce populer (Shopee, Tokopedia, Sociolla, dsb) untuk memahami bagaimana mereka menyusun informasi, navigasi, dan struktur UI agar mudah digunakan.

3. Analisis Aplikasi Saat Ini

Menelaah struktur navigasi, tampilan UI, information architecture dan alur pengguna di aplikasi ERHA Buddy versi lama. Juga mencermati ulasan pengguna di Play Store/App Store sebagai sumber feedback langsung.

B. Define

1. User Persona

Membuat representasi semi-fiktif pengguna berdasarkan riset, untuk memahami motivasi, tujuan, dan hambatan mereka saat menggunakan aplikasi

2. Problem Statement

Merumuskan masalah-masalah utama pengguna dan bagaimana hal itu berpengaruh pada bisnis. Contoh: “Pengguna merasa sulit mencari produk berdasarkan masalah kulit tertentu.

3. UX Goals

Menyusun tujuan desain berdasarkan kombinasi kebutuhan pengguna dan tujuan bisnis. Yaitu:
1. mempermudah proses appointment
2. meningkatkan visibilitas klinik terdekat
3. mempercepat pembelian ulang produk.

C. Ideate & Design

1. Sketch & Wireframe

Membuat sketsa kasar dari solusi UI/UX, baik di kertas maupun digital, untuk mengeksplorasi layout dan struktur halaman.

2. High-Fidelity Design

Mendesain antarmuka dengan elemen visual lengkap dan interaktif. Mengedepankan estetika, branding, dan keterbacaan informasi.

3. Design System

Membangun komponen UI reusable (button, card, input, dll) untuk menjaga konsistensi dan efisiensi desain.

D. Validate & Refine

1. User Feedback (Kualitatif)

Karena keterbatasan waktu dan akses, saya menunjukkan desain kepada kakak saya yang merupakan UX and tech enthusiast with 10+ years of experience leading digital ventures untuk melihat dan meminta feedback mengenai improvement ini

2. Iterasi

Berdasarkan masukan, dilakukan penyempurnaan desain untuk memperbaiki bagian-bagian yang masih kurang intuitif atau terlalu padat.

5. User Persona

6. Improvement

Konsep utama dari improvement aplikasi ERHA Buddy ini adalah 
mempertegas positioning aplikasi ini sebagai lebih dari sekadar platform klinik, tapi juga sebagai e-commerce beauty & wellness yang aktif mendorong engagement dan repeat visit.

A. Homepage

Existing

Redesign:

Header

Mengikuti pola umum yang digunakan dalam aplikasi e-commerce modern. Tujuannya untuk menghadirkan antarmuka yang lebih familiar, intuitif, dan efisien digunakan oleh pengguna.

Untuk logo, tulisan ERHA Buddy tidak perlu ikut ditampilkan karena akan terlihat kecil sehingga visibilitasnya kurang

3 Kotak

Desain ini mengikuti prinsip 10 Heuristic yang mana Fitur yang sering digunakan harus mudah ditemukan dan diakses langsung dari homepage.

• Points & Voucher adalah dua elemen yang secara langsung berkaitan dengan insentif pengguna dan keputusan belanja. Dengan menampilkan keduanya secara eksplisit, pengguna terdorong untuk lebih aware terhadap benefit yang bisa mereka gunakan, meningkatkan conversion rate dan repeat usage.


• QR Saya ditambahkan untuk menjawab kebutuhan di channel offline. Saat pengguna melakukan transaksi di klinik, mereka cukup menunjukkan QR dari aplikasi ini untuk scan sebagai member, sehingga:
  Tidak perlu menyebutkan nomor/akun manual dam Proses lebih cepat dan seamless

Flash Sale Section

Menambahkan section Flash Sale tepat di bawah bagian menu utama untuk menghadirkan visual dan psikologis yang umum digunakan pada platform e-commerce modern.

Alasan:

• Mendorong Urgensi Pembelian
  Flash Sale secara psikologis menciptakan rasa keterbatasan (scarcity) dan waktu terbatas (urgency)

• Memperkuat Persepsi “ERHA Buddy sebagai E-Commerce”
  Ini sejalan dengan tujuan besar: menjadikan aplikasi ini relevan untuk dikunjungi tidak hanya ketika butuh, tapi juga saat ingin eksplorasi penawaran menarik

Maka dari itu harapannya adalah:

• Meningkatkan frekuensi buka aplikasi

• Meningkatkan klik-tayang (CTR)

• Mengonversi pengunjung pasif menjadi pembeli aktif

Section Belanja Berdasarkan Kategori

Masalah pada desain sebelumnya:

• Navigasi ke produk memerlukan banyak langkah
(tap menu → scroll banner → pahami isi banner → klik)

• Banner besar menempati ruang vertikal berlebihan tanpa
informasi teks yang memadai.

• Urutan brand tidak dapat diprediksi, pengguna harus scroll satu per satu.

Solusi & Alasan Desain Baru:

• Membantu pengguna langsung menuju brand yang sesuai kebutuhan kulit atau masalah spesifik.

• Menggunakan logo Brand dalam grid horizontal swipeable
Ini membuat banyak opsi terlihat dalam satu pandangan

• Positioning brand berdasarkan data penjualan pada e-commerce seperti Shopee, Tokopedia, dan TikTok Shop. Brand yang penjualan paling banyak berada dibagian atas. Dengan menempatkan position secara konsisten akan meningkatkan muscle memory pengguna.



B. Check History and Buy Prescription

1. Existing:

Terlalu Banyak Titik Akses Menyulitkan Navigasi
Dalam versi aplikasi sebelumnya, pengguna harus berpindah-pindah ke tiga menu berbeda hanya untuk mencari satu riwayat yang berkaitan. Misalnya:
- Ingin cek hasil konsultasi → buka Medical History
- Ingin tahu habis berapa → pindah ke Transaction History
- Ingin tahu jadwal selanjutnya → buka My Activity

Medical: Catatan dokter, produk, dan resep
Transaction: Biaya yang dikeluarkan dari sesi itu (konsultasi & pembelian langsung)
Activity: Tindak lanjut yang direncanakan (treatment & konsultasi berikutnya)

2. Information Architecture

3. Flow Check History & Buy Prescription

4. Improvement

Note: Ini semua perlu dikaji ulang lebih dalam dan diskusi bersama pihak terkait seperti developer apakah memungkinkan atau tidak. Dan saya sampai saat ini juga penasaran kenapa untuk melihat aktivitas/riwayat harus dibedakan menjadi 3 menu dengan isi yang berbeda-beda

Konsep yang saya bawa disini adalah menggabungkan data Medical History, Transaction History, dan My Activity. Karena itu merupakan rangkaian yang tidak dapat terpisahkan. Lalu dalam ingin memulai proses desain, muncul tantangan:

1. Bagimana caranya detail riwayat appointment tidak terasa padat dan tetap nyaman dibaca meskipun isinya kompleks dan panjang?

Solusi: Menggunakan Sistem Modular Card-Based Layout


Daripada menampilkan semua informasi dalam satu halaman panjang, akan lebih baik jika beberapa card terpisah berdasarkan kategori.
Setiap card:
- Punya heading yang jelas (misal: “Hasil Konsultasi”, “Rincian Transaksi”)
- Bisa collapsible (bisa buka/tutup untuk mengurangi visual fatigue)
- Meminimkan visual supaya tidak terlalu ramai. Lalu muncul pertanyaan:

Oke konsep sudah didapat. Lalu muncul tantangan:

2. Bagaimana cara mengelola banyak CTA di satu layar agar tidak membingungkan user dan tetap mendukung konversi. Karena terdapat 3 CTA (Jadwalkan Konsultasi, Lihat Treatment, dan Beli Resep) dalam 1 halaman ini yang mana berpengaruh juga terhadap business goals yang mana ingin meningkatkan sales

Terlalu banyak CTA membuat pengguna bingung harus melakukan apa dulu
Tapi kalau hanya tampilkan satu CTA, bisa mengubur peluang lain (misalnya user tertarik treatment, bukan konsultasi)

Solusi: Memisahkan CTA Berdasarkan Kategori Tindakan dan Urgensinya:

• Utama (Primary CTA):
  Yang paling penting untuk saat ini.
Contoh: “Jadwalkan Konsultasi ”

• Sekunder (Secondary CTA):

  Yang tetap penting tapi tidak mendesak. “Lihat Treatment”

• Tersier (Link):
  Yang nice-to-have. Contoh “Beli Resep”

Hasil

C. Appointment Consultation

Existing:

Redesign: