/ Desain produk
TokoClippers
TokoClippers mempertemukan creator yang punya konten panjang dengan clipper yang memotongnya jadi klip pendek. Dua sisi itu memakai aplikasi yang sama tapi menginginkan hal yang berlawanan, dan uang berpindah di antara keduanya. Saya merancang keduanya, web dan mobile, di atas design system yang dibangun bersamaan.
- Industri
- Creator economy, platform clipping
- Peran
- Product Designer
- Lama project
- Belum tercatat
- Klien
- TokoClippers
Masalahnya
Marketplace dua sisi selalu punya masalah yang sama: satu produk, dua orang yang menginginkan hal berlawanan. Creator ingin klipnya banyak, cepat, dan sesuai brief. Clipper ingin project yang jelas bayarannya dan tidak membuang waktu. Kalau salah satu sisi dibuat nyaman dengan mengorbankan yang lain, sisi itu yang pergi.
Batasannya
- Uang berpindah di dalam produk, jadi dompet, penarikan saldo, dan riwayat transaksi harus benar sejak versi pertama.
- Dua platform sekaligus, web dan mobile, dengan komponen yang sama.
Pengerjaannya
Satu produk, dua beranda
Clipper dan creator masuk ke aplikasi yang sama lewat pintu yang berbeda. Beranda clipper menaruh project yang bisa diambil di paling atas. Beranda creator menaruh performa project yang sedang berjalan. Navigasi dan komponennya sama, isinya yang berganti sesuai siapa yang masuk.
Alur yang menyentuh uang
Bagian yang paling tidak boleh membingungkan: membuat project bertahap dengan anggaran dan target per klip, mengajukan lamaran dan menyetujuinya, lalu topup, penarikan saldo, dan riwayat transaksi. Tiap alur punya keadaan gagal, tertunda, dan berhasil yang digambar terpisah, karena di situ orang paling butuh kepastian.
- Buat Project Baru tiga langkah, termasuk varian eksklusif dengan banner NDA.
- Penarikan saldo dengan keadaan gagal, tertunda, dan berhasil.
- Autentikasi dua faktor, ganti password, dan verifikasi rekening.
Dukungan yang tidak dilempar ke email
Tiket CS punya portalnya sendiri untuk kedua sisi, lengkap dengan daftar, detail, dan gelembung chat, ditambah chatbot yang dipanggil dari tombol mengambang. Ini biasanya bagian yang ditunda sampai versi kedua, dan biasanya itu keputusan yang disesali.
Design system di bawahnya
Fundamentals, Button, Inputfield, Alert, Breadcrumb, Avatar Label, dan Progress bar label masing-masing punya halaman sendiri di file yang sama. Dibangun bersamaan dengan produknya, bukan dirapikan setelahnya, supaya web dan mobile tidak berjalan sendiri-sendiri.
Isi projectnya
06 halaman
01
Beranda sisi clipper, project yang bisa diambil di paling atas
02
Beranda sisi creator, performa project yang sedang berjalan
03
Ringkasan project yang dilihat clipper sebelum melamar
04
Buat project baru, langkah ketiga dengan anggaran dan target per klip
05
Penarikan saldo berhasil. Keadaan gagal dan tertunda digambar terpisah.
06
Detail tiket CS, dengan gelembung chat di dalamnya
