Visi Proyek

Deskripsi

Mengapa Kopi merupakan aplikasi berbasis mobile yang dibuat untuk memudahkan masyarakat khususnya anak muda dalam pembelian kopi ataupun cemilan tanpa harus mengantri panjang. Pada proyek ini, saya bertanggung jawab sebagai UI/UX Designer.

Tujuan

Aplikasi ini dibuat untuk memenuhi salah satu Challenge yang diberikan dari Bootcamp Binar Academy. Metode pengembangkan aplikasi pada studi kasus ini menggunakan metode Design Thinking.
 

🧠Design Thinking

 
Design thinking adalah metodologi desain yang memberikan pendekatan berbasis solusi untuk memecahkan masalah. Design Thinking dilakukan untuk menggali permasalahan/kebutuhan yang dihadapi oleh target pengguna sehingga bisa menentukan solusi terbaik untuk dapat menyelesaikannya.
 
 
notion image
 
Design Thinking memiliki 5 tahapan yaitu :
  1. Empathize : Pada tahap ini dilakukan pendekatan terhadap target pengguna. Tahap ini juga adalah tahap untuk kita dapat memahami kebutuhan pengguna, tujuan bisnis dan kapasitas/kemampuan teknologi. Apa yang dikatakan oleh pengguna belum tentu apa yang sebenarnya mereka lakukan, maka dalam proses ini kita harus mencari tahu tahu apa yang user pikikan dan rasakan, kebiasaan apa yang mereka lakukan, apa saja kegelisahan yang mereka rasakan, dan hal apa saja yang dapat membuat mereka senang.
  1. Define : Tahap ini adalah tahapan dalam mendefinisikan masalah apa yang sebenarnya dialami oleh pengguna ketika berinteraksi dengan sebuah produk atau proses. Hasil akhir pada tahapan ini adalah masalah apa yang diselesaikan, untuk siapa kita menyelesaikan masalag, dan apa cara lain yang dapat menyelesaikan masalah.
  1. Ideate : Tahap ini adalah tahap untuk menghasilkan ide. Semua ide-ide akan ditampung guna penyelesain masalah yang telah ditetapkan pada tahap define. Penting untuk mendapatkan ide sebanyak mungkin atau solusi masalah di awal fase ide yang kemudian dipilih cara terbaik untuk memecahkan masalah atau menyediakan elemen yang diperlukan untuk menghindari masalah-masalah yang nantinya terjadi.
  1. Prototyping : Tahapan ini merupakan simulasi dari product yang sudah selesai. Dengan membuat design yang interaktif layaknya seperti produk aplikasi yang sudah tahap pemrograman.
  1. Testing : Dilakukannya pengujian dan evaluasi terhadap produk kepada pengguna dan hasilnya akan dilakukan perubahan dan penyempurnaan untuk menyingkirkan masalah dan mendapatkan solusi dan pemahaman yang mendalam tentang produk dan penggunanya.
 
 
 

Empathize

The Problems

“Coffee Shop kecil yang mulai memiliki banyak pelanggan dan antrian panjang”
 

✍🏻Research

Kopi merupakan salah satu minuman yang menjadi favorit semua orang, terutama penikmatnya. Banyak orang menjadikan kopi sebagai minuman yang memang selalu dikonsumsi, karena mereka menganggap sajian kopi sudah menjadi gaya hidup yang selalu ada mengisi aktifitas harian.

📝Synthesis

Kopi dipercaya dapat membangkitkan semangat seseorang, Maka tak heran jika sejumlah Coffee Shop selalu menjadi sasaran untuk bersantai sambil menikmati kopi. namun jika semua orang pergi ke Coffee Shop yang sama, maka tempat tersebut bukan untuk bersantai lagi karena terlalu banyak pelanggan yang membeli dan bersantai di Coffee Shop tersebut. Karena itulah sejumlah orang ingin tetap membeli kopi tanpa harus mengantri panjang.
 
 
 

Define

📝User Persona

Berdasarkan pengamatan yang saya lakukan, dibuatlah user persona untuk mewakili pengguna. Let’s meet Haikal!
notion image
 

📌User Journey Map

Dari User persona yang telah dibuat, maka berikut User Journey Map untuk memvisualisasikan pengalaman pengguna dan menemukan paint point pada saat pengguna membeli kopi secara manual/langsung, serta menemukan room for improvements yang dapat membantu dalam pengembangan produk.
notion image
 
 

Ideate

 
💡
Aplikasi Coffee Shop sederhana berbasis mobile : Pembelian/pemesanan kopi secara online dengan fitur metode pemesanan Delivery dan Pick-up.
 

🗺️Site Map

Berikut Site Map dari produk aplikasi Mengapa Kopi yang akan dibuat.
 
notion image
 
 

🗓️Flowchart

Flowchart dibawah merupakan Flowchart pemesanan kopi dan menu cemilan yang ada pada aplikasi Mengapa Kopi. Alur yang dibuat pada Flowchart tersebut merupakan alur pemesanan dengan metode pembayaran DANA yang memang merupakan aplikasi eksternal, sehingga alur dari pemesanan ini hanya berfokus pada aplikasi Mengapa Kopi saja.
notion image
 
 

✏️ Wireframe

Wireframe penting dibuat untuk membangun dan mengenali ide produk yang akan diimplementasikan nantinya pada tampilan/User Interface agar menjadi lebih baik sesuai kebutuhan pengguna. Berikut Wireframe yang telah dibuat untuk aplikasi Mengapa Kopi.
notion image
notion image
 
 

🖍️Wireflow

Wireflow merupakan alur dari flowchart yang sudah dibuat sebelumnya dibuat dengan disertai visualisasi dari wireframe yang sudah dibuat seperti berikut.
notion image
 

🏗️Design System

Konsistensi pada suatu desain produk merupakan hal yang sangat penting. Proses desain menjadi lebih mudah, dan hasil desain menjadi lebih rapi, terkonsep, dan konsisten dengan adanya Design System. Design UI pada aplikasi Mengapa Kopi dirancangn dengan penggunaan warna coklat dan cream yang identik dengan kopi dan penambahan warna hijau agar terkesan lebih segar, dan warna lainnya sebagai pendukung.
 
notion image
 
 

Prototyping

 

🧡Moodboard

 

🎨Preview Design

 
notion image
 
Cek Prototype pada link berikut ini!
 
 

Testing

 

📝Usability Testing

 
Testing dilakukan untuk menguji prototype yang telah dibuat. Testing yang dilakukan pada produk aplikasi Mengapa kopi ini yaitu Usability testing (pengujian kegunaan). Usability Testing ini dilakukan untuk memvalidasi apakah produk yang sudah dibuat berguna dan sesuai dengan kebutuhan user tau tidak, dan dengan usability testing ini, saya sebagai UI/UX Design dapat melihat pengguna pada saat berinteraksi dengan produk secara langsung, sehingga dapat diketahui gerak gerik, keadaan dan bahkan emosi dari pengguna.
 
Usability Testing ini dilakukan melaui dua cara :
  • Testing melalui platform Maze untuk menjalankan prototype
  • Testing melalui platform Maze disertai dengan interview melaui aplikasi video conference yaitu Zoom
 
 
 

Target Peserta Usability Testing

Mahasiswa Pendidikan Sistem dan Teknologi Informasi UPI Kampus Purwakarta angkatan 2019 (Semester 6)
 
 

Tugas yang diberikan

  1. Peserta melakukan pendaftaran melalui email untuk masuk pada aplikasi
  1. Peserta memesan menu minuman dan makanan yang telah ditentukan
  1. Peserta membeli pesanan yang ada di keran dan membayar dengan metode pembayaran DANA dan metode pemesanan Pickup.
 

Hasil Pengujian Usability Testing pada platform Maze

 
 

Kesimpulan Hasil Pengujian

  • 4 dari 5 Testers dapat menjalankan prototype hingga selesai (1 terkendalan teknis)
  • Task 1(Sign-up) : semua testers dapat menjalankannya dengan mudah
  • Task 2(Pemesanan) : 3 dari 4 orang testers merasa kebingungan untuk memesan kopi dan camilan yang di instruksikan
  • Task 3(Pembelian) : 2 dari 4 orang testers dapat menjalankan task 3 dengan mudah, dan 2 orang yang lain dapat menyelesaikan tasknya, namun terdapat beberapa misclick.
  • Akumulasi keseluruhan rating dari 1 - 5 (1 : sangat sulit, 5 : sangat mudah) :
🎓
Pembelian : 5, 3, 5, 5
(AVG = 4.5)
  • Feedback : Desain sederhana, sudah user friendly, Flow UI sangat mudah ,font yang digunakan sudah bagus, feedback dari UI sudah baik dan gampang dipahami, penggunaan gambar dan icon-icon sudah bagus, serta alur UI sudah sistematis akan tetapi terdapat penggunaan warna yang kurang kontras.
 
Dari hasil pengujian usability testing yang dilakukan oleh 5 testers di platform Maze.co, dan 3 diantaranya dibarengi dengan zoom, feedback yang diberikan oleh testers, secara keseluruhan Prototype ini sudah cukup baik, dimana para testers dapat menggunakannya dengan mudah karena desain dari UI aplikasi ‘Mengapa Kopi’ ini dirasa sudah user friendly, cukup simple/sederhana, dengan penggunaan gambar dan icon yang sudah bagus, dan flow dari aplikasi ini sudah sistematis, dapat dipahami dengan mudah, penggunaan warnapun sudah cukup bagus, walau terdapat warna yang kurang kontras. Keseluruhan task memiliki rating dengan rata-rata 4.3 dari 1-5 dengan keterangan 1 : sangat sulit, dan 5 : sangat mudah, yang berarti,  prototype ini terbilang sangat mudah digunakan dengan hasil rate 4.3.
 

🧐In Progress

Proses perbaikan pada aplikasi Mengapa Kopi ini masih dalam tahap pengerjaan, namun terdapat beberapa point yang menjadi catatan untuk menjadi bahan perbaikan :
 
  1. Copy writing pada beberapa bagian aplikasi
  1. Penggunaan warna dibuat lebih kontras
  1. Penggantian Pop-up metode pemesanan
badge