uI/Ux case study -temankopi (coffee shop apps)
Apps Name
Temankopi
Year
2022
Hi, folks. Di kesempatan kali ini aku bakal share eksplorasiku terkait dengan aplikasi coffee shop. Desain ini aku buat untuk memenuhi challenge di kelas UI/UX Research and Design dari Binar Academy.
Disclaimer : Ini adalah hasil eksplorasiku untuk memenuhi tugas course di Binar Academy. Here I share the process to complete this challenge. Pengerjaan desain ini didasarkan pada penugasan course Binar Academy dengan tenggat waktu 2 minggu. Tidak dilakukan desain keseluruhan aplikasi, hanya fitur yang inti saja.
Overview
Temankopi adalah aplikasi coffee shop yang menyediakan beberapa fitur untuk mempermudah pelanggan coffee shop untuk menikmati kopi dari mana saja dan kapan saja.
temankopi
Problem Statement
Tak bisa dipungkiri, semakin hari semakin banyak coffee shop coffee shop baru bermunculan. Karena memang budaya anak muda generasi milenial saat ini sering banget nongkrong bareng temen ataupun untuk ketemu dan ngobrol bareng partner kerja. Namun, banyak dari mereka yang ternyata saat ke coffee shop sudah penuh dan tidak ada lagi bangku yang tersisa.
Roles and Responsibilities
Dalam menyelesaikan challenge ini, aku melakukan proses desain menggunakan metode design thinking dan mengerjakannya semua secara mandiri.
Challenges
Pada penyelesaian desain ini, hal yang menurut saya menantang adalah bagaimana saya dapat melakukan riset dan mendefine pain point yang dirasakan oleh user dan menemukan solusi yang dapat menjawab permasalahan tersebut dengan melakukan semuanya secara mandiri.
Processes
To make an application that is useful for users, aku pakai metode design thinking dalam menyelesaikan permasalahan diatas.
​
Design thinking is creative and collaborative problem solving to produce more empathetic and innovative solutions. - By David Kelley and Tim Brown, IDEO founder
. . .
Design Thinking
Step 1. Empathize
First thing first aku melakukan fase empathize yang mana bertujuan untuk mengetahui apa sih pain points yang dirasakan oleh user, what user needs dan juga behavior pelanggan coffee shop ini seperti apa.
Research Plan
Pada step empathize, aku melakukan observasi dengan melakukan user in-depth-interview untuk membantu memvalidasi hipotesisku.
Research Plan
User In-depth-interview guide
Stimulus riset
User Interview
Sebelum menyusun research plan, secara pribadi sudah memikirkan hipotesis dari permasalahan yang ada. Lalu mulai menyusun stimulus riset untuk interview user. Interview user dilakukan untuk mencari tahu lebih lanjut mengenai behavior, pain points, dan kebutuhan user. Interview dilakukan kepada user yang pernah melakukan transaksi pembelian di coffee shop. Aku melakukan interview ke 3 responden.
​
Berikut adalah dokumen hasil wawancara:
. . .
Step 2. Define
Setelah mendapatkan insights dari user, data tersebut dianalisis dan dibuat user persona untuk membantu saya dalam mendefine tipe user seperti apa yang akan memakai aplikasi temankopi ini.
User Persona
Berikut adalah user persona dari aplikasi temankopi. Untuk mengembangkan aplikasi ini, aku memakai user persona ini untuk membantu mendefine target user aplikasi ini. Target user aplikasi ini adalah mereka yang sering ngopi atau nongkrong bareng temen ataupun kolega kerja mereka. User merupakan generasi yang melek digital dengan pemakaian aplikasi yang beragam, mulai dari digital banking, media sosial dan juga daily apps seperti GoJek.
User Persona
User Journey
User journey digunakan untuk membantu tracking di fase apa user merasa masih kurang bahagia atau bahkan kesal. Aku membuat user journey dengan skenario user merencanakan ingin ngopi bareng temen mereka di sebuah coffee shop.
User Journey
Dilihat dari user journey, step user merasa sad/unhappy adalah saat melakukan pembayaran pesanan, mencari bangku atau tempat duduk dan juga menunggu pesanan mereka. Dari pain points tersebut bisa didapat room for improvement untuk membuat experience user lebih bagus.
Competitor Analysis
Untuk membantu dalam mendapatkan solusi untuk memecahkan permasalahan yang ada, aku melakukan riset kompetitor untuk mencari tahu fitur dan keunggulan dari aplikasi serupa. Dalam hal ini aplikasi yang serupa adalah Jiwa+, Kopi Kenangan, dan Fore Coffee.
Competitor Analysis
. . .
Step 3. Ideate
Pada step ini, setelah mendapatkan permasalahan user seperti apa mulai memikirkan atau meng-idetaion solusi dari permasalahan yang ada. Customer problems adalah sebagai berikut:
1. Pilihan pembayaran yang tidak fleksibel
2. Kemudahan mengetahui kondisi keramaian coffee shop
3. Antrian terlalu panjang sehingga tidak bisa memperkirakan berapa lama user harus menunggu pesanan hingga jadi.
​
Dari problem yang ada, aku mendapatkan beberapa solusi yaitu dengan
1. Memberikan informasi banyaknya pengunjung coffee shop secara real-time di aplikasi
2. Menyediakan fitur self pick-up, reservasi ruangan, dan juga pengantaran
Color Ideation
Dalam menentukan warna primer aplikasi ini, aku memakai identitas warna kopi yaitu coklat. Aku mencari-cari warna yang cocok untuk aplikasi ini lalu mencari warna turunannya dengan menggunakan plugin Tints and Shades yang ada di figma. Warna neutral digunakan untuk menyeimbangkan warna agar tidak terlalu colorful, warna primary adalah warna dari aplikasi sehingga warna tersebut akan sering digunakan, sedangkan warna secondary biasanya digunakan untuk aksen dengan penggunaan hanya kurang dari 30% dari keseluruhan aplikasi.
Neutral Color
Primary Color
Secondary Color
Text Styles
Aplikasi ini memakai typeface "Inter" yang dapat menciptakan kesan santai, milenial, dan fancy. Setelah itu, aku membuat text styles untuk dipakai ke aplikasi agar konsisten.
Text Styles
. . .
Step 4. Prototype
Step selanjutnya adalah prototyping, Setelah mengetahui aplikasi seperti apa yang ingin dibuat, lalu membuat low fidelity design atau biasa disebut wireframe dan mempercantik desain tersebut menjadi high-fidelity design
Wireframe
Wireframe berguna untuk memberi gambaran kepada stakeholder seperti apa aplikasi yang akan dibuat. Agar tidak terlalu jauh apabila dirasa masih ada data atau bagian yang tidak dimunculkan diaplikasi.
Wireframe
High Fidelity Design
Setelah itu, aku membuat desain high-fidelity dengan member warna, text styles, komponen dan ilustrasi. Setelah jadi, mulai membuat prototyping agar user dapat menjalankan seperti layaknya aplikasi jadi dan mereka mendapatkan gambaran aplikasi ini.
Please click the italic link below to try the prototypes.
. . .
Step 5. Test
Last but not least, aku melakukan testing ke user untuk memvalidasi dan mendapatkan feedback dari user. Aku melakukan moderated usability testing via Zoom Meeting yang mana aku memandu dan memantau pergerakan, ekspresi, perkataan, dan user goals. Di testing ini, aku hanya meminta user untuk melakukan 2 task saja yaitu registrasi dan reservasi tempat ngopi. Tujuan dari usability testing kali ini adalah 1. Untuk mencari tahu apakah desain interface sudah sesuai dengan pengguna, 2. Untuk mencari tahu bagaimana experience pengguna saat menggunakan aplikasi, dan 3. Untuk mencari tahu kesulitan yang dialami pengguna saat menggunakan aplikasi. Aku melakukan usability testing kepada 5 user dengan sample specification seperti user persona di awal.
Test Results
Here are the results of testing :
​
Semua user berhasil menyelesaikan task dengan mayoritas waktu < 30 detik pada masing-masing page, tetapi
1. Satu user tidak melakukan apply promo
2. Satu user bingung memilih ruangan
3. Dua user merasa bingung setelah memilih metode pembayaran
4. Satu user masih awam dengan prototyping figma, sehingga kagok diawal
Setelah user melakukan user task mereka, aku meminta opini mereka dengan membuka discussion session untuk mencari tahu lebih dalam feedback yang mereka rasakan. Setelah itu aku meminta mereka untuk mengisi form yaitu penilaian SUS (System Usability Sckae) untuk mendapatkan jawaban kuantitatif dari usability testing yang telah aku lakukan.
SUS Result
Berdasarkan hasil SUS didapat hasil skor 73.5. Jadi, berdasarkan SUS Score diatas usability testing yang telah dilakukan menunjukkan bahwa adjective ratings aplikasi berada pada kategori “GOOD”, dengan grade scale “C”, dan ada pada acceptability ranges yaitu “ACCEPTABLE”.
Need to be discuss/improve
Dari usability testing yang telah dilakukan, bisa didapat hasil yaitu:
1. Entry point bagian promo bisa diubah agar lebih stand out
2. Revamp page metode pembayaran
3. Revamp page input PIN
4. Revamp flow pilih ruangan reservasi
Berikut adalah beberapa dokumen yang membantu dalam pelaksanaan usability testing kali ini:
​
. . .
Closing
That’s all the explanation of my case study project. Through all the data and the application of design thinking, I got a lot of insight and made several opportunity ideas.
​
Aku mendapatkan banyak insight dan wawasan baru terkait dengan design thinking dan juga usability testing, hope will be useful for me in the future. Feel free to comments, I am very open to receiving feedback and suggestions. Thank you for your time and attention to read :)
​
Thanks to:
- Kak Korniawan Prabowo as a Fasilitator in UI/UX 10 Class
- Binar Academy