Cavea – Coffee Shop Online Order

Studi kasus ini dibuat untuk memenuhi tugas (challenge) pada kegiatan Studi Independen UI/UX Research & Design di Binar Academy, salah satu program Merdeka Belajar – Kampus Merdeka oleh Kementrian Pendidikan dan Kebudayaan Indonesia. Dalam studi kasus ini dibuat sebuah aplikasi pemesanan online pada sebuah coffee shop dengan fitur-fitur yang memudahkan pembeli dan mengurangi antrian panjang.

Timeline

1 Bulan

My Role

UI/UX Designer

Tools

Figma

Background

Sebuah coffee shop kecil bernama Cavea mulai memiliki banyak pelanggan sehingga menyebabkan antrean panjang dan membuat beberapa pelanggan merasa jenuh dan bosan. Untuk mengatasi permasalahan tersebut, pemilik coffee shop ingin membuat sebuah aplikasi untuk mengurangi antrean panjang.

Emphatize

Emphatize dilakukan untuk memahami pengguna dan mengetahui permasalahan yang ada. Agar lebih mudah dalam memahami pengguna dibuat sebuah user persona yang menggambarkan tentang permasalahan serta keinginan dan kebutuhan dari pengguna.

user persona
user persona aplikasi Cavea

Selain membuat user persona, dilakukan juga desk research meliputi penelitian terhadap kompetitor atau aplikasi serupa dan artikel terkait.

Problem Statement

Berdasarkan user persona dan penelitian yang dilakukan, dapat disimpulkan bahwa permasalahan utama yang menyebabkan antrean panjang adalah:

  • Pembeli membutuhkan banyak waktu saat memilih menu. Hal ini disebabkan karena pengguna kesulitan mendapatkan informasi mengenai menu yang disediakan dan terkadang merasa kebingungan untuk memilih menu yang akan dipesan.
  • Transaksi masih dilakukan secara manual. Hal ini membuat response time menjadi bertambah lama karena beberapa issue seperti kasir yang harus menghitung uang secara manual dan tidak adanya ketersediaan uang kembalian.

Solution

Pada tahap ini dilakukan brainstorming untuk mengumpulkan ide dan solusi dari permasalahan yang ada. Seperti yang sudah tertulis di atas, permasalahan yang menyebabkan antrean panjang adalah pembeli yang membutuhkan banyak waktu saat memilih menu dan transaksi yang masih dilakukan secara manual sehingga untuk mengatasi permasalahan tersebut, pembeli memerlukan informasi terkait menu yang disediakan dan memberikan opsi pembayaran cashless.

Cavea – online order coffee shop

Solusi yang diajukan adalah sebuah aplikasi online order coffee shop dengan fitur sebagai berikut :

  • Order online dan sistem pick-up. Dengan adanya kedua fitur ini, pengguna dapat memilih dan memesan menu melalui aplikasi tanpa harus datang ke kedai, pengguna juga dapat mengambil pesanan setelah selesai dibuat sehingga tidak perlu menunggu dan mengantre di kedai.
  • Metode pembayaran cashless. Disediakan metode pembayaran dengan menggunakan uang elektronik seperti e-wallet, transfer bank, maupun pembayaran elektronik lainnya sehingga pengguna cukup melakukan pembayaran melalui aplikasi

Prototyping

Setelah selesai melakukan brainstorming dan ideasi dari permasalahan yang ada, tahap selanjutnya adalah membuat prototype dari aplikasi yang akan dibuat. Desain aplikasi Cavea dilakukan dengan menggunakan software/tool figma. Proses prototype dimulai dengan perancangan wireframe dan userflow atau dapat disebut dengan wireflow. Pembuatan wireflow bertujuan untuk memberikan gambaran besar terkait alur pengguna dalam menggunakan aplikasi. Pada saat membuat wireflow, dilakukan riset terlebih dahulu terhadap aplikasi serupa seperti Kopi Kenangan dan Gofood, kemudian dibuat sebuah moodboard untuk mendapatkan inspirasi dan ide terkait desain aplikasi yang akan dibuat.

wireflow untuk menunjukkan alur yang akan dilalui pengguna saat menggunakan aplikasi
wireflow cavea
moodboard untuk desain UI
moodboard

Setelah pembuatan wireflow selesai dilakukan, tahap selanjutnya adalah mempersiapakan style guide meliputi text style dan color style. Pada desain yang akan dibuat, digunakan jenis font Lato dan warna coklat sebagai warna primer.

desain user interface text style dan color style atau dapat disebut style guide
text style dan color style

Tahap selanjutnya adalah pembuatan design system. Design system dibuat agar memudahkan dan mempercepat proses pembuatan desain high fidelity aplikasi, selain itu dengan adanya design system ini juga akan membuat desain yang dibuat tetap konsisten.

design system agar mempercepat, mempermudah dan membuat desain menjadi konsisten
design system aplikasi cavea

Setelah design system selesai dibuat, tahap selanjutnya adalah membuat high fidelity design dan dilanjutkan dengan pembuatan prototype.

high fidelity design – Cavea

Usability Testing

Usability testing dilakukan untuk mengevaluasi desain aplikasi yang telah dibuat dengan mengujinya kepada pengguna. Hal ini untuk mengetahui apakah pengguna dapat memahami dan menggunakan desain aplikasi yang telah dibuat. Untuk melakukan usability testing pada aplikasi Cavea, penulis menggunakan metode online moderate testing melalui aplikasi zoom meeting dengan 5 partisipan terpililih. Alasan dari pemilihan metode ini karena penulis ingin menggali lebih dalam tentang apa yang dirasakan oleh pengguna dan bagaimana pendapat mereka saat menggunakan aplikasi ini.

Adapun kriteria dari partisipan untuk melakukan usability testing adalah

  • Laki-laki/perempuan
  • Berusia 15-45 tahun

Pengujian dilakukan dengan memberikan beberapa task yang akan dilakukan partisipan dengan menggunakan prototype yang telah disediakan. Beberapa task yang diberikan di antaranya:

  1. Mendaftarkan akun
  2. Memesan menu coffe – latte
  3. Menambahkan pesanan lain pada menu non-coffee
  4. Mengubah pesanan (detail dan jumlah)
  5. Menggunakan kode voucher dan melakukan pembayaran
  6. Melihat progress pesanan
testing result

Analisis Hasil Testing

Menu order dengan ikon keranjang bermakna ambigu dan dapat membuat beberapa pengguna kebingungan atau mengira bahwa menu tersebut akan mengarahkan ke halaman keranjang pesanan padahal menu tersebut untuk mengakses riwayat pemesanan.

Secara keseluruhan, sebagian besar pengguna dapat memahami aplikasi ini dengan baik dan berdasarkan pernyataan dari pengguna dapat disimpulkan bahwa aplikasi Cavea dapat mempermudah proses pemesanan tanpa harus mengantre panjang.

Iterasi

Mengubah kata order menjadi transaksi dan merubah ikon keranjang menjadi ikon struk pesanan untuk mempertegas fungsi dari menu tersebut.

hasil iterasi desain, mengubah desain menu order agar tidak menimbulkan kesan ambigu

Akses prototype : klik di sini

Catatan:

Di sini saya menyadari bahwa masih terdapat banyak kekurangan dalam desain saya terutama pada tampilan “Beranda” di mana peletakan popular menu dan kategori mungkin perlu dipertimbangkan lagi agar lebih mudah dijangkau oleh pengguna.

Leave a Reply