UX Case Study: Redesain Aplikasi Suroboyo Bus (GOBIS) Untuk Peningkatan Pengalaman Pengguna
I. Overview
Suroboyo Bus adalah salah satu layanan bus dalam kota yang berada di Kota Surabaya. Pembayaran perjalanan suroboyo bus menggunakan sampah plastik sebagai tiket. Pengguna suroboyo bus dapat menukarkan sampah plastik sesuai dengan jumlah yang ditentukan sebagai tiket naik secara langsung [1]. Pengguna juga dapat menukarkan samplah plastik ke tempat penampungan yang nantinya diubah menjadi poin untuk di scan ke kernet bus. Aplikasi suroboyo bus (GOBIS) digunakan untuk mengetahui tracking secara realtime posisi bus pada tampilan map. Selain itu di aplikasi terdapat beberapa jalur angkutan umum, tempat wisata Surabaya, dan destinasi kuliner yang dilewati oleh Suroboyo bus.
Personal UX Case Study [2] ini merupakan salah satu personal portfolio sebagai UI/UX Designer oleh penulis. Selain itu, penulis sebagai pengguna suroboyo bus merasakan keresahan atau problem terhadap pengalamaan saat menggunakan aplikasi GOBIS sehingga penulis berinisiatif untuk membuat case study terhadap aplikasi ini.
II. Problem statement
Masalah yang dialami saat penulis menggunakan Aplikasi GOBIS untuk naik Suroboyo Bus diantaranya:
· Penulis ingin menggunakan suroboyo bus dan telah menginstal aplikasinya, di aplikasi maupun halte tidak adanya informasi jadwal bus yang akan datang.
· Di aplikasi terdapat fitur scan qr code yang kodenya tertempel di halte, namun setelah mencobanya tidak terjadi apa-apa. Setelah bus datang ternyata bus hanya menerima satu penumpang saja dan langsung jalan kembali kemungkinan penuh, sehingga harus menunggu bis selanjutnya lewat dan cukup menunggu lumayan lama. hal-hal tersebut membuat cukup kesulitan ketika ingin menaiki bus sby.
Masalah tersebut masih merupakan asumsi dari penulis yang dirasakan ketika menggunakan aplikasi dilapangan secara langsung. Nantinya akan dibuktikan pada proses user research, apakah masalah yang dialami penulis juga dialami oleh pengguna lain.
Tujuan dari Case Study ini adalah untuk meningkatkan pengalaman pengguna sesuai kebutuhan sehingga lebih terbantu ketika menggunakan fitur aplikasi GOBIS saat akan naik Suroboyo Bus.
III. User & Audience
Case Study ini ditunjukan untuk pengguna Suroboyo Bus yang memakai Aplikasi GOBIS (Android) sebagai alat bantu transportasi. Selain itu Case Study ini juga dapat digunakan sebagai saran atau rekomendasi kepada Developer Aplikasi GOBIS jika dianggap membantu.
IV. Roles & Responsibilities
Case study ini dikerjakan oleh dua orang yaitu Muhammad Rizal Firmanda dan Nur Khomairoh. Semua role dikerjakan secara kolaborasi mulai dari UX Researcher, UX Designer, dan UI Designer.
V. Scope & Constrains
Pada Case Study ini memiliki limitasi yaitu proses research dilakukan secara online dengan orang yang terbatas. Pengerjaan juga dilakukan tidak dengan penuh waktu dalam satu hari dikarenakan mengikuti waktu kosong oleh penulis sekitar 3–6 jam per hari. Namun, Case Study ini tetap dikerjakan dengan penuh effort dan kolaborasi oleh penulis. Waktu yang dibutuhkan untuk menyelesaikan Case Study ini hingga dokumentasi yaitu selama 1 bulan 1 minggu.
VI. Tools
Tool yang penulis gunakan saat proses pengerjaan antaralain Google Meet, Zoom, Whatsapp, Miro, Figma, Maze.design, Google Form, Ms. Office Word.
VII. Process
Kami menggunakan Design Thinking [3] sebagai proses pengerjaan Case Study ini, proses dijelaskan sebagai berikut:
1. Empathize
Proses pertama adalah proses empathize [4] pada proses user research kami menggunakan dua metode yaitu menggunakan data dari review playstore dan user interview. Kami menggunakan review playstore karena terinspirasi dari UX Case Study dari @aldi_baihaqi [5]. Review dari playstore ini kami gunakan sebagai data awal untuk mengetahui apa yang menjadi pain point ketika menggunakan aplikasi GOBIS.
Kami mengumpulkan 40 data komentar dari playstore yang relevan mengenai keresahan ketika pengguna menggunakan aplikasi GOBIS. hasil dari data yang kami kumpulkan kemudian kami kelompok kan berdasarkan beberapa kategori yang ditunjukan pada gambar 2.
Berdasarkan data playstore tersebut, kami mengelompokan menjadi 7 kategori yaitu bugs (program), posisi bus dari user, jam kedatangan dan keberangkatan bus, jam operasional bus, jumlah kuota penumpang, informasi penggunaan bus, dan QR Code. Kemudian kami prioritaskan masalah yang dapat diatasi yaitu semua kategori selain Bugs.
Kemudian kami melakukan user interview untuk mengetahui insight pengguna lebih dalam lagi. Kami mengumpulkan 5 user untuk di interview, jumlah user ini berdasarkan saran minimum oleh NN Group [6]. Sebelum interview kami menentukan kriteria yang akan diinterview, kriteria tersebut antaralain:
· Laki-laki atau perempuan Berusia 17 keatas
· Menggunakan OS Android
· Menggunakan Aplikasi GOBIS untuk naik SBY Bus
Setelah menentukan kriteria kemudian kami menyiapkan pertanyaan yang akan dieksekusi saat user interview. Berikut pertanyaan yang dajukan antara lain:
1) Apakah anda tau tata cara penggunaan suroboyo bus?
dimana anda mengetahui tata cara tersebut?
2) Apakah anda sudah tau lokasi halte terdekat dari tempat anda berada?
Bagaimana cara anda mengetahuinya?
3) Ketika akan menggunakan atau naik suroboyo bus, kapan anda berangkat menuju ke halte?
Biasanya menunggu dimana?
Kenapa anda menunggu di tempat tersebut?
4) Apakah sebelumnya anda tau jam operasional suroboyo bus?
Jika tau, bisa dijelaskan tau dari mana?
5) Apakah anda tau jam kedatangan bus hingga sampai ke halte?
Lalu kegiatan apa yang anda lakukan hingga bus datang ke halte?
Apakah anda tau waktu tunggu bus di suatu terminal/halte?
Apakah anda tau berapa lama estimasi waktu tiba bus di halte/terminal tujuan anda?
6) Apakah anda pernah menjumpai qr code di halte/terminal?
Apakah anda tau fungsi dari qr code tersebut?
Bagaimana pengalaman anda dalam menggunakan qr code tersebut?
7) Apakah anda tau jumlah kuota penumpang di dalam bis yang akan anda tumpangi?
Apakah anda mempunyai pengalaman mengenai kuota penumpang? Seperti kepenuhan misalnya.
8) Waktu di dalam bus, apakah anda masih menggunakan aplikasi sby bus?
jika iya bisa diceritakan anda menggunakannya bagaimana?
9) Bagaimana pendapat anda mengenai tampilan aplikasi suroboyo?
Kami menggunakan Google Meet untuk melakukan user interview kepada 5 orang pengguna Gobis yang telah kami temukan sesuai kriteria yang telah ditentukan. Pada gambar 4 merupakan salah satu contoh dokumentasi saat melakukan user interview.
2. Define
Pada tahap Define dilakukan affinity diagram untuk mensintesis data hasil interview, point of view (POV) untuk memperoleh actionable problem statement atau design challenge, dan how might we (HMW) untuk generasi ide dalam penyelesaian design challenge [7]. Hasil data dari interview yang ada di masukkan kedalam affinity diagram. Affinity diagram dapat dilihat pada gambar 5
Data-data dalam affinity diagram tersebut kemudian dilanjutkan dengan mensortir data yang mirip atau similar kemudian dilakukan grouping ke dalam beberapa kategori. Hasil dari grouping atau mensintesis data affinity diagram ditunjukan pada gambar 6.
Pada kategori block merah dan block ungu merupakan behavior dari pengguna yang ditemukan. Block oranye merupakan pain point dari pengguna, kemudian block hijau dan biru merupakan komentar dan saran dari pengguna. Hasil dari kategori tersebut kemudian diprioritaskan dengan metode Prioritization Matrices [8] untuk mengetahui masalah yang paling penting untuk dikerjakan terlebih dahulu. Kategori yang paling penting dari hasil Prioritization Matrices adalah jam kedatangan bus, jumlah penumpang, ditolak bis, jam operasional, rincian rute, qrcode dan penggunaan aplikasi pihak ketiga. Hasil diagram Prioritization Matrices ditunjukan pada gambar 7.
Kategori yang telah dipilih menjadi prioritas kemudian diubah ke dalam problem statement yang actionable dengan point of view (POV). POV menggunakan format dari Interaction Design Foundation [9] yang hasilnya ditunjukan pada Tabel 1.
Setelah mendefinisikan design challenge pada POV, kemudian dilakukan generasi ide untuk menyelesaikan design challenge dengan menggunakan metode pertanyaan how might we (HMW) [9]. Berikut merupakan hasil dari HMW ditunjukan pada gambar 8.
Kami juga membuat user persona [10] berdasarkan data-data yang telah diproses sebelumnya. User persona ini nantinya dapat membantu dalam proses ideasi. Berikut merupakan persona yang telah dibuat ditunjukan pada gambar 9.
3. Ideation
Pada tahap ideasi ini, dilakukan brainstorming ide berdasarkan POV dan HMW sebelumnya. Kami berinisiatif menggunakan crazy 8 [11] untuk generasi ide lebih cepat pada pikiran setiap orang. Berikut merupakan hasil crazy 8 ditunjukan pada gambar 10 dan 11.
Setelah itu dilakukan diskusi untuk penyatuan ide diantara dua skesta hasil brainstorming. Hasil ide yang diusulkan antaralain:
· Membuat fitur pencarian pada home untuk memasukan lokasi tujuan secara langsung
· Menambahkan informasi rute perjalanan bis (transit) setelah dilakukan pencarian lokasi tujuan
· Membuat banner informasi terbaru pada halaman home
· Pada pencarian bis melalui koridor ditambahkan fitur my location
· Menambahkan informasi bus terdekat setelah mengetahui my location (berupa card)
· Menambahkan infromasi estimasi menit waktu datangnya bus digabung dengan informasi bus terdekat (berupa card)
· Menambahkan informasi jumlah penumpang ketika bus diklik
Kemudian membuat userflow perjalanan pengguna mulai dari membuka aplikasi hingga menemukan rute. User flow dibuat dengan dua opsional yaitu pertama mencari rute perjalanan melalui koridor SBY Bus yang telah ada sebelumnya dan yang kedua dengan cara baru yang diusulkan yaitu dengan metode pencarian lokasi hingga menemukan halte dan bis. User flow yang telah dibuat ditunjukan pada gambar 12.
Setelah membuat flowchart kemudian dilanjutkan dengan membuat sitemap. Berikut merupakan usulan sitemap yang akan digunakan ditunjukan pada gambar 13
4. Prototype
Pada prototipe ini dilakukan design low fidelity, high fidelity dan prototipe menggunakan figma. Aturan dan design system menggunakan material design guidelines dan material baseline kit. Komponen yang digunakan ditunjukan pada gambar 14.
KLIK LINK INI untuk — >>>> Porototype
5. Testing
Proses testing menggunakan unmoderated usability testing dengan aplikasi pihak ke 3 yaitu maze.design. Sebelum melakukan testing dilakukan perencanaan skenario frame yang akan ditesting nanti, skenario yang telah dibuat ditunjukan pada tabel 2.
Partisipan yang akan direkruit adalah 5 orang yang sama saat dilakukan use rinterview sebelumnya. Partisipan juga difasilitasi dan dipandu melalui zoom meeting atau Whastapp saat melakukan usability testing. Berikut merupakan salah satu dokumentasi saat melakukan usability testing dengan zoom dan maze.design.
Hasil report ke dijelaskan sebagai berikut:
6. Iterasi 1
Setelah ada report hasil usability, kemudian dilakukan perulangan atau iterasi ke 1 dengan langsung ke ideasi apa saja yang harus diperbaiki. Kami menggunakan tool feedback grid dari IBM [12] untuk menganalisis dan mendapatkan ideasi. Berikut merupakan hasil feedback grid ditunjukan pada gambar 16.
Pada feedback grid dihasilkan ide diantaranya:
· Menambahkan pop up info bahwa dapat melihat penumpang dengan melakukan klik bis.
· Menempatkan menu kordior ke area tengah bukan di botom bar, dan merubah nama ke aslinya yaitu SBY Bus.
· Pada scan diberi background overlay agar background scan dan menu tidak menyatu putih
· Memperbaiki ukuran close pada scan.
· Menambahkan informasi point tukar tiket pada home sehingga user tidak ragu kekurangan poin saat ingin menukar.
Setelah itu dilanjutkan merevisi desain sesuai hasil ide yang ditemukan.
KLIK DISINI UNTUK COBA ITERASI KE-2 — >>> PROTOTYPEV2
7. Testing Iterasi 1
Setelah membuat high fidelity dan telah dilakukan prototype kemudian dilakukan usability testing kembali dengan maze.design. testing diterapkan hanya 3 skenario diantaranya task naik SBY Bus via Kordior, melihat jumlah penumpang dan mencoba scan. Berikut hasil usability testing yang telah dilakukan.
Maze
System Usability Scale (SUS)
Kami juga melakukan usability testing secara kuantitatif menggunakan SUS kepada kelima partisipan dengan mengisi pertanyaan via google form. Skor SUS menghasilkan nilai 74,5 yang menandakan bahwa nilai skor telah melampaui minimum ketetapan dari Usability Gov yaitu 68 [13].
VIII. Outcome and Lesson
Pada studi kasus ini telah dilakukan beberapa poin redesain yang telah dicapai dalam meningkatkan pengalaman pengguna diantaranya:
· Telah menambahkan solusi desain yaitu fitur pencarian rute bus dengan memasukan lokasi tujuan secara langsung sehingga mengetahui informasi rute perjalanan (transit) sesuai keinginan pengguna.
· Telah menambahkan solusi desain yaitu banner update informasi pada halaman home sehingga membantu pengguna mengetahui informasi update terbaru dari pelayanan suroboyo bus.
· Telah menambahakan solusi desain estimasi waktu kedatangan bus sehingga pengguna dapat memperkirakan ketika ingin berangkat ke halte dan menunggu di halte.
· Telah menambahkan solusi desain informasi jumlah penumpang ketika icon bus diklik sehingga pengguna dapat mengetahui perkiraan orang yang ada didalam bus.
· Telah menambahkan solusi desain fitur scan pada bottom bar home sehingga mempermudah akses scan barcode untuk pengguna yang membayar tiket bus via poin.
Hal yang dapat dipelajari dari studi kasus ini adalah:
· Mengerti akan keadaan pengguna saat akan naik bus adalah hal penting ketika ingin melakukan peningkatan performa aplikasi ini, yang diinginkan pengguna adalah kemudahan dalam mengakses fitur utama. UX Research hingga UI/UX Design perlu merekomendasikan desain yang tepat agar mencapai kebutuhan pengguna. Usulan desain yang tidak mengikuti kebiasaan atau mental model sebelumnya akan mengakibatkan pengguna salah mengerti dalam menggunakan aplikasi.
IX. Reference
[1] F. Taselan, “Naik Suroboyo Bus Berbayar Sampah Plastik,” 2018. [Online]. Available: https://mediaindonesia.com/nusantara/153977/naik-suroboyo-bus-berbayar-sampah-plastik.
[2] S. DOODY, “How to write a UX case study,” 19 July 2019. [Online]. Available: https://www.invisionapp.com/inside-design/how-to-write-a-ux-case-study/.
[3] R. F. D. a. T. Y. S. |, “5 Stages in the Design Thinking Process,” Interaction Design Foundation, [Online]. Available: https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process. [Diakses Januari 2021].
[4] D. H. Mortensen, “Stage 1 in the Design Thinking Process: Empathise with Your Users,” interaction-design, [Online]. Available: https://www.interaction-design.org/literature/article/stage-1-in-the-design-thinking-process-empathise-with-your-users. [Diakses 2020].
[5] A. Baihaqi, “Redesign Aplikasi dari Review Playstore,” ux.luky, [Online]. Available: https://www.instagram.com/p/CHPJ7dygGse/. [Diakses 2020].
[6] J. Nielsen, “Why You Only Need to Test with 5 Users,” nngroup, 2000. [Online]. Available: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/. [Diakses 2020].
[7] R. F. D. a. T. Y. Siang, “Stage 2 in the Design Thinking Process: Define the Problem and Interpret the Results,” Interaction Design Foundation, 2019. [Online]. Available: https://www.interaction-design.org/literature/article/stage-2-in-the-design-thinking-process-define-the-problem-and-interpret-the-results. [Diakses 2020].
[8] S. Gibbons, “Using Prioritization Matrices to Inform UX Decisions,” Nielsen Norman Group, 2018. [Online]. Available: https://www.nngroup.com/articles/prioritization-matrices/. [Diakses 2020].
[9] R. F. D. a. T. Y. Siang, “Define and Frame Your Design Challenge by Creating Your Point Of View and Ask “How Might We”,” Interaction Design Foundation, 2020. [Online]. Available: https://www.interaction-design.org/literature/article/define-and-frame-your-design-challenge-by-creating-your-point-of-view-and-ask-how-might-we. [Diakses 2020].
[10] R. F. D. a. T. Y. Siang, “Personas — A Simple Introduction,” Interaction Design Foundation, 2020. [Online]. Available: https://www.interaction-design.org/literature/article/personas-why-and-how-you-should-use-them. [Diakses 2021].
[11] Google, “Crazy 8's,” Google, [Online]. Available: https://designsprintkit.withgoogle.com/methodology/phase3-sketch/crazy-8s.
[12] IBM, “Feedback Grid,” IBM, 2018. [Online]. Available: https://www.ibm.com/design/thinking/page/toolkit/activity/feedback-grid.
[13] Usability.gov, “System Usability Scale (SUS),” usability.gov, [Online]. Available: https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html. [Diakses 2021].
UX Case Study by:
Muhammad Rizal Firmanda | Linkeedin (terhubung yuk :D)
Nur Khomairoh | Linkedin
