UI/UX Case Study: Meningkatkan User Experience Ketika Mencari Produk Lewat Katalog di Matahari App
Overview
Matahari Department Store adalah perusahaan ritel terbesar di Indonesia yang memiliki 139 gerai yang tersebar di 77 kota di Indonesia, dengan mempekerjakan sekitar 400.000 pegawai. Pada tahun 2020 total transaksi online mereka hanya membukukan 2% dari total transaksi mereka, sedangkan pada 2021 masih dibawah 10%.
Salah satu kendala yang mengganjal adalah performa aplikasi Matahari yang belum bisa maksimal, dengan beberapa user mengeluhkan jika aplikasi sering eror dan kesulitan kala mencari product, disamping minimnya diskon serta pengiriman paket yang terlalu lama. Saya sendiri menggunakan aplikasi tersebut menemukan kala mendapatkan barang yang diinginkan, tapi ternyata tidak bisa dimasukkan ke keranjang karna stock kosong. Untuk itu perlu dilakukan perbaikan untuk meningkatkan user experince ketika mengakses aplikasi Matahari.
Role: UI/UX Designer
Timeline: 7 weeks
Tools: Figma, Google forms, Google meet
The Process
Pada studi kasus ini saya menggunakan framework design thinking untuk menghasilkan solusi yang tepat dan sesuai dengan kebutuhan user.
Langkah 1. Emphatize
Pada tahap ini saya melakukan perencanaan untuk mengambil data dari user untuk mendapatkan insight soal kebutuhan dan pain point mereka ketika menggunakan aplikasi Matahari.
Research Plan
A. Objective
- Mencari tahu kebiasaan user kala mencari dan berbelanja produk melalui aplikasi
- Menemukan pain point yang user hadapi kala mencari produk di Matahari app
- Mencari tahu kebutuhan user dalam mengakses fitur pembelian pada aplikasi Matahari
B. Methodology
Saya melakukan in-depth interview yang dibarengi dengan usability testing pada aplikasi Matahari yang ada saat ini untuk mendapatkan informasi dan impresi mereka saat menggunakan aplikasi ini.
C. User Segment
- 3 orang user yang 6 bulan terakhir pernah transaksi di Matahari App dan 2 non-user
- Familiar dalam berbelanja secara online, baik itu di Matahari app atau aplikasi sejenis
- Lebih cenderung menyukai berbelanja secara online
D. Key Information Area
Key information area berguna menjadi panduan dalam menyusun daftar pertanyaan yang selaras untuk mendapatkan hasil yang sesuai dengan objective yang ingin dituju. Adapun key information area pada riset ini adalah:
- User profile
- Kebiasaan dalam berbelanja online
- Pain points saat berbelanja lewat Matahari apps
Langkah 2. Define
A. Affinity Diagram
Apa yang didapat dari hasil riset lalu dilakukan analisis guna mengelompokkan dan menemukan pola pikir user.
B. User Persona
C. User Journey Map
D. Actionable Plans
Berdasarkan hasil riset ada beberapa opportunity yang bisa meningkatkan user experience dalam penggunaan aplikasi Matahari. Hasil tersebut kemudian dikelompokkan berdasarkan impact-effort untuk memilih mana saja yang perlu dan bisa segera diimplementasikan. Hasil yang ada di bagn high user value dan low effort lah yang nantinya akan segera untuk diimplementasikan, sementara yang lainnya perlu dipertimbangkan lebih lanjut.
Langkah 3. Ideate
A. User Flow
B. Information Architecture
C. Wireframe
Sebelum membuat mock-up, terlebih dahulu dibuat wireframe untuk me-map-out elemen-elemen yang nantinya akan diimplementasikan lewat design mock-up.
D. Design System
Design system berguna untuk membantu mengatur/mengorganisasi komponen-komponen yang digunakan pada design.
E. Mock-up
- Homepage
Berdasarkan hasil riset, kebiasaan user dalam mengakses aplikasi jual beli khususnya jual beli pakaian dan aksesoris seperti aplikasi Matahari ini adalah mereka mengakses ketika sedang gabut atau senggang. Untuk itu perlu dilakukan penyesuaian pada homepage guna manarik perhatian tipe user yang seperti ini.
Pada design yang saya buat ini, tiap menu kategori yang ada akan memiliki sub-menu sesuai dengan kategori yang ada. Sub-menu yang ada di atas ini juga memudahkan user kala ingin melihat sebenarnya pada page ini terdapat penawaran apa saja, sehingga mereka tidak perlu repot me-scroll lebih dahulu tapi cukup lewat interaksi sub-menu ini.
2. Hasil Pencarian
Pada bagian hasil pencarian ini saya menyederhanakan tampilan dari aplikasi yang ada dengan menghilangkan tombol beli pada halaman ini. Hal ini karena user dalam mengambil keputusan untuk membeli sebuah produk pada dasarnya perlu melihat detail produk terlebih dahulu.
Untuk itulah agar lebih membantu user dalam melakukan pemilihan barang mana saja yang akan mereka perhatikan lebih jauh, pada page ini user memungkinkan untuk memilih warna produk. Jadi ketika user melakukan interaksi dengan menekan warna pada card produk, gambar produk akan berubah menyesuaikan warna yang user klik sehingga mereka bisa mendapatkan gambaran.
3. Detail product
Detail produk saya ubah menjadi seperti ini agar tidak memiliki tampilan yang kaku. Pun demikian saya juga memperbaiki hierarki sehingga tidak ada pengulangan dalam hal menjelaskan detail/deskripsi produk.
Selain itu saya juga mengganti button “Belanja Sekarang” dengan 2 button “Keranjang” dan “Beli”. Hal ini karena ketika dihadapkan pada action “Belanja Sekarang” seolah-olah meminta user untuk segera menyelesaikan transaksinya, padahal kebiasaan user kebanyakan akan memasukkan ke keranjang terlebih dahulu sebelum memutuskan check-out kala butuh atau mendapatkan promo menarik.
4. Brand Page
Pada halaman ini saya tidak terlalu banyak melakukan perubahan, hanya menambahkan tab cari brand. Hal ini dikarenakan dari hasil riset, user merasa kesulitan dan overwhelm kala ingin mencari brand apa saja yang tersedia di Matahari karena harus menscroll jauh ke bawah. Dengan menambahkan tab cari brand berdasarkan urutan abjad ini, user akan lebih mudah melihat brand apa saja yang tersedia.
5. Saring hasil pencarian
Salah satu hal yang menjadi sorotan user yang didapat dari hasil riset adalah pada aplikasi yang ada saat ini, mereka kesulitan dalam melakukan penyaringan karena merepotkan. Dalam design yang saya buat ini saya ingin mempermudah user kala mencari brand yang diinginkan, dengan cara langsung mengetik nama brand atau melihat dari daftar alphabet.
Begitu pula ketika memilih warna. Jika sebelumnya user tidak bisa mengetahui sebenarnya nama warna “blush” itu seperti apa, lewat design yang saya buat ini user akan tahu jenis warna yang ada. Pun ketika mereka hanya ingin mencari produk berwarna biru, ketika user mengetikkan kata “blue” atau “biru” maka hasil yang keluar adalah tipe-tipe warna biru.
6. Check-out
Ketika melakukan check-out user akan mendapatkan informasi yang kurang jelas mengenai pengiriman, karena informasi yang ada justru memuat semua waktu pengiriman (Jabodetabek, Jawa & Bali, Luar Jawa) sehingga ada user experience yang buruk ketika barang lama sampai. Di sini saya memberikan informasi yang memungkinkan user bisa mengantisipasi kira-kira barang yang ia pesan kapan akan sampai.
Langkah 4. Prototype
Prototype berguna untuk melakukan pengetesan dimana user akan merasakan pengalaman layaknya membuka sebuah aplikasi. Prototype saya sesuaikan dengan berbagai tugas yang ingin saya tes pada user. Berikut adalah link prototype aplikasi Matahari yang telah saya buat:
Langkah 5. Testing
Setelah melakukan design dan membuat prototype, perlu dilakukan usability testing untuk mengkonfirmasi apakah design baru yang telah saya buat ini sudah mampu memberikan apa yang mereka butuhkan.
Untuk menguji apakah user mampu mengakses aplikasi dengan baik, maka usability testing ini memiliki beberapa task yang menyesuaikan hal apa yang perlu dilakukan oleh user. Adapun task-task yang saya minta untuk dilakukan user pada usability testing ini adalah:
- Melihat tampilan dan navigasi di homepage, kemudian memilih banner promo Sale-bration/flash sale. Nantinya akan memilih produk pertama dengan ukuran L dan warna Olive.
- Mengecek brand-brand apa saja yang tersedia, kemudian melihat barang apa saja yang dijual oleh brand “Nevada”
- User diminta untuk mencari kemeja pria bermerk Nevada dan memiliki warna Biru
- User diminta untuk melihat promo yang tersedia dan menerapkan promo tersebut untuk melakukan check-out barang yang ada di keranjang
Pada hasil usability testing design baru ini menunjukkan hasil maksimal di mana user tanpa kesulitan berarti mampu menyelesaikan serangkaian task yang diinginkan.
Summary Insight
- Aplikasi secara flow sudah cukup baik dan memberikan kepercayaan pada user jika mereka mampu menyelesaikan apa yang mereka inginkan dengan mudah
- Perlu diperhatikan lagi tata letak dan ukuran masing-masing elemen di beberapa page agar lebih konsisten lagi dan/atau tidak boros tempat
- Transisi pada prototype lebih diperhatikan lagi agar step yang dilalui user bisa lebih efisien lagi
Jika ingin melihat hasil analisis lengkap pada usability testing design baru, bisa lihat di link berikut ini: Usability Testing Matahari App
Lesson Learned
Studi kasus kedua yang saya jalani selama mengikuti program Bootcamp UI/UX dari dibimbing.id ini tetap panjang dan melelahkan, serta perlu banyak hal dipelajari dan dipahami terlebih soal tampilan design yang masih belum sepenuhnya yakin. Kali ini juga ada kendala yang dihadapi kala waktunya sangat mepet dengan puasa dan juga lebaran, sehingga cukup kesulitan untuk mengatur waktu diri sendiri dan juga ketika melakukan penjadwalan dalam pengambilan data.
Ya semoga semakin lama saya akan semakin terbiasa dalam menghadapi berbagai kendala, karena seperti banyak orang bilang hal yang paling penting di awal itu bukanlah hasil sempurna tapi yang terpenting adalah memulai.
