McDelivery Apps — UX Case Study

Suprianto
9 min readOct 13, 2020

“Catatan : Penulisan Case Study ini merupakan bagian dari project Bootcamp UIUX, pada tahapan design process tahap 1 — Emphatize, yang terdiri dari Observe, dan User Research dilakukan secara tim.”

McDonald’s adalah salah satu restoran cepat saji yang ada di Indonesia, yang memiliki visi menjadi restoran cepat saji dengan pelayanan terbaik didunia, Senyum konsumen adalah hal penting untuk McDonalds. Pengalaman tersebut dapat kita dapatkan jika berkunjung langsung ke outlet Mc Donald’s, namun saat pandemi seperti sekarang ini, Apakah pengalaman pelayanan terbaik itu masih dapat dirasakan oleh konsumen?

Kenapa redesign McDelivery?

Ini bermula dari pengalaman salah satu kerabat saya saat melakukan pemesanan McDonald’s dengan menggunakan aplikasi McDelivery.

McDelivery memiliki rating tidak dapat dikatakan terlalu baik, karena mendapat review dengan nilai 2.9 / 5.0 dengan jumlah download 17,879 di Google Playstore, dan mendapat review dengan nilai 1.9 / 5.0 dengan jumlah download 608 di App Store. Lantas apa yang menyebabkan rating yang diberikan oleh user pengguna tdak terlalu baik?

Dengan dasar pengetahuan UX yang saya miliki, saya mencoba untuk mencari tau “Bagaimana pengalaman user saat menggunakan apps ini?”, dan “apa sebenarnya masalah yang dihadapi user saat menggunakan Aplikasi McDelivery ini?”.

Design Process

Dalam proses untuk mengetahui pengalaman dan kebutuhan user dalam menggunakan aplikasi McDelivery, serta meningkatkan kualitas pengalaman user saat menggunakan Aplikasi McDelivery, maka dalam proses redesign kali ini saya menggunakan 5 tahap Design Process :

1.1 — Design Proses

Tahap 1 — Emphatize

Observe

Pada tahap ini kami melakukan observasi awal menggunakan review user yang ada di Google Playstore dan App Store, hal ini dilakukan untuk mencari informasi tentang pengalaman — pengalaman yang dirasakan user saat menggunakan aplikasi ini.

Dari hasil — hasil review user App Store dan Google Playstore terdapat beberapa masalah yang cukup mengganggu pengalaman user dalam menggunakan Aplikasi McDelivery, sebagai berikut :

1.2— Review dari user di App Store dan Google Playstore
1.3 — Review dari user di App Store dan Google Playstore
1.4— Review dari user di App Store dan Google Playstore

User Research

Setelah menemukan beberapa masalah dari hasil obervasi (Observe), saya dan tim saya melakukan user interview dan usability testing kepada user untuk menvalidasi. Kamu melakukan user research kepada 5 user.Kami menggunakan metode Guerrilla Usability Testing, dimana kami meminta user untuk melakukan tugas — tugas penggunaan aplikasi mulai dari membuka aplikasi, melakukan pendaftaran akun, sampai dengan melakukan pemesanan menggunakan Aplikasi McDelivery.

User Interview dan Usability testing tersebut kami lakukan untuk 1) menvalidasi permasalahan — permasalahan, serta 2) mendapat insight dari user tentang pengalaman yang dirasakan selama menggunakan apps ini, dan 3) faktor yang mendorong user memilih melakukan pemesanan secara delivery melalui apps.

Berikut merupakan hasil user interview dan usability testing terhadap 5 user yang telah kami lakukan:

1.5 — Hasil user research
1.6— Hasil user research

Tahap 2 — Define

Dari insight — insight yang kami dapatkan dari usability testing, kami menemukan bahwa kendala yang ada di halaman review App Store dan Google Playstore juga ditemukan pada saat kami melakukan usability testing, selain itu kami juga mendapatkan insight — insight baru. Insight — Insight yang telah kami dapatkan, saya coba satukan dengan menggunakan Emphaty Map

Emphaty Map

2.7— Hasil user research

Pain Points

Pain Points yang kami temukan dari hasil user research adalah sebagai berikut:

  1. User kesulitan untuk melakukan registrasi akun– hal tersebut dikarenakan form pendaftaran yang terlalu Panjang, kesulitan untuk memasukkan password.
  2. User kesulitan saat melakukan pemilihan alamat — pada saat user melakukan pemilihan alamat, dengan menggeser pin pada peta, user tidak melihat adanya dialog box untuk melakukan konfirmasi.
  3. User kesulitan ketika memasukan Captcha pada saat ingin memproses order (sebelum memilih metode pembayaran) — user berulang kali memasukkan captcha namun selalu gagal, user juga mempertanyakan fungsi captcha pada tahap ini.
  4. User merasa kebingungan dengan status order — user mempertanyakan status order “Pesanan Selesai” padahal pesanannya diterima.
  5. Designnya terlalu simpel — user merasa designnya terlalu simple, sehingga user merasa kurang tertarik untuk melakukan pemesanan.

Main Focus

Berdasarkan pain points yang dialami user, saya memutuskan beberapa poin utam yang menjadi fokus redesign kali ini, yaitu:

1. Memperingkas halaman login

2. Melakukan improvement terhadap proses penambahan / edit alamat.

3. Melakukan improvement terhadap proses pemesanan.

4. Meningkatkan kualitas tracking pesanan.

5. Melakukan improvement tampilan

Tahap 3 — Ideate

How Might We (HMW)

Berdasarkan pain points dan main focus yang telah ditentukan, saya menggunakan How Might We (HMW )framework menggali sebanyak mungkin ide dan solusi untuk menyelesaikan masalah — masalah dan pain point yang dihadapi oleh user.

3.8 — How Might We

Flowchart

Dengan menggunakan data — data diatas saya kemudian mencoba untuk merancang flowchart. Hal ini juga berguna untuk membantu saya dalam menentukan halaman — halaman yang harus dibuat. Berikut merupakan flowchart redesign McDelivery:

3.9 — Flowchart

Crazy 8

Setelah menentukan flow dari Aplikasi McDelivery yang telah diredesign, selanjutnya saya membuat sketch/gambaran kasar dengan menggunakan metode Crazy 8, hal tersebut dilakukan untuk mencari, mendapatkan design tampilan mempermudah saya dalam mendesign Hi-Fi dan prototype.

3.10 — Crazy 8

Tahap 4 — Prototype

Masuk ke tahap ke 4 yaitu prototype dengan menggunakan dasar data- data yang telah dikumpulkan dan dibuat diatas, disini saya mulai mendesain aplikasi McDelivery, hal tersebut dilakukan untuk mencoba memberikan solusi untuk mengatasi masalah atau pain point yang dihadapi oleh user. Sedikit catatan, disini saya melakukan redesign tampilan aplikasi McDelivery dikarenakan adanya pain points dari user merasa designnya terlalu simpel, sehingga user merasa kurang tertarik untuk melakukan pemesanan.

Halaman Landing

4.11 — Halaman Landing

Perubahan :

  • Penambahan informasi pada halaman landing. Penambahan informasi diharapkan dapat memberikan informasi bagi user untuk fungsi dan fitur yang ada dalam aplikasi.

Halaman Sign In / Sign Up

4.12— Halaman Signin / Sign up

Perubahan :

  • Perubahan pada metode pendaftaran, yang sebelumnya menggunakan email, menjadi dengan menggunakan nomor handphone, hal tersebut bertujuan untuk mempermudah, dan mempersingkat flow pendaftaran.
  • Menghilangkan kode Keamanan, user sering kali gagal pada saat memasukkan kode. Kode keamanan saya hilangkan, sehingga untuk menyelesaikan proses pendaftaran user diharuskan untuk memasukkan kode verifikasi yang terkirim ke nomor handphonenya.

Halaman Home

4.13— Halaman Homepage

Perubahan :

  • Memperkecil layout bagian promosi, dan menambahkan tambahan pilih Menu dan Menu yang best seller, tujuannya adalah membuat design yang lebih simpel dan padat informasi, penambahan menu best seller disini juga bermaksud menggugah selera user untuk melakukan pemesanan makanan.
  • Menghilangkan fungsi — fungsi yang redundant / berulang.

Halaman Pilih Outlet

4.14— Halaman Pilih Outlet

Disini saya menambahkan menyisipkan halaman pilih outlet dalam proses order, halaman pilih outlet ini muncul setelah user mengklik menu yang ada pada halaman Homepage, tujuan penambahan halaman ini adalah untuk memberikan informasi kepada user outlet yang tercover di wilayahnya.

Berbeda dari proses yang saat ini, dimana ketika user melakukan pemesanan sistem McDelivery akan secara otomatis memilih-kan outlet untuk user (tanpa pemberitahuan), pada alur proses hasil redesign ini user diberikan kebebasan untuk memilih outlet dengan batasan outlet yang mencover wilayahnya.

Halaman Tambah Alamat

4.15 — Halaman Pilih Layout

Perubahan :

  • Penambahan halaman untuk memperbesar tampilan maps — sehingga user dapat lebih leluasa dalam mencari lokasinya pada maps.
  • Perubahan cara menentukan posisi dengan menggunakan pin — pada proses sebelumnya user diharuskan menggeser pin untuk menentukan lokasi namun jika menggunakan cara ini sering kali user kesulitan saat menggeser pin karena maps tertutup oleh jari tangan, pada proses yang telah di redesign user memilih lokasi dengan cara menggeser maps.

Halaman Menu & Detail Menu

4.16— Halaman Menu & Detail Menu

Perubahan:

  • Pengurang flow proses tambaha ke keranjang pesanan — Saya memotong sedikit flow proses pemilihan menu untuk ditambahkan ke keranjang pesanan, proses sebelumnya user harus melewati 4 proses, untuk flow proses yang telah diredesign ini user hanya perlu melewati 2 proses saja.
  • Perubahan posisi keranjang pesanan — sesuai dengan data hasil user interview 4 dari 5 user pernah/sering melakukan pemesanan delivery melalui aplikasi Gofood dan Grabfood, sehingga saya merubah posisi keranjang dengan menyesuaikan mental model user yang telah terbentuk.

Halaman Order

4.17 — Halaman Order

Perubahan :

  • Bagian kode verifikasi dihilangkan, karena saat melakukan konfirmasi pesanan, user sering kali terhambat kode verifikasi, peniadaan kode verifikasi ini juga sudah mempertimbangkan faktor keamanan, karena jika user melakukan pembayaran secara Cashless user akan diminta untuk memasukan kode pin/ verifikasi pada widget platform pembayaran masing — masing, sedangkan jika user melakukan pemesanan secara Cash, maka user diverifikasi kebenaran pesanannya oleh petugas outlet/restoran.

Halaman Tracking Pembelian

4.18 — Halaman Tracking Pembelian

Perubahan:

  • Perubahan pada fitur live tracking, berdasarkan hasil user research user banyak mempertanyakan status “Pesanan Selesai”, padahal pesanan baru dikonfirmasi oleh petugas outlet dan makanan belum sampai, untuk mengatasi pain point user tersebut saya menambahkan penambahan live tracking, sehingga user dapat mengetahui status terkini pesanannya dan posisi petugas delivery.

Link Prototype : https://www.figma.com/proto/eostObo9dadXDYVvPXY3aF/Redesign-McDelivery?node-id=2%3A0&viewport=-5095%2C90%2C0.592510461807251&scaling=scale-down

Tahap 5— Testing

Setelah membuat flow, design, dan prototype, saya melakukan usability testing hal tersebut dilakukan untuk menvalidasi apakah redesign ini berhasil mengatasi pain points atau masalah yang dihadapi oleh user.

Task

Melakukan pemesanan menu McDelivery

  • Task 1 : Melakukan registrasi
  • Task 2 : Memilih alamat
  • Task 3 : Melakukan order

Ilustrasi :

Kamu adalah pengguna baru McDelivery, kamu ingin melakukan pemesanan McDonald melalui aplikasi ini.

5.19 — Usability Testing Menggunakan Zoom Meeting

Success Rate

5.19 — Success Rate Matrics

Secara keseluruhan tingkat kesuksesan user dalam menjalankan task yang diberikan adalah sebesar 93,33% (13 + (2*0,5%)/14).

Berdasarkan hasil Usability testing, terdapat dua user yang kebingungan saat melakukan pemesanan, user mengira bahwa sudah memilih menu yang akan dipesan pada Homepage > bagian Menu > Menu Reguler, hal tersebut dikarenakan pada bagian itu terdapat gambar Burger dan Muffin.

Poin lainnya yang menjadi masukkan dari user adalah berpendapat bahwa seharusnya kode promo berada setelah metode pembayaran, karena biasanya terdapat promo yang hanya dapat diaplikasikan berdasarkan metode pembayarannya saja.

Kedua hal tersebut merupakan feedback yang akan saya masukkan kedalam backlog saya untuk lanjutkan pengerjaan redesign-nya.

Review & Pembelajaran

McDelivery merupakan salah satu dari banyak aplikasi yang sangat berguna dalam kondisi saat pandemi seperti ini, sehingga memaksa kita untuk berhati — hati, dan lebih memilih untuk dirumah saja jika memungkinkan. Dari sisi bisnis, aplikasi delivery ini menjadi salah satu layanan penting untuk mendapatkan revenue pada saat layanan makan ditempat / dine-in ditutup. Dengan layanan delivery dari aplikasi yang disediakan oleh pihak restoran sendiri dapat menggambarkan citra dari restoran.

Berdasarkan case study ini, saya mempelajari banyak hal baru dan memberikan gambaran kepada saya tentang proses untuk membuat sebuah produk digital yang ramah terhadap pengguna dan juga ramah untuk keperluan bisnis, juga memberikan gambaran mengenai design proses secara lebih lengkap, serta pentingnya suara/insight dari pengguna terhadap suatu produk. Pada case study kali ini saya menemukan beberapa kesulitan, hambatan, dan beberapa hal yang perlu saya perbaiki. Salah satu hambatannya adalah waktu, sehingga saya memutuskan untuk melakukan user interview dan user usability testing terhadap 5 user (Min. Magic Number untuk user interview). Case study kali ini juga memacu saya untuk terus memperbaiki diri dan menambah wawasan dalam bidang UX dan dalam bidang teknologi lainnya.

Akhir kata saya ingin mengucapkan terimakasih kepada Kak Fani (Fansyuri Jenar) yang merupakan mentor di Bootcamp UI/UX Binar Academy telah membimbing saya, tidak ketinggalan ucapkan terimakasih juga saya ucapakan untuk teman — teman setim saya (Tim4) atas bantuan yang diberikan.

Terimakasih telah membaca case study ini! Jika kamu menyukai case study ini mohon memberikan👏 dan jika kamu memiliki feedback jangan sungkan untuk menuliskannya pada komentar.

--

--