Logo Muhammad Luthfi
Muhammad Luthfi AgustianSystem Analyst & Software Engineer
UI/UX & Mobile#05 of 9

Satwagia Mobile App Redesign

Redesign menyeluruh mobile app Satwagia: reservasi klinik, riwayat medis peliharaan, dan integrasi PetPay dengan Figma Auto-Layout.

Klien / ProyekPT Satwa Bahagia Indonesia (Satwagia)
Tahun Pengerjaan2023 - 2024
Peran / LayananLead UI/UX Designer & Product Analyst
Status RilisDesign Concept
Teknologi & Tools:Figma Auto-Layout & Design SystemInteractive PrototypingUser Journey MappingWireframing & Information Architecture
Satwagia Mobile App Redesign

Ringkasan Eksekutif & Ruang Lingkup

Redesign komprehensif mobile application PT Satwa Bahagia Indonesia untuk menciptakan pengalaman pemilik hewan peliharaan (pet owner) yang modern, intuitif, dan ergonomis. Menggunakan metodologi Figma Auto-Layout berstandar industri dengan komponen varian dinamis untuk alur reservasi klinik dokter hewan, rekam medis peliharaan, serta pemantauan status rawat inap secara real-time.

01 / The Challenge

Antarmuka Lama yang Kaku & Tingginya Drop-off Booking

Aplikasi sebelumnya memiliki hirarki informasi yang membingungkan; pemilik hewan kesulitan menemukan jadwal dokter dan memilih layanan klinik yang sesuai, menyebabkan tingginya angka pembatalan sebelum proses booking selesai.

  • Proses reservasi membutuhkan terlalu banyak langkah dan form yang tidak perlu.
  • Informasi rekam medis peliharaan tersaji kurang terstruktur dan sulit dibaca di layar ponsel.
  • Komponen antarmuka tidak konsisten di berbagai ukuran layar smartphone.
02 / The Solution

Figma Design System Modern & Navigasi Satu Tangan

Membangun design system modular berbasis Auto-Layout, menyederhanakan alur reservasi menjadi 3 tahapan intuitif, serta menyajikan dashboard kesehatan hewan yang informatif.

  • Clean Bottom Navigation: Akses cepat ke Beranda, Reservasi, Riwayat Medis, dan Akun.
  • Streamlined Booking Wizard: Pemilihan hewan peliharaan, dokter, cabang klinik, dan jadwal dalam satu alur mulus.
  • Pet Health Passport: Ringkasan riwayat vaksinasi, bobot badan, dan catatan dokter yang mudah dibaca.
04 / System & User Flow

Alur Booking Layanan Kesehatan Hewan

Alur terstruktur yang menghubungkan proses dari input awal pengguna hingga rekonsiliasi akhir.

01

Pilih Hewan Peliharaan

Owner memilih profil kucing/anjing yang terdaftar atau menambahkan data hewan baru.

02

Pilih Cabang & Dokter

Sistem menampilkan dokter hewan yang berpraktik pada outlet klinik terdekat.

03

Pilih Tanggal & Jam

Kalender interaktif menampilkan slot antrean yang masih tersedia secara real-time.

04

Konfirmasi & E-Tiket

Booking terkonfirmasi, e-tiket reservasi tersimpan dan tersinkronisasi ke sistem antrean klinik.

Fitur Utama yang Ditonjolkan

Figma Design System

Komponen reusable, token warna, tipografi berstandar iOS dan Android modern.

Pet Health Passport

Digitalisasi kartu vaksin, histori pemeriksaan, dan reminder jadwal kunjungan berikutnya.

PetPay Wallet Card

Informasi saldo e-wallet dan kemudahan top-up langsung dari beranda aplikasi.

Visual Showcase Gallery

Tangkapan Layar & Antarmuka Sistem

Screenshot resolusi tinggi yang merepresentasikan alur kerja dan antarmuka sesungguhnya.

Overview Mobile App Satwagia

Overview Mobile App Satwagia

Tampilan antarmuka mobile modern yang dirancang untuk kenyamanan pengguna pet owner.

Dampak Nyata & Hasil Implementasi

Business Impact & Deliverables

Konsep desain dipublikasikan di Dribbble dan mendapatkan apresiasi komunitas desain global serta menjadi acuan pengembangan mobile app Satwagia.

Langkah pemesanan dipangkas dari 7 layar menjadi 3 langkah cepat
100% komponen berbasis Auto-Layout untuk kemudahan hand-off ke mobile developer