Redesign UI/UX Starbucks Indonesia

10 min readJul 10, 2023

Redesign Aplikasi Starbucks Indonesia

Latar Belakang

Starbucks merupakan salah satu perusahaan kopi terbesar di dunia asal Amerika Serikat. Kantor Pusat Starbucks pertama kali muncul di Seattle, Washington. Saat ini, cabang starbucks terdapat di berbagai belahan dunia. Pada awalnya perusahaan ini hanya menjual biji kopi. Seiring dengan melebarnya usaha mereka, starbucks terkenal sebagai kedai minuman kopi, yang didalamnya juga menjual minuman non coffee yang dingin maupun yang panas, kue kering, sandwich, aneka cemilan, dan beberapa barang lainnya seperti gelas dan tumbler.

Indonesia merupakan salah satu negara yang dijadikan pusat ekspansi bisnis kopi terbesar di dunia Ini. Saat ini, terdapat 500 gerai kedai kopi starbucks Indonesia yang terdapat di berbagai kabupaten dan provinsi. Melihat banyaknya peminat brand kopi asal Amerika ini, sudah seharusnya pelayanan online maupun offline yang berbanding lurus dengan popularitasnya. Dalam rangka mempermudah customer dalam melakukan transaksi, starbucks menyediakan website dan mobile app di setiap negara yang fitur-fiturnya disesuaikan juga dengan kebutuhan di daerah tersebut. Di Indonesia, aplikasi ini dinamai Starbucks Indonesia. Kehadirannya selama ini sangat membantu customer untuk mendapatkan informasi terkait menu, promo, rewards bahkan melakukan mobile order. Sekarang, aplikasi ini dapat diunduh oleh pengguna melalui play store maupun app store.

Aplikasi ini kehadirannya memang sangat membantu untuk beberapa customer, namun berdasarkan desk research yang telah dilakukan dan pengalaman pribadi penulis masih terdapat beberapa fitur dan tampilan yang dapat disempurnakan agar dapat digunakan oleh pengguna dengan lebih efektif. Di luar kebermanfaatan yang dirasakan oleh pengguna, aplikasi ini ternyata masih mendapatkan rating yang kurang memuaskan dari pengguna itu sendiri. Berdasarkan rating data yang didapatkan dari google play, Starbucks Indonesia memiliki rating 3,8 Sedangkan, berdasarkan App Store, starbucks memiliki rating 2,1 (Lihat gambar 1)

Pada masing-masing aplikasi ini juga terdapat beberapa komentar yang dirasa menunjang alasan hadirnya rating 3,8 di play store dan 2,1 di app store. Berdasarkan hasil desk research komentar-komentar yang dimaksud adalah sebagai berikut;

Komentar-komentar dan rating ini mendorong penulis untuk mencoba memyempurnakan dan memperbaiki yang bisa dilakukan oleh seorang UI/UX. Oleh sebab itu, dalam menghadapi kasus ini terdapat beberapa tujuan yang perlu dicapai:

Memperbaiki tampilan agar lebih nyaman dilihat
Memperbaiki tampilan agar lebih mudah dan efisien digunakan.
Menambahkan beberapa fitur agar lebih mempermudah user dalam menggunakan aplikasi.

Keseluruhan tujuan ini akan dicapai melalui beberapa tahapan penelitian menggunakan framework design thinking yang terdiri dari metode penelitiannya terdiri dari beberapa tahapan, yaitu empathize, define, ideate, prototype, dan test.

Empathize

Pada tahapan empathize, dalam rangka memahami kebutuhan pengguna, maka riset dilakukan dalam dua tahapan yaitu, 1) Penyebaran kuesioner, 2) In depth Interview. Disebarkannya kuesioner bertujuan untuk melakukan screening dan tinjauan awal sebelum dilakukannya in depth interview. Namun, sebelum dua tahapan riset pengguna dilakukan, penelitian diawali dengan melakukan competitive analisis terlebih dahulu.

Competitive Analysis

Pada tahapan ini, dilakukan perbandingan antara beberapa aplikasi antara lain, aplikasi yang menyediakan layanan serupa antara lain; Janji Jiwa, fore, dan kopi kenangan. Beberapa aplikasi ini akan dianalisis kekurangan dan kelebihannya lalu dibandingkan satu sama lain.

Kompetitif analisis menunjukkan bahwa kelebihan Starbucks diantara kompetitor lainnya adalah pada layanan dine-in nya yang cenderung menyediakan layanan yang sangat nyaman untuk para customer dengan kualitas kopi dan makanan yang baik. Dan dalam rangka mendapatkan kenyamana ini mereka rela mendownload app starbucks untuk mendapatkan promo dan rewards yang menguntungkan mereka untuk tujuan mereka kedepannya.

Setelah kompetitif analisis dilakukan, tentunya, screening online untuk mendapatkan user yang sesuai dilakukan melalui penyebaran kuesioner

Penyebaran kuesioner

Kuesioner disebarkan pada responden yang memenuhi kriteria dan persyaratan penelitian, yaitu;

Usia 18–30 Tahun
Pernah mengorder pesanan di starbucks baik dine in maupun pick up
Pernah menggunakan aplikasi starbucks setidaknya sekali.
Perempuan/Laki-laki
Mahasiswa/pekerja yang pernah bekerja atau belajar di Starbucks.

Hasil Screenng Kuesioner menunjukkan bahwa dari 26 responden 25 diantaranya lebih senang mengorder secara offline dan tetap menggunakan aplikasi starbucks untuk mendapatkan rewards atau point yang dapat dibelanjakan kedepannya.

In-Depth Interview

Screening melalui kuesioner dirasa kurang cukup untuk mendapatkan hasil peneliti. Hasil In depth interview yang telah dilakukan akan diproses untuk dianalisis ke tahapan selanjutnya. Pertanyaan-pertanyaan berkaitan dengan interview bisa didapatkan melalui https://forms.gle/HfNsFdCPvNUdrepz7. Proses in depth interview ini dilakukan untuk memahami cara pengguna menggunakan aplikasi dari awal hingga akhir secara lebih mendalam. Proses ini dilakukan terhadap 5 orang user yang telah memenuhi kriteria/

Setelah interview dilakukan, tahapan selanjutnya mengolah data lima rang user yang telah diinterview menjadi sebuah user persona.

User persona menunjukkan bahwa user senang menggunakan aplikasi ini dengan tujuan untuk mendapatkan promo atau diskon serta voucher yang kemudian setelah setiap pembelian dapat berubah menjadi rewards dan stars. Rewards ini nantinya dapat ditukarkan sebagai benefit yang didapatkan oleh customer karena telah berbelanja di starbucks.

User merasa bahwa aplikasi starbucks saat ini telah berjalan dengan sangat baik dan cukup simple. Akan tetapi kan lebih baik jika tampilannya dibuat lebih minimalist, rapi, dan fitur payment yang terhubung dengan e-wallet lainnya. Selain itu, aplikasi ini disarankan agar lebih memiliki banyak gambar untuk membuat lebih menarik. Dan beberapa fitur yang kurang berguna bisa dioptimalkan. Contohnya, fitur store terdekat yang tampilan alamatnya bisa langsung terbuka ke aplikasi google maps saja.

Define

Pada tahapan ini, hal yang coba dilakukan adalah menentukan permasalahan atau main problem berdasarkan hasil wawancara yang telah dilakukan. Pada tahap ini analisis data dilakukan dengan cara melakukan affinity mapping.

Hasil Affinity Mapping menunjukkan bahawa permasalahan yang terdapat pada aplikasi ini da dirasakan oleh pengguna diantara yaitu kekurangan pada bagian visual yang kurang menarik, minimalist, dan ketidak konsistenan. Kedua terkait sistem top up yang terbatas pada nominal teretentu dan tidak teringrasi dengan e-wallet lainnya. Terakhir terkait fitur store terdekat yang dirasa kurang berguna dan lebih baik dari aplikasi bisa langsung mengarahkan ke platform pihak ketiga untuk mendapatkan informasi alamat seperti google maps. dan masih banyak lainnya.

Berdasarkan permasalahan-permasalahan ini, agar dapat lebih mudah memahami pengguna dibutuhkan customer journey map yang juga dihasilkan dari hasil wawancara dengan user meliputi Pencarian->register/login->Claim Rewards/Voucher-> Pembayaran

Ideate

Pada tahap ideate, permasalahan yang sudah dirumuskan dan dipahami akan coba dicari solusinya. Salah satunya menggunakan teknik How-Might-We

berdasarkan customer Journey maps, dan permasalahan di atas maka didapatkan 5 HMW

How Might We- memberikan informasi yang lengkap di aplikasi dan mengaitkan platform pihak ketiga dengan mobile app?
How Might We-membuat tahapan register mudah, tidak lambat, dan tidak terlogout secara otomatis otomatis?
How Might We- menyediakan rewards dan info promo selengkap mungkin di aplikasi?
How Might We- menyediakan aplikasi yang minimalist, mudah digunakan, namun memiliki visual yang menarik?
How Might We- memberikan pembayaran yang mudah dan terintegrasi dengan e-wallet lainnya dengan nominal top yang lebih fleksibel?

Namun, sesuai dengan keluhan yang banyak diajukan oleh pengguna terkait e-wallet, oleh sebab itu fokus penelitian pada penyediaan visual yang baik, dan perbaikan fitur e-wallet atau top up pembayaran.

Adapun solusi yang didapatkan berdasarkan prioritization matrix yang telah dipetakan dari keempat HMW tadi antara lain;

Menampilkan seluruh informasi promosi di halaman homepage pada banner promosi maupun menu lainnya. Selain itu, mengaktifkan fitur notifikasi untuk selalu mengirimkan informasi promo.
Menghadirkan fitur pembayaran yang terintegrasi dengan e-wallet lainnya selain transfer bank
Mempermudah proses login/register dengan mengaitkan aplikasi starbucks dengan akun google, facebook, maupun apple ID
memperbaharui visual design yang dianggap kurang menarik
mempermudah user dengan mengaitkan beberapa fitur langsung mengerah ke applikasi pihak ketiga contohnya lokasi yang bisa diakses melalui google maps.

Dari keempat HMW dan solusi yang dijabarkan, adapun yang menjadi prioritas dalam meredesign aplikasi starbucks Indonesia berfokus pada point 4 dan poin 5, yaitu terkait fitur pembayaran dan visual.

Ideate

Pada tahapan ideate, ditemukan solusi dan masalah mulai diselesaikan dengan membuat IA (Information Architecture), User Flows, Sketches, Wireframes, Low-Fidelity, dan High-Fidelity. Berikut adalah IA yang dihasilkan.

Selain membuat IA membuat userflow juga penting untuk mempermudah tahapan selanjutnya. Berikut adalah userflow yang telah dibuat.

Setelah userflows selesai dilakukan selanjutnya adalah membuat wireframe atau low-fidelity. Pada redesign kali ini proses pembuatan langsung dilakukan dengan membuat low-fidelity. Berikut adalah hasil low fidelity yang telah dilakukan.

Prototyping

Sebelum prototyping dilakukan rancangan low-fidelity yang telah dibuat akan disempurnakan menjadi high-fidelity agar sempurna dapat dijadikan model eksperimental dari solusi-solusi nyata yang telah dirumuskan pada tahapan sebelumnya. Berikut adalah hasil high fidelity yang telah dilakukan.

High fidelity saja tidak cukup, maka perlu dilakukan prototying untuk menguji solusi-solusi yang telah dirumuskan dari permasalahan tadi. Tentunya prototyping ini dilakukan agar user bisa merasakan simulasi dari solusi ini. Prototying dilakukan dengan setiap aspek desain yang ada agar berfungsi dan saling terhubung satu sama lain. Contohnya, prototying berfungsi untuk menghubungkan antara page-page dan button-button yang ada. Berikut adalah contoh prototyiping yang telah dilakukan dalam kasus ini.

**Prototyping Redesign Aplikasi Starbucks**

Testing

Solusi yang diberikan belum dapat dikatan 100% berhasil apabila dampaknya tidak langsung dirasakan oleh user, oleh sebab itu perlu dilakuakan testing untuk penyempurnaan solusi yang telah dibuat. Pada kasus ini Testing dilakukan dengan tujuan:

Mencari tahu apakah fitur pembayaran telah berjalan lancar
Mengetahui apakah visual yang ditampilkan sudah tergolong ke dalam kategori menarik, minimalist, dan memudahkan pengguna dalam menggunakan app
Mengetahui apakah user merasa puas dengan perbaikan sistem login dan registrasi yang terintegrasi dengan Google, Apple ID, dan Facebook.

Testing kemudian dilakukan menggunakan metode SUS (System Usability Scale) yang cara kerjanya dilakukan dengan menyebarkan kuesioner kepada 5 responden dan mecoba meminta rating dari pengalaman mereka selama menggunakan aplikasi starbucks indonesia hasil redesign. Adapun pertanyaan yang disebar terdapat pada link berikut. Hasil form ini diolah menggunakan acuan yang ada. Berikut adalah schoring yang dihasilkan dari kuesioner SUS yang telah disebar.

Berikut adalah hasil SUS yang telah diolah, gambar di bawah ini menunjukkan bahwa System Usability Scale menunjukkan aplikasi ini memiliki score 89, 5

Skor rata-rata SUS adalah 68, berdasarkan tabel diatas nilai 89, 5 termasuk kekategori excellent. Namun sepertinya hal ini tidak bisa dijadikan satu acuan untuk memperbaiki redesign yang telah dilakukan, oleh sebab itu g dilakukan juga wawancara dengan beberapa responden. Karena minimnya waktu yang ada, oleh sebab itu wawancara hanya dilakukan pada salah satu responden.

Menurut responden Inisal RS dan AM terdapat beberapa masukan:

Menurut saya secara visualisasi design UI Starbuck ini lebih fresh seacara shape dibandingkan dengan aplikasi sebelumnya. Dan jauh lebih menyatu dengan IOS sebenanrya. Walau redesign tidak sepenuhnya berbeda jauh dengan starbucks, saya rasa ini hal yang menarik secara shape pada button button yang tersedia. Saya rasa penggunaan servernya, dan button back beberapa tidak dapat digunakan. Fitur Card dan Bayar tentu mempermudah karena memiliki action untuk saya pilih ketika ingin melakukan top up ataupun pembayaran. Sejauh ini Sangat mudah karena tidak ada text yang terpotong, dan terstruktur tidak terlalu berteleh-teleh — Rs
So far so good untuk saya secara design. Visualisasi pada aplikasi starbuck ini menarik karena memiliki ikon yang baru dibandingkan dengan yang lama. Walau saya rasa memang hijaunya starbucks agak kurang menarik, tapi dalam design ini punya penempatan yang tepat . Untuk fitur top up, dan yang berhubungan dengan penggunaan kartu menurut saya sudah sangat runtut dan seharusnya tidak membingungkan. — AM

Ingin sekali rasanya membuat perbaikan dalam waktu sesegera mungkin, akan tetapi keterbatasan waktu membuat penulis merasa bahwa ini merupakan evaluasi yang cukup membangun dan dapat diterapkan di waktu kedepannya. Catatan-catatan membangun dari user akan terus dipertimbangkan demi kebaikan pengembangan aplikasi ini dari segi UI/UX kedepannya.

Akhir kata, Case study ini merupakan hasil belajar singkat yang dapat dikatakan jauh dari kata sempurna sehingga dibutuhkan banyak saran dan kritik membangun dari para pembaca.

Semoga kedepannya saya dapat menyempurnakan ilmu yang saya punya dan menerapkannya jauh lebih baik dari pekerjaan yang saya lakukan hari ini!

Di bawah ini akan aku tampilkan before after interface yang telah di redesign. Have a good day everyone! - Syifa