UI/UX Case Study: Redesign Sign-In and Homepage KRL Access

I Hafizal
9 min readAug 3, 2022

--

i. Introduction

Menjadi seorang UI/UX akan menjalani hari dengan beragam tantangan. Mencoba menemukan solusi dari berbagai permasalahan. Setiap prosesnya perlu dicermati dengan baik. Sehingga ide didapatkan untuk memberikan solusi yang tepat.

ii. Overview

KRL Access hanya mendapatkan rating 2.0 di apps store. Banyaknya review bahwa KRL Access tidak dapat membantu mereka dalam memenuhi kebutuhannya.

Maka project ini dilakukan guna untuk dapat mengetahui hal yang perlu ditingkatkan ataupun diperbaiki sehingga dapat membantu user dalam mengatasi permasalahannya.

Role: UX Researcher, UX Designer
Scope: User Research, Analyzing, User Flow, Information Architecture, Wireframing, Mock-up, Design System, Prototyping, Usability Test
Tools: Google Form, Google Sheet, Adobe Photoshop, Figma, Voice Recorder, Video Recorder

iii. Process

https://www.maqe.com/insight/the-design-thinking-process-how-does-it-work/
Design Thinking (Source: maqe.com)

Pelaksanakan project ini dilakukan dengan kerangka kerja yang tepat untuk menghasilkan solusi yang sesuai. Studi kasus ini menggunakan Design Thinking, yaitu bermula dari empathize, define, ideate, prototype dan test.

1. Empathize

Tahap awal ini dilakukan untuk menemukan permasalah yang ada. Sehingga perlu dilakukan: Planning Research; Making Research Guideline; dan Conducting Research.

1.2 Background

KRL atau commuter line telah menjadi transportasi umum yang populer untuk mereka yang akan melakukan aktivitas rutin harian dan juga bagi mereka yang sekedar akan menggunakannya untuk tujuan tertentu. (Data pengguna KRL)

KRL Access aplikasi yang memberikan informasi tentang commuter line bisa menjadi solusi atas mereka yang ingin mencari rute kereta yang sesuai tujuan mereka, jadwal kereta yang akan digunakan, dan informasi lainnya yang dapat membantu para pengguna kereta commuter line.

Dengan research ini diharapkan dapat menemukan permasalahan sekaligus kebutuhan para pengguna commuter line dengan aplikasi KRL Access.

1.3 Existing App

Aplikasi KRL Access dikembangkan oleh PT. Kereta Commuter Indonesia yang berinovasi dalam memberikan informasi tentang commuter line. Dengan aplikasi ini, para pengguna transportasi kereta commuter line di Jabodetabek dan Yogyakarta dapat mengetahui keberadaan kereta yang akan digunakan dan rute kereta tersebut.

KRL Access Pages

Hanya saja masih banyak review buruk bermunculan karena dirasa aplikasi KRL Access kurang mampu memberikan kenyamanan dalam menyampaikan informasi dan kenyamanan dalam penggunaannya.

KRC Access Bad Review

Salah satu review buruk aplikasi KRL Access adalah mengenai proses sign-in dan sign-up yang tidak dapat membantu para pengguna.

1.4 Planning Research

1.4.1 Research Timeline

Research Timeline

Perencanaan dalam melakukan research dimulai dari 15 Juni hingga research telah menjadi report pada tanggal 15 Juli. Maka secara keseluruhan research dilakukan selama 4 pekan.

1.4.2 Objective

Ada tiga objektif yang menjadi acuan dalam melakukan research ini, yaitu:

  1. Untuk mengetahui keefektifan aplikasi KRL Access
  2. Mengetahui kesulitan user ketika menggunakan KRL Access
  3. Memahami kebutuhan user dalam menggunakan KRL Access

1.4.3 Methodolgy

Research ini dilakukan dengan metode kualitaitf, In-Depth Interview (wawancara mendalam) disertai review pada aplikasi yang sudah ada.

1.4.4 Sample Specification

  1. Pengguna commuter line
  2. Laki-Laki/Perempuan
  3. Usia 20 - 30 >
  4. Mengetahui aplikasi KRL Access
  5. Tidak mengetahui KRL Access

1.4.5 Key Information Areas

Informasi utama yang akan digunakan sebagai acuan dalam membuat bahan pertanyaan:

  1. Profile responden
  2. Menggunakan commuter line
  3. Kesulitan pengguna dalam mencari informasi tentang commuter line
  4. Mengetahui aplikasi KRL Access

1.5 Making Research Guideline

Setelah menyusun research plan, selanjutnya dibuat daftar pertanyaan (question guideline) untuk melakukan IDI (In-Depth Interview). Berikut daftar pertanyaan penting meliputi key information areas yang memerlukan penjelasan responden terhadap aplikasi KRL Access. Ada pun pertanyaan lainnya berupa alasan, hambatan, dan ekspektasi responden terhadap aplikasi.

  1. Apakah kamu sering menggunakan commuter line?
  2. Apakah kamu menggunakan KRL Access?
  3. Bagaimana tanggapan kamu setelah menggunakan KRL Access?

1.6 Conducting Research

Form Results

Pemilihan responden dilakukan melalui form singkat guna menemukan responden dengan spesifikasi yang sesuai. Sehingga IDI bisa dilakukan dengan responden yang sesuai dengan kebutuhan research.

Sounds Recording

Proses wawancara dilakukan secara tatap muka dan rekam suara selama wawancara berlangsung. Pertemuan dilakukan guna mendapatkan proses yang lebih interaktif antara researcher dan responden.

2. Define

2.1 Affinity Map

Setelah melakukan IDI, maka akan diperoleh beberapa point informasi yang dapat dikelompokkan. Menggunakan teknik affinity map dapat membantu untuk menyortir dan mengelompokkan pemikiran responden. Sehingga memudahkan dalam mengetahui pain point yang dialami responden ketika menggunakan KRL Access.

Berikut bentuk dari affinity map yang telah disortir dan dikelompokkan:

Affinity Map

2.2 User Persona

Dengan menggunakan karakter fiksi yang mewakili responden. User Persona membantu dalam mengidentifikasi dan memecahkan masalah yang dialami.

Pada case study ini terdapat dua user persona yang mewakili KRL Access User dan Non - KRL Access User.

2.2.1 User Persona: KRL Access User

User Persona: KRL Access User

User persona yang menggambarkan responden sebagai pengguna KRL Access juga sebagai pengguna trasnportasi commuter line, jelas membutuhkan informasi untuk setiap hal tentang commuter line. Dari jadwal kereta tiba dan kereta berangkat hingga informasi tentang alat pembayaran yang sudah sesuai dengan kebutuhan perjalanan.

2.2.2 User Persona: Non - KRL Access User

User Persona: Non — KRL Access User

Bagi beberapa orang yang tidak selalu menggunakan commuter line sebagai transportasi mereka, maka aplikasi KRL Access pun dirasa tidak diperlukan. User persona ini menggambarkan responden yang bukan pengguna KRL Access. Meski memang terkadang informasi mengenai commuter line memang dibutuhkan. Namun aplikasi KRL Access bukan menjadi pilihan sebagai sarana dalam mencari sumber informasi yang dibutuhkan.

2.3 User Journey Map

Untuk mengetahui hal-hal yang dirasakan dan dipikirkan pengguna KRL Access. Digunakan lah User Journey Map. Dengan ini dapat ditemukan informasi detail seperti paint point, perasaan ketika menggunakan aplikasi, dan opportunities dalam pengembangan atau perbaikan aplikasi.

User journey map ini terbagi menjadi dua antara KRL Access User dan Non — KRL Access User.

2.3.1 User Journey Map: KRL Access User

User Journey Map: Find Information on KRL Access

Bagi pengguna KRL Access tentu sudah terbiasa berselancar di aplikasi KRL Access untuk mencari informasi yang diperlukan mengenai commuter line. Dengan user journey map ini dapat diketahui jika pengguna KRL Access masih memiliki kendala ataupun masalah ketika menggukan aplikasi tersebut.

Dalam hal ini pengguna KRL Access pun terkadang masih sulit mengetahui cara membaca beberapa informasi yang digambarkan dalam aplikasi.

2.3.2 User Journey Map: Non - KRL Access User

User Journey Map: Open KRL Access

User journey map ini mengetahui ketika seseorang yang bukan pengguna KRL Access mencoba untuk membuka KRL Access. Sehingga ditemukan permasalahan bagi yang bukan pengguna biasa KRL Access ketika mencoba aplikasi tersebut.

Hal ini memperlihatkan bahwa ada permasalahan ketika akan masuk ke dalam aplikasi yang memerlukan akses masuk seperti sign-in atau sign-up.

2.4 Problems

Dari hasil affinity map dan user journey map yang telah dibuat, ada tiga masalah yang dihadapi ketika menggunakan aplikasi KRL Access.

  1. Proses sign-in atau sign-up untuk masuk kedalam aplikasi yang dirasa tidak diperlukan
  2. Proses sign-up yang dirasa membuang waktu
  3. Informasi dengan desain atau element atau icon yang sulit dipahami

2.5 Reference Analysis

Untuk mendapatkan solusi yang tepat dari permasalahan yang ada, maka dilakukan mencari referensi dengan melihat aplikasi lain.

2.5.1 Reference Apps: KAI Access

Aplikasi KAI Access adalah aplikasi yang melayani penjualan tiket kereta secara online. Karena ini aplikasi penjualan, maka sudah pasti ada transaksi yang terjadi di dalam aplikasi ini. Namun, KAI Access tidak mengharuskan user untuk melakukan sign-in atau sign-up terlebih dahulu.

KAI Access Pages

User tetap bisa mencari tiket kereta sesuai jadwal yang diinginkan tanpa harus melakukan sign-in.

Hingga sign-in dibutuhkan ketika user sudah akan memasuki tahap transaksi atau pembelian tiket kereta.

2.5.2 Reference Apps: Livin by Mandiri

Livin by Mandiri Pages

Aplikasi Livin by Mandiri memiliki fitur cek saldo e-Money. Fitur ini bisa diakses tanpa mengharuskan user untuk melakukan sign-In. Bahkan kemungkinan fitur ini juga bisa digunakan tanpa harus memiliki rekening Mandiri.

Hal ini mengartikan bahwa setiap orang memang bisa memiliki e-Money. Seperti halnya banyak orang juga bisa memiliki Kartu Multi Trip (KMT) commuter line.

2.6 Recommendation

Ada beberapa rekomendasi yang dapat dilakukan untuk memperbaiki beberapa hal dalam mengakses aplikasi KRL Access:

  1. Mempersingkat proses sign-in dan sign-up untuk masuk ke dalam aplikasi
  2. Memberikan elemen desain yang mudah dimengerti dalam memberikan informasi
  3. Memberikan copywriting yang mudah dimengerti dalam memberikan informasi
  4. Menampilkan fitur utama tertentu yang langsung ditampilkan di awal ketika membuka aplikasi

2.7 Limitation

  1. Desain mockup dan prototype sebatas hingga tahapan
    - Improvement sign-in dan sign-up
    - Tampilan homepage
    - Pemilihan jadwal kereta
  2. Usability Testing dilakukan dari homepage kemudian melakukan pencarian jadwal kereta

3. Ideate

3.1 Solution

Berikut beberapa hal yang akan dilakukan improvement dari hasil research dan rekomendasi yang ada:

  1. Mempersingkat proses sign-in dan sign-up untuk masuk ke dalam aplikasi (homepage)
  2. Memberikan desain yang terlihat mudah digunakan dan mudah dimengerti untuk menampilkan informasi

3.2 User Flow

User flow digunakan untuk mengetahui tahapan user dalam menggunakan aplikasi. Berikut tahapan yang dilakukan ketika menggunakan KRL Access dari homepage hingga melakukan pencarian jadwal kereta.

User flow

3.3 Information Architecture

Information Architecture (IA) adalah metode yang digunakan untuk mengatur semua tahapan, button, dan hal-hal yang berkaitan dengan desain dalam aplikasi. IA pada aplikasi KRL Access ini akan berupa fitur-fitur penting yang dapat digunakan user guna melakukan kebutuhan mereka dalam penggunaan transportasi commuter line.

Information Architecture

3.4 Wireframe

Wireframe

Sebelum membuat mockup, diperlukan wireframe untuk memberikan kemudahan dalam melakukan desain yang lebih berisi dan berwarna. Untuk redesign KRL Access, membuat wireframe membantu untuk mempermudah untuk menyampaikan ide dalam improvement yang dilakukan.

3.5 Mockup

Berikut merupakan mockup yang telah dibuat setelah mendapatkan segala sumber ide dari research yang dilakukan dan pertimbangan lainnya.

Mockup

3.6 Design System

Selagi membuat mockup, dilakukan juga pembuatan design system guna memberikan kemudahan dalam pengaturan komponen atau elemen atau icon yang diperlukan dalam melakukan design aplikasi.

Dalam redesign KRL Access ini, warna merah yang sudah menjadi ciri khas aplikasi KRL Access yang ada tetap menjadi warna utama.

Design System

4. Prototype

Setelah melakukan tahap emphatize, define, dan ideate maka selanjutnya pembuatan prototype. Prototype untuk redesign KRL Acces ini dibuat menggunakan Figma.

Prototype Flow

Prototype berisikan 17 pages screen yang berawal dari homepage dan beberapa eksplorasi fitur. Termasuk juga di dalamnya tahapan sign-in dan sign-up ketika akan masuk ke profile user. Berikut link prototype:

Prototype Redesign KRL Access

5. Usability Test

5.1 Planning Test

5.1.1 Participant Criteria

Untuk melakukan test terhadap prototype yang telah dibuat. Maka direncakan untuk menemukan partisipan yang sesuai dengan kriteria yaitu

  1. Pengguna commuter line
  2. Laki-Laki/Perempuan
  3. Usia 20–30 >
  4. Pengguna aplikasi KRL Access
  5. Pernah mengetahui/mencoba aplikasi KRL Access

5.1.2 Method Test

Test akan dilakukan secara kualitatif dan partisipan akan melakukan Thinking Out Loud (TOL). Partisipan akan mebukan prototype yang telah dibuat di figma kemudian melakukan eksplorasi pada prototype tersebut.

Proses test akan direkam sehingga mengetahui yang dipikirkan oleh partisipan terhadap prototype.

5.2 Test Result

Usability Testing Check Schedule

Untuk melihat report mengenai Usability Testing bisa dilihat melalui link artikel di bawah ini:

Usability Test Report: KRL Access Redesign

6. Summary

Aplikasi KRL Access yang banyak mendapatkan bad review menjadi tantangan tersendiri untuk mengerjakan case study tanpa rasa personal berlebih. Sehingga case study dikerjakan sesuai tahapan yang tepat. Redesign yang dilakukan pun dilakukan sesuai dengan kebutuhan.

Dengan ini, usability test sangat diperlukan untuk mengetahui keefektifan redesign yang ada. Sehingga dapat mengetahui kekurangan design dan dapat dilakukan iteration.

7. Lesson Learned

  1. Sangat menyenangkan melakukan tahapan design thinking karena dapat mengerjakannya secara runut dan dapat melengkapi setiap tahapan yang lainnya. Melakukan UX Research case study ini memberikan saya pemahaman bahwa akan ada pandangan yang berbeda dari user meski pun menggunakan aplikasi yang sama. Tanpa pandang siapa pemilik aplikasi, jika dirasa kurang membantu user bisa dengan mudah meninggalkan aplikasi tersebut untuk digunakan. Walaupun di satu sisi user menyadari seberapa penting dan butuhnya fitur di dalam aplikasi tersebut. Terima kasih kepada setiap responden dan partisipan yang membantu proses case study ini hingga akhir. Saya sangat menghargai kontribusi yang diberikan.
  2. Redesign UI yang dilakukan tentu dengan segala pertimbangan hasil research dan idea secara individu. Tentu perubahan total dari desain yang dibuat menjadi pengalaman bahwa accesibility pada suatu aplikasi mempengaruhi loyalitas user untuk tetap menggunakan aplikasi tersebut.

Silakan tinggalkan komentar untuk memberikan dukungan atau memberitahukan kesalahan yang ditemui dalam case study ini.

Terima kasih sudah membaca case study ini hingga akhir. Silakan connect dengan saya di linkedin.

--

--