UI/UX Case Study — GrabFood
Redesign UI Food Delivery App
GrabFood adalah sebuah layanan pesan antar makanan berbasis aplikasi mobile yang lumayan sering saya gunakan. Saya memilih untuk melakukan redesign pada aplikasi ini karena berdasarkan pengalaman saya sebagai user, aplikasi ini butuh diperbaiki di beberapa sisi user experience-nya. Dan itu mungkin hal yang sama yang dirasakan oleh user-user yang lain. Jadi disini saya mencoba untuk membuat ulang design dari sisi UI maupun UX-nya.
Proses-proses yang dilewati saat membuat redesign sebuah aplikasi.
1. Membuat Case Study
Pertama yaitu kita membuat sebuah study kasus untuk menemukan kekurangan dan apa yang perlu diperbaiki dari aplikasi ini.
- User Personas
Langkah pertama yang saya lakukan ialah melakukan riset melalui interview secara langsung kepada pengguna GrabFood, dengan menggunakan data di bawah ini akan memudahkan dalam mendesain user experience pada aplikasi yang akan kita buat.
Hasil Research
- Anak Kost
Aplikasi semacam ini sangat membantu karena memudahkan dalam melakukan pemesanan makanan yang kita mau, dengan hanya menuggu lalu pesanan datang. Sangat berguna bagi anak kost yang tidak bisa memasak dan malas untuk keluar mencari makan.
“Namun jika saya telah memilih-milih makanan di aplikasi saat saya tidak bisa membeli makanan tersebut saat itu juga, saya tidak bisa menyimpannya di keranjang terlebih dahulu, makanan yang sudah saya pilih sebelumnya langsung hilang ketika saya kembali ke homescreen.”
- Pekerja Kantor
Saat jam makan siang para karyawan di kantor saya memilih untuk memesan makanan melalui aplikasi ini agar dapat memanfaatkan waktu se-efektif mungkin, karena butuh banyak waktu dan tenaga jika harus mencari makan diluar dengan keterbatasan waktu yang ada.
Namun saya kesulitan untuk melihat voucher mana yang sedang aktif, karena ketika akan menggunakan voucher promo tersebut kita harus memasukkan manual kode promo yang ada, baru voucher tersebut mucul.
- Traveller
Untuk orang yang suka mengunjungi suatu tempat dan seringkali berpindah dari suatu tempat ke tempat lain, pastinya akan butuh tenaga dan waktu ekstra untuk mencari tempat makan di tempat yang baru atau di suatu daerah yang belum pernah kita kunjungi.
“Dengan menggunakan aplikasi ini saya bisa dengan mudah memesan makanan tanpa harus mencari-cari tempat makan, namun jika saya ingin memesan makanan yang paling murah atau mahal, saya kesulitan dalam memilih karena tidak ada filter kategori dari segi harga atau yang lainnya.”
- Ibu Rumah Tangga
Bagi ibu rumah tangga yang bekerja atau tidak memiliki banyak waktu untuk memasak dan ibu-ibu yang sering mengadakan acara dirumahnya, melewati aplikasi ini bisa dengan mudah untuk menghadirkan makanan dirumahnya.
“Namun saya mengalami sedikit kesulitan dalam menambahkan detail pesanan saya di setiap masing-masing menu makanan yang saya pilih, karena di setiap menu makanan tidak disediakan menu note/catatan yang bisa kita isi jika kita menginginkan penambahan keterangan.”
Problem
Permasalahan yang dapat saya ambil dari hasil research sebelumnya ialah :
- User kesulitan mencari makanan mana yang paling murah atau mahal, produk mana yang terlaris karena tidak adanya pencarian berdasarkan kategori.
- User kesulitan untuk menulis catatan/keterangan tertentu di masing-masing menu makanan yang dipilih.
- User mengalami kesulitan saat tidak bisa menyimpan pilihan menu makanan yang sudah dipilih pada keranjang belanja.
- Pemakaian voucher yang kurang efektif (kode voucher yang terletak pada banner promo harus diketik secara manual pada halaman promo agar bisa disalin)
Goals
Redesign aplikasi Grab dengan menambahkan fitur :
- Fitur filter berdasarkan kategori, untuk memilih menu-menu berdasarkan kategori dari segi harga, jenis makanan, jarak, produk terlaris, dll.
- Penambahan note/catatan di setiap menu-menu makanan yang ditawarkan, agar user bisa menulis request tertentu di masing-masing makanan yang dipilih.
- Penambahan fungsi fitur keranjang untuk menyimpan menu-menu makanan yang sudah dipilih oleh user.
- Penambahan info promo/voucher yang mudah disalin untuk digunakan dengan mengelompokkan voucher-voucher promo yang aktif pada tab khusus pada halaman promo.
2. Membuat User Flow
Setelah itu kita buat alur pada saat user melakukan prmesanan, mulai dari membuka halaman awal sampai melakukan checkout pesanan. User flow bisa dibuat dengan diagram-diagram berurutan ataupun flowchart. Baik flow dari aplikasi aslinya itu sendiri ataupun hasil dari redesign yang sudah kita buat, berikut ini adalah flow dari aplikasi yang sudah saya lakukan redesign.
3. Membuat Sketsa
Setelah melakukan langkah-langkah tadi kita bisa mulai melakukan sketsa awal secara manual ataupun digital untuk mengimplementasikan hasil dari case study yang sudah kita buat, lalu kita buat gambaran awal mengenai layout ataupun elemen yang akan dipilih.
4. Membuat Wireframe
Sebelum membuat high fidelity, kita harus membuat acuan desain terlebih dahulu dengan membuat wireframe. Untuk lebih menggambarkan flow-nya itu sendiri serta menggambarkan elemen-elemen dasar seperti button, navigasi, layout dll.
5. Membuat Moodboard
Moodboard adalah kumpulan dari elemen-elemen visual yang terkait dengan produk dan tema desain yang akan kita buat, termasuk warna, style ilustrasi, typography, dll. Hal tersebut bisa kita jadikan sebagai refrensi atau acuan oleh para designer dalam menentukan arah desain.
6. Membuat High-fidelity
Pada tahap ini kita bisa melihat hasil jadi dari desain yang sudah kita buat, mengenai detail, warna dan segala macamnya. Berikut adalah perbandingan dari beberapa halaman yang sudah dilakukan redesign dan sebelum redesign.
Halaman Utama
Halaman Detail Menu
Halaman Promo
Halaman Keranjang
7. Membuat protoype
Untuk melihat sejauh mana desain kita sudah sesuai dengan kebutuhan user atau belum, tentu kita harus melakukan pengujian terlebih dahulu dengan prototyping. Prototype dibuat sebagai bahan pengujian usability testing kepada user, agar desain kita buat tidak hanya berdasarkan asumsi-asumsi pribadi yang tidak tahu ke-valid-annya atau agar desain sesuai dengan kebutuhan user.
8. Usability Testing
Setelah membuat prototipe adalah mengujikan prototipe itu sendiri kepada target user yang sudah kita tentukan agar kita tahu apakah desain yang kita buat sudah sesuai dengan kebutuhan user atau tidak.
Prototipe yang sudah saya buat saya ujikan kepada 4 user, mereka mencoba berinteraksi langsung dengan prototipenya dan saya memberikan beberapa pertanyaan mengenai experience yang didapat saat menjalankan prototipenya.
Beberapa hal yang saya dapat setelah melakukan usability tasting adalah :
- 3 dari 4 orang merasakan hasil redesign dari aplikasi GrabFood yang sudah saya buat ialah mereka merasa lebih mudah dan jelas dalam mencari voucher promo dan info dari total harga yang terdapat pada halaman keranjang dan beberapa elemen lainnya.
- Di halaman Tukar Poin butuh ditambahkan info poin yang sudah terkumpul, agar user mengetahui berapa poin yang sudah ia dapatkan dan apakah poin yang telah dimiliki apakah cukup untuk ditukar atau tidak.
- Pada bagian memilih metode pembayaran, user merasa kurang notice pada icon-icon yang yang tersedia.
- Catatan untuk pengemudi tidak perlu pop up, cukup hanya dengan note yang bisa input secara langsung di card yang sama.
Kesimpulan
Pelajaran yang dapat saya ambil dalam melakukan redesign aplikasi ini ialah betapa pentingnya kita untuk mendesain sesuai kebutuhan user, jadi desain yang sudah kita buat akan benar-benar digunakan oleh user dan tidak sia-sia begitu saja. Pentingnya untuk memvalidasi setiap asumsi yang sudah kita lakukan di setiap proses yang kita jalani, bisa dengan meminta pendapat secara langsung kepada orang-orang disekitar agar kita bisa mendesain lebih efektif dan efisien. Tentunya usablity testing tidak cukup kalau hanya dilakukan sekali saja, hasil dari usability testing diatas adalah hasil user testing yang pertama dan tentunya jika ingin benar-benar mendapatkan hasil yang maksimal maka kita harus melakukannya berulang-ulang sampai user merasa sudah tidak ada kendala dalam menjalankan aplikasi tersebut. Sekian dari saya terima kasih. Feel free to leave feedback :)
