RENCANA DESAIN APLIKASI REMO OTODRIVE :

STUDI KASUS MENAMPILKAN INFORMASI MOBIL

TERKAIT DAN MERANCANG SISTEM PICK-UP DAN
DROP-OFF

KERJA PRAKTEK

Disusun Oleh:
Muhammad Yafie Anwary Rahman
190441100052

PROGRAM STUDI SISTEM INFORMASI

JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
BANGKALAN
2022
 LEMBAR PENGESAHAN

Nama : Muhammad Yafie Anwary Rahman

NIM : 190441100052
Judul : Rencana Design Aplikasi Remo OtoDrive : Studi Kasus
Menampilkan Informasi Mobil Terkait dan Merancang
Sistem Pick-Up dan Drop-Off

Kerja Praktek ini dipertahankan dalam Ujian Kerja Praktek di depan

tim penguji pada Tanggal: 6 Juni 2022
Kerja Praktek ini Telah Disetujui dan Disahkan
Bangkalan, 06 Juni 2022
Menyetujui,
Dosen Pembimbing

Sri Herawati, S.Kom., M.Kom

NIP. 19830828 200812 2 002

Mengetahui
Koordinator Kerja Praktek

Dr. Budi Dwi Satoto, S.T., M.Kom

NIP. 19750909 200212 1 001

i
 MOTTO

Jadilah manusia yang bermanfaat untuk orang lain

ii
 ABSTRAKSI

Penyedia layanan transportasi yang menawarkan jasa

penyewaan mobil saat ini banyak dijumpai di kota-kota besar di
Indonesia. Namun beberapa di antaranya masih menggunakan cara
manual yaitu customer harus mengunjungi tempat rental mobil
terlebih dahulu untuk melihat-lihat ketersediaan mobil, lalu booking
dan juga melakukan hal lain yang dibutuhkan dalam proses persewaan
mobil. Hal ini tentunya sangat meresahkan customer jika jarak rumah
customer tersebut jauh dari tempat rental mobil ternyata mobil yang
dicari sedang kosong. Tentu baik dari customer akan merasa dirugikan
baik dari waktu, tenaga dan juga biaya yang dikeluarkan selama
perjalanan. Dengan berbekal teori dan referensi dari beberapa artikel
serta penelitian terkait rental mobil, saya akan mencoba merancang
UI/UX aplikasi Remo OtoDrive yang semoga dapat menyelesaikan
permasalahan yang ada dalam kasus persewaan mobil yang masih
dilakukan dengan cara manual. Dengan menggunakan aplikasi
traveloka sebagai perbandingan saya dalam merancang aplikasi ini,
saya menambahkan terdapat sistem pick-up dan drop-off yang mana
fitur ini tidak terdapat dalam aplikasi traveloka. Rancangan awal
aplikasi ini menggunakan salah satu penyedia layanan persewaan
mobil karena harapannya aplikasi ini kedepannya dapat
dikembangkan dengan baik sehingga dapat semakin mempermudah
user dalam menggunakan rancangan aplikasi yang telah saya buat.
Kata kunci : UI/UX, pick-up, drop-off, Remo OtoDrive, mobil,
persewaan, aplikasi.

iii
 KATA PENGANTAR

Assalamu’alaikum Warahmatullahi Wabarakatuh

Puja dan puji syukur kehadirat Allah Swt., yang telah
melimpahkan rahmat dan hidayah-Nya kepada kita semua, sehingga
penulis dapat menyelesaikan Laporan Kerja Praktek yang berjudul
“Rencana Design Aplikasi Remo OtoDrive : Studi Kasus
Menampilkan Informasi Mobil Terkait dan Merancang Sistem Pick-
Up dan Drop-Off” setelah melaksanakan program Studi Independen
Kampus Merdeka di PT Lentera Benderang pada tanggal 14 Februari
2022 sampai dengan 22 Juli 2022.
Selama pelaksanaan Studi Independen dan penyusunan
proposal ini, Penulis menyadari banyak kesulitan yang dihadapi serta
membutuhkan bantuan dari beberapa pihak, untuk itu Penulis ucapkan
terima kasih kepada:
1. Ibu Sri Herawati, S.Kom., M.Kom., selaku dosen
pembimbing.
2. Tim Binar Academy yang telah memberikan Penulis
kesempatan untuk bisa bergabung dalam program Kampus
Merdeka.
3. Teman-teman kelas Binar UI/UX 25 yang dengan senang
hati membantu mendukung selama proses belajar di Binar
Academy.
4. Kedua Orang Tua yang dengan setulus hati mendukung dan
memfasilitasi belajar penulis.

iv
 5. Para responden yang dengan senang hati meluangkan
waktunya untuk melakukan wawancara dan uji aplikasi.
6. Rekan-rekan program studi sistem informasi Universitas
Trunojoyo angkatan 2019 yang telah membantu dalam
proses penyusunan proposal ini.
7. Serta seluruh pihak terkait yang tidak bisa Penulis tuliskan
satu persatu.
Penulis menyadari bahwa proposal ini tidak luput dari
kesalahan dan masih jauh dari kata sempurna. Oleh karena itu, kritik
saran yang membangun sangat diperlukan agar menjadi bahan
evaluasi dan bisa menjadikan referensi serta perbaikan dalam
penulisan proposal selanjutnya.
Akhir kata, penulis berharap proposal ini dapat bermanfaat
bagi pembaca serta dapat membantu bagi kemajuan serta
perkembangan kegiatan kemahasiswaan Program Studi Sistem
Informasi Fakultas Teknik Universitas Trunojoyo di bidang
akademik. Penulis ucapkan terima kasih banyak kepada semua pihak
yang telah membantu, semoga Allah Swt. membalas semua kebaikan
kalian. Amiin.
Wassalamu’alaikum Warahmatullahi Wabarakatuh.

Tuban, 24 Juni 2022

Penulis,

Muhammad Yafie Anwary Rahman

v
 DAFTAR ISI

LEMBAR PENGESAHAN ................................................................i

MOTTO ............................................................................................ ii

ABSTRAKSI ................................................................................... iii

KATA PENGANTAR ......................................................................iv

DAFTAR ISI .....................................................................................vi

DAFTAR GAMBAR ......................................................................... x

DAFTAR TABEL ........................................................................... xii

BAB I PENDAHULUAN ................................................................. 1

1.1 Latar Belakang.................................................................. 1

1.2 Rumusan Masalah ............................................................ 2

1.3 Tujuan dan Manfaat .......................................................... 3

1.4 Batasan Masalah ............................................................... 3

1.5 Metodologi Pengerjaan Kerja Praktek .............................. 3

1.6 Sistematika Penulisan ....................................................... 4

BAB II PROFIL PERUSAHAAN ..................................................... 6

2.1 Sejarah PT Lentera Benderang ......................................... 6

2.2 Visi dan Misi Binar Academy ........................................... 7

vi
BAB III TEORI PENUNJANG ......................................................... 8

3.1 Mobile Apps ...................................................................... 8

3.2 UI/UX ............................................................................... 9

3.2.2 UI (User Interface) ....................................................... 9

3.2.3 UX (User Experience)................................................ 10

3.3 Design Thinking.............................................................. 10

3.4 Empathize ....................................................................... 11

3.4.1 Observasi .................................................................... 12

3.4.2 Wawancara. ................................................................ 12

3.5 Define ............................................................................. 13

3.5.1 User Persona.............................................................. 13

3.5.2 Pain Point .................................................................. 15

3.5.3 Room for Improvement ............................................... 16

3.5.4 User Journey Maps .................................................... 16

3.6 Ideate .............................................................................. 18

3.6.1 Brainstorming ............................................................ 19

3.6.2 Information Architecture ............................................ 19

3.6.3 Wireframe................................................................... 20

3.6.4 Wireflow ..................................................................... 22

3.7 Prototype ........................................................................ 23

vii
 3.7.1 Design System ............................................................ 23

3.7.2 Moodboard ................................................................. 25

3.7.3 High Fidelity .............................................................. 26

3.8 Test ................................................................................. 26

3.9 Software Editing ............................................................. 27

3.9.1 Figma ......................................................................... 27

BAB IV PERANCANGAN SISTEM .............................................. 28

4.1 Empathize ....................................................................... 28

4.1.1 User Research ............................................................ 29

4.2 Defining .......................................................................... 29

4.2.1 User Persona.............................................................. 30

4.2.2 User Pain Points ........................................................ 30

4.2.3 Problem Statement ..................................................... 31

4.2.4 User Journey Maps .................................................... 31

4.3 Ideation ........................................................................... 32

4.3.1 Information Architecture ............................................ 33

4.3.2 User flow .................................................................... 34

4.3.3 Wireframe................................................................... 35

BAB V IMPLEMENTASI SISTEM ................................................ 43

5.1 Prototyping ..................................................................... 43

viii
 5.1.1 Moodboard ................................................................. 44

5.1.2 Design System ............................................................ 46

5.1.3 Design High Fidelity .................................................. 50

5.2 Testing ............................................................................ 57

5.2.1 Dokumentasi Wawancara................................................ 57

5.3 Design Timeline .............................................................. 67

BAB VI PENUTUP ......................................................................... 69

6.1 Kesimpulan ..................................................................... 69

6.2 Saran ............................................................................... 70

DAFTAR PUSTAKA ...................................................................... 71

DAFTAR RIWAYAT HIDUP ......................................................... 73

ix
 DAFTAR GAMBAR

Gambar 2.1 Logo Binar Academy .................................................... 6

Gambar 3.1 Fase-fase design thinking............................................ 11
Gambar 3.2 Contoh User Persona .................................................. 15
Gambar 3.3 Contoh User Journey Maps......................................... 18
Gambar 3.4 Contoh Wireframe ...................................................... 21
Gambar 3.5 Contoh Wireflow ........................................................ 22
Gambar 4.1 Logo Remo OtoDrive ................................................. 28
Gambar 4.2 User Persona ............................................................... 30
Gambar 4.3 User Journey Maps ..................................................... 32
Gambar 4.4 Information Architecture ............................................ 33
Gambar 4.5 User Flow ................................................................... 34
Gambar 4.6 Wireframe Home as Guest .......................................... 36
Gambar 4.7 Wireframe Awal ......................................................... 36
Gambar 4.8 Wireframe Daftar, Masuk ........................................... 37
Gambar 4.9 Wireframe profil login & no login .............................. 38
Gambar 4.10 Wireframe fitur home ............................................... 39
Gambar 4.11 Wireframe Sewa Saya dan Riwayat .......................... 40
Gambar 4.12 Wireframe Pembayaran ............................................ 41
Gambar 4.13 Wireframe Informasi Mobil ...................................... 42
Gambar 5.1 Moodboard.................................................................. 45
Gambar 5.2 Color System .............................................................. 46
Gambar 5.3 Typography ................................................................. 47
Gambar 5.4 Icon System ................................................................ 48
Gambar 5.5 Button ......................................................................... 48

x
Gambar 5.6 Text Field .................................................................... 49
Gambar 5.7 Status Bar .................................................................... 49
Gambar 5.8 Design Halaman Awal dan Daftar .............................. 50
Gambar 5.9 Design Login .............................................................. 51
Gambar 5.10 Design Halaman Home ............................................. 51
Gambar 5.11 Design fitur filter ...................................................... 52
Gambar 5.12 Design Fitur Pencarian.............................................. 52
Gambar 5.13 Design Fitur Filter Merk ........................................... 53
Gambar 5.14 Design Informasi Mobil ............................................ 54
Gambar 5.15 Design Riwayat dan Fitur Pick-up ............................ 54
Gambar 5.16 Design Sewa Saya..................................................... 55
Gambar 5.17 Design Fitur Pembayaran.......................................... 55
Gambar 5.18 Design Fitur Drop-Off .............................................. 56
Gambar 5.19 Design Akun Login dan Belum Login ...................... 56
Gambar 5.20 Design Timeline........................................................ 67

xi
 DAFTAR TABEL

Tabel 5.1 Persiapan Riset ................................................................ 57

Tabel 5.2 Jawaban Toufan............................................................... 62
Tabel 5.3 Jawaban Ali Gufron......................................................... 63
Tabel 5.4 Jawaban Alfian ................................................................ 65
Tabel 5.5 Hasil Riset Kuantitatif ..................................................... 65
Tabel 5.6 Hasil Riset Kualitatif ....................................................... 66

xii
 BAB I
PENDAHULUAN

Pada bab ini penulis menjelaskan apa yang melatar belakangi

dibuatnya penelitian ini, apa saja rumusan masalah yang nantinya
akan dicarikan solusi, tujuan dan manfaat dibuatnya penelitian ini,
batasan masalah, metodologi yang digunakan dalam pengerjaan kerja
praktek serta bagaimana sistematika penulisan yang akan digunakan.
1.1 Latar Belakang
Mobil adalah salah satu alat transportasi yang banyak digunakan
dalam kehidupan sehari–hari. Mobil yang tersedia banyak sekali
bentuknya. Modelnya juga sangat bagus dan bervariasi. Mobil juga
banyak dimanfaatkan oleh banyak orang untuk alat transportasi,
namun tidak semua orang bisa membeli mobil yang harganya cukup
mahal. Oleh karena itu, muncul beberapa perusahaan yang
menawarkan jasa penyewaan mobil yang biasa disebut rental mobil.
Rental adalah suatu usaha dibidang jasa yang dalam kegiatan
usahanya terdapat unsur yaitu sewa menyewa adalah suatu perjanjian
atau kesepakatan dimana penyewa harus membayarkan atau
memberikan imbalan atau manfaat dari benda atau barang yang
dimiliki oleh pemilik barang yang dipinjamkan[2].
Rental mobil merupakan salah satu bisnis yang menguntungkan
dan sangat berhubungan dengan jasa, karena dengan model kendaraan
yang tidak terlalu banyak seseorang dapat membuka usaha rental
mobil. Bisnis ini juga membantu masayarakat yang memerlukan jasa
persewaan mobil untuk berbagai keperluan[2]. Perusahaan merupakan

1
salah satu perusahaan rental mobil dan dalam kegiatan sewa menyewa
mobil yang mengutamakan pelayanan kepada costumernya. Guna
mengutamakan pelayanan kepada costumer nya maka keakuratan dari
informasi dan kemudahan mendapatkan informasi tentang data
kendaraan merupakan suatu kebutuhan dari perusahaan rental mobil
untuk dapat memperlihatkan efisiensi dan efektifitas usahanya. Oleh
karena itu, pihak manajemen hendaknya peka terhadap semua
komponen informasi data kendaraan dapat menjadi informasi yang
akurat[2].
Persaingan antar perusahaan penyedia layanan persewaan mobil
ini sangatlah ketat sehingga dibutuhkan strategi pemasaran yang
handal seperti pemanfaatan teknologi internet. Untuk itu, dalam
laporan ini menyajikan sebuah aplikasi yang ditinjau dari suatu
perusahaan sewa mobil yang tidak hanya dapat booking dan
customernya harus mengambil tapi, terdapat fitur drop-off yang mana
mobil sewaannya diantarkan langsung ke alamat yang dituju oleh
customer.

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas maka perumusan masalah
dalam laporan KP ini adalah:
1. Bagaimana proses memberikan solusi untuk permasalahan
berdasarkan kasus yang ada?
2. Bagaimana proses pembuatan desain aplikasi yang dapat
memberikan kemudahan dan juga kenyamanan bagi pengguna?

2
3. Bagaimana cara mengetahui aplikasi yang dirancang sudah sesuai
dengan kebutuhan pengguna?

1.3 Tujuan dan Manfaat

Adapun tujuan dan manfaat dari perencanaan desain UI/UX pada
aplikasi Remo OtoDrive, yakni sebagai berikut:
1. Untuk merencanakan sebuah desain aplikasi yang memberikan
solusi dari permasalahan customer rental mobil dalam hal
pemesanan rental mobil.
2. Untuk memberikan gambarn dan rencana desain aplikasi yang
dapat memberikan kemudahan dan kenyamanan bagi
penggunanya serta mengetahui kebutuhan penggunanya.

1.4 Batasan Masalah

Dari masalah yang telah dirumuskan maka penulis membatasi
permasalahannya menjadi sebagai berikut:
1. Perancangan desain UI/UX ini hanya untuk mobile app dan tidak
menyediakan website.
2. Fitur yang ada pada aplikasi meliputi fitur pemesanan,
pembayaran, pencarian, filter dan juga fitur pick-up serta drop-off.

1.5 Metodologi Pengerjaan Kerja Praktek

Pada penelitian ini saya menggunakan metode Design Thinking.
Metode ini akan digunakan untuk menentukan tahapan tahapan
perancangan design aplikasi mulai dari bagaimana proses research
yang perlu dilakukan sehingga mendapatkan informasi yang optimal,

3
bagaimana cara mengolah informasi yang didapat sampai dengan
terciptanya sebuah solusi yang nantinya di visualkan pada desain
aplikasi berbasis mobile yang dapat digunakan oleh pengguna, dengan
metode tersebut juga bisa menjadi acuan bagaimana cara membuat
desain aplikasi yang bukan hanya menarik melainkan nyaman
digunakan oleh pengguna.

1.6 Sistematika Penulisan

Penulisan laporan KP ini dibagi menjadi 6 pokok pembahasan,
diantaranya.
BAB I PENDAHULUAN
Pada Bab Pendahuluan penulis menjelaskan apa yang melatar
belakangi dibuatnya penelitian ini, apa saja rumusan masalah yang
nantinya akan dicarikan solusi, tujuan dan manfaat dibuatnya
penelitian ini, batasan masalah, metodologi yang digunakan dalam
pengerjaan kerja praktek serta bagaimana sistematika penulisan yang
akan digunakan.
BAB II PROFIL PERUSAHAAN
Pada Bab Profil Perusahaan penulis menjelaskan deskripsi
singkat mengenai perusahaan tempat penulis mengikuti program Studi
Independen Bersertifikat, serta bagaimana sejarah singkat terkait
dengan perusahaan tempat penulis mengikuti program MBKM ini.
BAB III TEORI PENUNJANG
Pada Bab Teori Penunjang penulis memberikan beberapa
landasan teori yang nantinya akan menjadi acuan dalam penelitian ini.
Yang mana pada bab ini penulis mencantumkan beberapa definisi dan

4
juga pengertian terkait dengan konsep apa yang penulis kerjakan.
Diantaranya ada design thinking dan fase-fasenya lalu ada pengertian
dan definisi terkait UI/UX.
BAB IV PERANCANGAN SISTEM
Pada Bab Perancangan Sistem menjelaskan tentang tahapan
tahapan yang dilakukan penulis sebelum pembuatan desain aplikasi,
seperti memahami permasalahan dengan berempati pada user,
mendefinisikan masalah dan berujung ke penemuan ide.
BAB V IMPLEMENTASI SISTEM
Pada Bab Implementasi Sistem disini penulis menampilkan
beberapa screenshot dari fitur yang ada di aplikasi serta menampilkan
hasil testing guna menjelaskan bahwa aplikasi yang dirancang sudah
layak untuk didevelop para developer dan digunakan.
BAB VI PENUTUP
Bab Penutup berisikan kesimpulan yang dapat diambil dari
perancangan desain aplikasi mobile, serta saran yang nantinya bisa
bermanfaat untuk penelitian selanjutnya.

5
 BAB II
PROFIL PERUSAHAAN

Binar Academy adalah lembaga pendidikan non-formal yang

bertujuan untuk menghasilkan talenta-talenta digital yang
berkompetensi. Lembaga ini didirikan pada tahun 2016 di Jakarta oleh
Alamanda Shantika, Dita Aisyah dan Seto Loreno. Kini Binar
Academy memiliki lokasi yang tersebar di berbagai kota di Indonesia
seperti Jakarta, Batam, Kupang, Ambon, Yogyakarta dan Tangerang.
Berikut penulis sajikan logo dari binar academy pada gambar 2.1.

Gambar 2.1 Logo Binar Academy

2.1 Sejarah PT Lentera Benderang
Binar Academy merupakan sebuah startup di bidang edukasi,
Binar menjadi wadah bagi talenta untuk belajar dunia Information
Technology. Binar Academy didirikan pada tahun 2016 di Jakarta oleh
Alamanda Shantika, Dita Aisyah dan Seto Loreno. Sejak berdirinya
Binar pada tahun tersebut, Binar hadir di beberapa kota di Indonesia

6
diantaranya adalah Kota Batam, Kupang, Ambon, Yogyakarta, dan
Tangerang.
2.2 Visi dan Misi Binar Academy
a. Visi
Untuk saling menginspirasi dan menyemangati, yang berarti
ketika talenta potensial bersatu membentuk cahaya pembaruan dalam
bidang digital, hasil dan kolaborasi mereka harus bisa menghidupkan
serta menginspirasi banyak orang.
b. Misi
1. Untuk saling menemukan, yang berarti Binar Academy mengajak
untuk terus mencari esensi, bukan hanya untuk meraih forma atau
output yang terlihat baik. Forma dan substansi harus berjalan
beriringan.
2. Untuk saling berproses, yang berarti Binar Academy mendorong
untuk tidak haya mempelajari wawasan dan teori tapi juga dapat
meneladani proses untuk menjadi landasan dalam membuat
inovasi yang dapat membangun bangsa.
3. Untuk saling terkoneksi, yang berarti ilmu dan pelatihan yang
menjadi bagian dari ekosistem Binar Academy dirancang untuk
menghubungkan talenta dengan pakar atau talenta dengan talenta.
Dengan demikian, terciptalah potensi dan kesempatan. Hubungan
ini merupakan sebuah simbiosis yang dilandaskan pada daya saing
di era digital.

7
 BAB III
TEORI PENUNJANG

Pada Bab Teori Penunjang penulis memberikan beberapa

landasan teori yang nantinya akan menjadi acuan dalam penelitian ini.
Yang mana pada bab ini penulis mencantumkan beberapa definisi dan
juga pengertian terkait dengan konsep apa yang penulis kerjakan.
Diantaranya ada design thinking dan fase-fasenya lalu ada pengertian
dan definisi terkait UI/UX.
3.1 Mobile Apps
Secara umum aplikasi mobile (mobile application) adalah
sebuah program aplikasi yang berjalan pada perangkat mobile
misalnya smartphone maupun tablet PC yang dirancang untuk
menunjang aktivitas pengguna sehingga dapat mempermudah dan
meningkatkan fleksibilitas pengguna[2]. Dalam mengembangkan
suatu aplikasi mobile menurut Griffith (2016: 17) dalam (Bangsawan,
2017: 21), terdapat berbagai pertimbangan mendasar terkait
karakteristik serta jenis dari aplikasi yang akan dikembangkan.
Pertimbangan tersebut akan mempengaruhi proses perancangan dan
implementasi yang disebut dengan mobile solutions yang dibagi
berdasarkan 3 kelompok aplikasi mobile[3].
Pertama, Native Application Mobile yang merupakan aplikasi
yang dikembangkan untuk satu platform tertentu menggunakan
bahasa pemprograman spesifik yang sesuai dengan mobile OS yang
digunakan[3].

8
 Kedua, Mobile Web Applications yang merupakan jenis aplikasi
berbasis website/ web mobile yang diakses melalui browser
penggunanya tidak dibatasi oleh sistem operasi apapun[4].
Ketiga, Hybrid Mobile Application yang merupakan plikasi
hybrid merupakan penggabungan dari aplikasi web dan native. Prinsip
utama perancangan aplikasi ini menggunakan bahasa pemprograman
mobile website, sedangkan beberapa fitur lainnya menggunakan
native aplikasi mobile sesuai dengan mobile OS tujuannya[2].
3.2 UI/UX
UI dan UX memiliki kepanjangan User Interface dan User
experience yakni merupakan sebuah tampilan visual dalam sebuah
aplikasi atau alat pemasaran digital dalam bentuk website yang dapat
meningkatkan brand yang dimiliki oleh suatu perusahaan.
3.2.2 UI (User Interface)
UI atau User Interface adalah tata letak grafis suatu web atau
aplikasi. Cakupan UI adalah semua item yang berinteraksi dengan
pengguna. Yang mana hal ini termasuk layout, animasi, transisi, dan
semua interaksi kecil. UI ini mendesain elemen-elemen visual,
bagaimana pengguna berinteraksi dengan halaman web dan apa yang
ditampilkan di dalam webpage. Elemen visual yang ditangani oleh
seorang desainer UI adalah skema warna, menentukan bentuk tombol,
serta menentukan jenis font yang digunakan untuk teks. Desainer UI
harus bisa membuat tampilan bagus yang akan meningkatkan
kesetiaan pengguna.

9
 3.2.3 UX (User Experience)
Definisi UX atau user experience menurut Borrys Hasian ada
bermacam-macam. Berdasarkan apa yang dikerjakan, desainer UX
adalah seseorang yang membuat produk yang bermanfaat dan
visualisasi user flow menjadi desain produk yang teruji dan mudah
untuk user. Desainer UX akan bekerja sama dengan tim yang lain
untuk mencari titik temu antara kebutuhan pengguna, tujuan bisnis
dan kemajuan teknologi. Titik temu tersebut kemudian dijadikan
sebuah produk yang bermakna, berguna, dan menyenangkan. Seperti
namanya, desain yang dibuat oleh desainer UX akan menentukan
kemudahan user experience atau interaksi dengan web/aplikasi.
Membuat wireframe atau mendesain mockup adalah salah satu
kemampuan dasar yang harus dimiliki oleh seorang desainer UX.

3.3 Design Thinking

Design thinking adalah serangkaian proses kognitif, strategis, dan
praktis dalam desain suatu produk yang mana digunakan untuk
memecahkan masalah dan menciptakan solusi inovatif dengan
memahami pengguna dan kebutuhannya[3].
Design thinking ini menentukan bagaimana suatu produk dapat
didesain dengan baik. Jika UI/UX Designer tidak berpedoman pada
design thinking ini, produk yang dihasilkan bisa jadi kurang
maksimal. Untuk menghasilkan suatu produk yang maksimal, ada
lima fase yang harus dijalankan oleh seorang UI/UX Designer. Lima
fase tersebut dapat dilihat di gambar 3.1 berikut.

10
 Gambar 3.1 Fase-fase design thinking
3.4 Empathize
Pada fase ini, seorang UI/UX Researcher/Designer diajak untuk
berempati pada permasalahan user. Empati adalah bagaimana
memahami, berempati, dan memiliki perasaan yang sama dengan
orang lain. Dalam UI/UX Research/Design, melakukan empati itu
sangat penting. Dengan melakukan empati, maka seorang UX
Researcher/Designer akan menempatkan diri di posisi usernya. Jika
sudah menempatkan diri di posisi usernya, maka akan dengan mudah
memahami permasalahan dari user.
Berempati adalah proses memahami beberapa permasalahan user.
Diantaranya melalui:
a. Observasi (mengamati secara langsung).
b. Studi pada foto/video.
c. Mengamati jarak jauh.
d. Wawancara one-on-one.
e. Diary study.
f. Card sorting.

11
g. Focus group.
h. Survey/kuesioner.
i. Participatory design.
j. Usability Testing.
Untuk pengerjaan kerja praktek ini saya menggunakan metode
observasi, wawancara dan usability testing.
3.4.1 Observasi
Observasi adalah kegiatan mengamati pengguna secara
langsung. Proses observasi berpatokan pada tiga pertanyaan ini. Apa
yang dilakukan user? Bagaimana cara user melakukan? Mengapa user
melakukan hal itu?
Proses observasi dilakukan untuk menjawab tiga pertanyaan di
atas. Contohnya ketika seorang UX Researcher yang sedang
mengobservasi user smartphone. Kamu ingin mengamati bagaimana
pengalaman dan kesulitan user ketika mengoperasikan smartphone.
3.4.2 Wawancara.
Melalui wawancara, kita dapat melakukan dialog secara
langsung dengan user agar memahami permasalahan mereka secara
komprehensif. Sebelum melakukan wawancara, seorang UX
Researcher/Designer harus brainstorming dulu dengan tim nya untuk
menentukan pertanyaan-pertanyaan yang akan diajukan ke user ketika
wawancara[5]. Jika sudah terdapat pertanyaan, maka wawancara bisa
dilakukan. Perlu diperthatikan bahwa sangat penting untuk memilih
tempat yang nyaman dan tenang.

12
3.5 Define
Fase define menentukan bagaimana membuat pernyataan
masalah. Hal ini berarti bahwa jika kita tidak berhasil menyortir,
memilah, dan menganalisis data dengan baik, pernyataan masalah
yang dihasilkan menjadi tidak tepat. Pernyataan masalah adalah
artikulasi dari proses desain. Pernyataan masalah akan mengarahkan
kita dalam proses desain dan membantu dalam fase selanjutnya, yaitu
ideation.
Defining yang baik akan menghasilkan pernyataan masalah yang
tepat. Jika pernyataan masalah tepat, produk yang dihasilkan juga
akan tepat[3]. Kegiatan utama pada fase define adalah menyusun
pernyataan masalah. Teknik yang digunakan untuk menyusun
pernyataan masalah adalah dengan mengajukan pertanyaan.
Mengajukan pertanyaan yang tepat akan membantu kita mencapai
pernyataan masalah yang tepat.
Berikut terdapat tahap-tahap yang dilalui oleh UI/UX
Researcher/Designer ketika fase define :
3.5.1 User Persona
User persona adalah karakter fiksi atau aktual, yang kita buat
berdasarkan penelitian untuk mewakili berbagai jenis pengguna yang
menggunakan layanan, produk, situs, atau merek. User Persona akan
membantu kita dalam memahami tujuan user menggunakan produk,
sekaligus memberikan gambaran bagaimana kemungkinan perilaku
user ketika menggunakan suatu produk atau layanan.
Dalam user persona ini, kita cukup melakukan riset pada user
tertentu yang dirasa dapat mewakili keseluruhan pengguna produk

13
secara umum. Istilahnya, potential user. Salah satu cara yang paling
sering dilakukan adalah mengumpulkan informasi melalui wawancara
kepada setidaknya 10 orang responden. Kesepuluh orang ini yang kita
sebut sebagai potential user.
Tiga Unsur User Persona diantaranya :
a. Persona merupakan hipotesis yang bersifat aktual. Gunanya untuk
menggabungkan kebutuhan, keinginan, dan pain points beberapa
orang dengan sifat-sifat yang sama. Karakter yang disamakan
tergantung pada pencipta persona dan didasarkan pada model
perilaku atau mental yang terkait dengan masalah yang diselidiki.
b. Persona adalah imajinasi yang dibentuk dari proses riset user yang
teliti, presisi, dan signifikan.
c. Persona adalah salah satu informasi sampingan yang ditemukan
dari riset, bukan sebagai penentu utama strategi pengembangan
produk karena sifatnya yang dapat berubah-ubah.
User persona yang efektif memenuhi kriteria berikut ini:
a. Mewakili grup pengguna utama untuk situs web, produk atau
layanan.
b. Mengekspresikan dan fokus pada kebutuhan dan harapan utama
dari kelompok pengguna.
c. Memberikan gambaran yang jelas tentang harapan pengguna dan
kemungkinan mereka menggunakan produk atau layanan.
Berikut penulis sertakan gambar 3.2 yang merupakan contoh
dari user persona yang dapat digunakan sebagai acuan. Dalam
membuat user persona diharapkan melihat contoh terlebih dahulu
agar dapat menghasilkan user persona yang efektif.

14
 Gambar 3.2 Contoh User Persona
3.5.2 Pain Point
Pain points berpacu pada masalah yang sangat spesifik yang
dialami pelanggan suatu produk atau layanan. Sederhananya, pain
points merupakan masalah. Contohnya Ketika pelanggan

15
menggunakan platform e-commerce, setelah itu proses checkout dan
pembayaran sedikit lama, maka mereka mungkin akan berhenti dan
beralih ke layanan e-commerce lain.
3.5.3 Room for Improvement
Room for improvements adalah kemungkinan atau harapan
bahwa seseorang atau sesuatu akan meningkat (menjadi lebih baik).
Room for improvements ini ditentukan setelah kita menemukan pain
point dari suatu hal. Sederhananya room for improvement adalah
solusi dari pain point
3.5.4 User Journey Maps
User journey map adalah gambaran tahap-tahap yang
mendeskripsikan interaksi user dengan layanan atau produk tertentu.
Sederhananya, user journey map adalah visualisasi dari proses yang
dilalui seorang user untuk mencapai tujuannya. user journey map
mempunyai dua fungsi, yaitu :
a. Mendemonstrasikan cara pengguna berinteraksi dengan produk,
website, atau layanan pada saat ini.
b. Mendemonstrasikan kemungkinan cara pengguna berinteraksi
dengan produk, website, atau layanan di masa depan.
Berikut terdapat beberapa hal yang menjelaskan pentingnya
sebuah user journey map.
a. Menentukan titik kontak perjalanan
b. Menyatukan pemahaman
c. Menemukan kekurangan
User journey map membantu kita mengalami gimana rasanya
berada di posisi user. Selain itu, user journey map ini juga membantu

16
kita untuk melihat produk dari perspektif user. Hal ini tentunya bisa
memberikan insight yang baik, sehingga kita bisa menemukan apa
yang benar-benar dibutuhkan user untuk diaplikasikan dalam
pengembangan produk.
User journey map punya lima komponen, yaitu:
a. Aktor  User
b. Scenarios + expectations  Skenario yang akan dilalui user
c. Journey phases  Journey phases adalah tahapan-tahapan yang
akan dilalui User. Mulai dari define, compare, negotiate, hingga
select.
d. Actions, mindsets, dan emotions.
• Actions atau tindakan adalah perilaku aktual dan langkah-
langkah yang diambil user saat mencari paket data seluler yang
lebih hemat.
• Mindset atau pola pikir adalah apa yang dipikirkan,
ditanyakan, dan motivasi user dalam setiap actions yang
dilakukan.
• Emotions adalah apa yang dirasakan user dalam setiap actions.
Emotions ini biasanya naik dan turun
e. Opportunities
Opportunities adalah hal yang dapat disimpulkan dari komponen-
komponen sebelumnya. Atau dengan kata lain, hal apa yang dapat
dilakukan setelah mengetahui informasi tentang user. Solusi apa
yang bisa diberikan untuk memecahkan masalah user.

17
 Berikut penulis sertakan dalam gambar 3.3 yaitu contoh user
journey maps sebagai acuan dalam membuat user journey maps secara
efektif.

Gambar 3.3 Contoh User Journey Maps

3.6 Ideate
Pada fase define, saatmya menyortir data untuk memetakan inti
permasalahan. Setelah mengetahui inti permasalahan, selanjutnya siap
menciptakan sesuatu untuk menjawab permasalahan tersebut. Tapi,
sebelum itu, harus menemukan ide produk seperti apa yang ingin
dikembangkan untuk menjawab permasalahan. Proses menemukan

18
ide inilah yang disebut ideate atau ideation. Aktivitas kunci pada fase
ini adalah menghasilkan ide dan berani berpikir out of the box. Untuk
menemukan ide yang out of the box, kita harus melakukan
brainstorming dengan tim dan mencari inspirasi sebanyak mungkin.
Di fase ideate inilah kita mengeksplorasi berbagai macam hal
dan mencari inspirasi sebanyak-banyaknya untuk pengembangan
produk kita. Hal-hal yang diperlukan dalam fase ideation ini adalah :
3.6.1 Brainstorming
kegiatan yang paling umum dilakukan adalah brainstorming.
Berikut adalah aturan dalam brainstorming :
a. Tetapkan batas waktu (15-60 menit)
b. Mulai dengan masalah dan ringkasan target user. Anggota tim
harus mengacu pada pertanyaan, rencana dan tujuan yang telah
ditetapkan.
c. Hindari saling kritik
d. Berpikir out of the box. Munculkan ide-ide tidak biasa
e. Berorientasi pada kuantitas (menghasilkan banyak ide)
f. Harus mendukung dan memperkaya gagasan orang lain
g. Visualisasikan ide dalam diagram dan post-it
h. Menghormati satu sama lain dan tidak memotong pembicaraan
i. Hasil dari brainstorming ini kemudian disajikan dalam
Information Architecture
3.6.2 Information Architecture
Untuk mengatur agar ide-ide yang dihasilkan mudah diakses
dan dipahami oleh user, maka kita perlu menata informasi tersebut
sedemikian rupa dalam sebuah struktur. Nah, struktur ini biasa dikenal

19
dengan istilah Information Architecture. Lengkapnya, Information
Architecture adalah gambaran suatu model atau konsep informasi
yang digunakan dalam aktivitas-aktivitas yang membutuhkan detail
eksplisit dari suatu sistem yang kompleks.
Information Architecture berfokus pada pengorganisasian,
penataan, dan pelabelan konten dengan cara yang efektif. Tujuannya
adalah untuk membantu pengguna menemukan informasi yang akurat.
Information Architecture digunakan untuk mengklasifikasi dan
menata informasi dalam aplikasi secara detail, sehingga user lebih
mudah dalam mengakses aplikasi. Untuk menyusun Information
Architecture diperlukan riset lalu perbaharui konten, lalu lakukan card
sorting untuk mengklasifikasi konten. Lalu bangun hierarki.
3.6.3 Wireframe
Wireframing adalah proses pembuatan wireframe, yang pada
umumnya dilakukan sebelum pembuatan produk. Wireframe itu
sendiri merupakan sebuah kerangka untuk menata suatu item di laman
website atau aplikasi. Untuk menyusun wireframes ini, ada empat
langkah.
Langkah 1: Identifikasi aspect ratio jendela browser atau perangkat.
Rasio ini tidak harus tepat, terutama jika kita membuat sketsa
menggunakan tangan.
Langkah 2.1: Identifikasi navigasi. Navigasi dan pencarian
menambahkan konteks pada wireframes. Untuk itu, kita harus
mengidentifikasi navigasi sejak awal. Tunjukkan bilah navigasi (baik
horizontal atau pun vertikal) dengan menggambar persegi panjang di
posisi yang sesuai pada halaman.

20
Langkah 2.2: Identifikasi navigasi. Fitur pencarian dapat
direpresentasikan melalui ikon pencarian dan kotak pencarian, seperti
pada contoh di samping. Jika perlu, kita dapat menampilkan saran
pencarian dalam persegi panjang di bawah kotak pencarian.
Langkah 3: Identifikasi dan gambar elemen terbesar dalam desain.
Selanjutnya, fokuslah untuk menggambar bagian utama dari ide.
Misalnya, header, spanduk besar, dan gambar, atau bahkan bagian
besar dari body copy.
Langkah 4: Menambahkan rincian atau detail. Berikutnya adalah
menambah rincian atau detail. Umumnya, detail ini adalah komponen
kecil seperti tombol, dropdown, kotak centang, tombol rasio, atau
bidang teks.

Gambar 3.4 Contoh Wireframe

21
3.6.4 Wireflow
Istilah 'wireflow' berasal dari kombinasi kata 'wireframe' dan
'flowchart', yang diciptakan oleh Nielsen Norman Group. Seperti
namanya, wireflows menggabungkan manfaat dari wireframes dan
flowcharts. Wireflow adalah bentuk presentasi dari kumpulan
wireframe yang sudah ditambahkan dengan flow atau alur penggunaan
dan perpindahan screen. Dalam pembuatannya, wireflow merupakan
gabungan dari wireframe dan flowchart. Wireflows menunjukkan
perubahan UI visual saat pengguna berinteraksi dengan aplikasi atau
situs web. Wireflows juga dapat berisi anotasi untuk menunjukkan apa
yang terjadi di back-end pada waktu tersebut. wireflow adalah
gabungan antara wireframe dengan flowchart. Kumpulan wireframe
yang sudah kita rancang tadi kita satukan dan dihubungkan dalam
bentuk alur, seperti halnya waktu kita membuat flowchart.

Gambar 3.5 Contoh Wireflow

22
3.7 Prototype
Prototype dalam Bahasa Indonesia disebut sebagai purwa rupa.
Ia merupakan bentuk draft dari produk yang bisa ditunjukkan kepada
user ataupun klien, agar mereka bisa merasakan dan melakukan
eksplorasi konsep fitur dari produk yang kita buat. Berbeda dengan
wireframe dan mockup, prototype bentuknya simulasi. Ia bisa
direspon dan memungkinkan seseorang untuk merasakan langsung
bagaimana rasanya menggunakan produk ini.
Prototype itu bukan produk. Bedanya dengan produk akhir,
belum ada proses development dan coding yang terjadi di tahap
prototype. Alasannya sederhana, yaitu untuk menghemat biaya
produksi. Setelah prototype diuji, baru deh produksi bisa digarap.
Beberapa hal yang bisa kita lakukan sebelum memulai desain yaitu :
1. Mencari referensi desain itu penting untuk memperkaya wawasan.
Baik desain kita sebelumnya, juga desain yang jadi rujukan klien
ataupun stakeholders.
2. Mengumpulkan hasil kegiatan yang telah dilakukan. Misalnya
user personas, user journey map, information architecture,
wireframes, dan sebagainya. Ketika referensi dirasa cukup, setelah
itu kita perlu mulai mendalami proses desain antarmuka pengguna.
3.7.1 Design System
Design system merupakan sebuah sumber atau kelompok
elemen yang berisikan komponen-komponen dan aset desain. Design
system berisikan identitas dari produk atau brand, principle dan best
practice. Kemudian diturunkan dalam komponen-komponen interface
yang biasa digunakan oleh desainer dalam merancang produk atau

23
fitur yang nantinya akan digunakan oleh user. Design system dapat
digunakan pada produk dengan panduan cara menggunakannya,
sehingga memungkinkan membantu tim untuk merancang,
mewujudkan, dan mengembangkan produk.
Tujuan dari design sistem yaitu membantu tim mencapai
efisiensi, konsistensi, dan skalabilitas yang lebih tinggi saat
membangun sebuah produk digital. Berikut adalah langkah-langkah
yang bisa kamu lakukan untuk membuat design system :
1. Membuat inventory untuk Interface produkmu Jika produkmu
sudah memiliki visual implementasi, yang bisa kamu siapkan
adalah mengumpulkan seluruh elemen tersebut dan mengaudit
elemen yang banyak bermunculan.
2. Buatlah visual design language. Jika kamu diharuskan membuat
design system dari nol. Kamu bisa memulainya dengan visual
design language. Seperti:
● Warna
Biasanya memiliki 1 sampai 3 warna primer, termasuk
penggunaan persentase warna untuk kebutuhan khusus.
● Typography
Kebanyakan menggunakan 1 sampai 2 font untuk headline dan
body text. Sebaiknya hindari menggunakan banyak variant
font agar user tidak bingung.
● Sizing dan Spacing
Untuk kebutuhan ini bisa mengikuti guideline baik milik
Android atau iOS sesuai dengan interface product yang kamu
buat.

24
 ● Image
Sebuah interface biasanya memiliki kebutuhan ikon, ilustrasi
dan fotografi. Buatlah standar khusus dari visual tersebut.
3. Buatlah UI Pattern
Pola UI adalah elemen desain apa pun yang digunakan secara
konsisten untuk antarmuka dari website dan juga aplikasi.
Misalnya, cara kamu memperlakukan fungsi pencarian,
bagaimana ikon kaca pembesar terlihat, apakah jendela input
diperluas atau tetap dibuka, lokasinya di layar, dan apakah kamu
menyertakan teks placeholder atau tidak. Semua itu merupakan
pola UI.
4. Simpan dokumentasi design system
Pisahkan dokumentasi tersebut di bawah nama “design system”
sehingga bisa digunakan atau dilihat oleh seluruh tim. Pastikan
design system yang dibuat sudah sesuai dengan standar guideline
design dan interaksi yang telah diatur pada Android dan iOS.
3.7.2 Moodboard
Moodboard merupakan representasi visual dari sebuah konsep
desain yang tersusun dari kumpulan inspirasi. Pada dasarnya,
moodboards adalah papan suasana hati yang mana ditempatkan
bersama desainer. Yang tujuannya untuk mengatur inspirasi pada
tahapan pembuatan konsep.
Moodboard bisa berbentuk digital dan atau fisik. Kalau
bentuknya digital, kita bisa membuat kolasenya menggunakan
perangkat lunak. Sedangkan bentuk fisik atau analog, kita dapat
menggunakan kertas, papan gabus, atau dinding. Karena sebenarnya

25
bisa memilih menyusun moodboard dalam bentuk fisik maupun
digital, jadi sebenarnya tidak ada batasan khusus untuk memasukkan
temuan inspirasi. Misalnya, kita menemukan foto, video, musik, font,
dan sebagainya. Lalu, tugas moodboard adalah menginspirasi dan
sangat membantu dalam proses kreatif, dan bukan menjadi suatu
keharusan.
3.7.3 High Fidelity
Selain berfokus untuk menjelaskan interaksi antar tampilan,
high-fidelity prototype juga mengedepankan tampilan visual dari
interface design untuk setiap konten yang ada di dalam produk.
High-fidelity prototype adalah suatu desain yang sudah melalui proses
coding secara sederhana, sehingga fitur-fitur di dalamnya bisa dicoba
(clickable) oleh user ketika melakukan evaluasi. Ada 2 cara untuk
membuat sebuah High-Fidelity prototype, yaitu:
1. Menggunakan software desain atau mockup apps.
2. Mengubah tampilan mockup ke dalam struktur code (programming)
sehingga bisa terbaca oleh browser ataupun aplikasi.

3.8 Test
Fase ini adalah tahap percobaan yang tujuannya untuk
mengidentifikasi solusi terbaik. Desainer atau evaluator secara ketat
menguji produk lengkap menggunakan solusi terbaik yang ditemukan
selama fase pembuatan prototipe. Poinnya pada fase ini adalah
menguji untuk belajar. Menyempurnakan ide dengan mengumpulkan
feedback dan bereksperimen ke depan.

26
 Usability testing atau pengujian kegunaan adalah proses
pengujian berbagai bagian situs web atau aplikasi oleh pengguna.
Tujuannya, menemukan cara paling baik dan efektif untuk pengguna
dalam menyelesaikan suatu aktivitas berdasarkan feedback secara
langsung dari pengguna dengan berdasarkan pengalaman yang
langsung dan nyata.

3.9 Software Editing

3.9.1 Figma
Figma adalah salah satu design tool yang biasanya digunakan
untuk membuat tampilan aplikasi mobile, desktop, website dan lain-
lain. Figma bisa digunakan di windows operating system, linux
ataupun mac dengan terhubung ke internet. Umumnya Figma banyak
digunakan oleh seseorang yang bekerja di bidang UI/UX, web design
dan bidang lainnya yang sejenis.
Selain mempunyai kelengkapan fitur layaknya Adobe XD,
Figma memiliki keunggulan yaitu untuk pekerjaan yang sama dapat
dikerjakan oleh lebih dari satu orang secara bersama-sama walaupun
ditempat yang berbeda. Hal tersebut bisa dikatakan kerja kelompok
dan karena kemampuan aplikasi figma tersebut lah yang membuat
aplikasi ini menjadi pilihan banyak UI/UX designer untuk membuat
prototype website atau aplikasi dengan waktu yang cepat dan efektif.

27
 BAB IV
PERANCANGAN SISTEM

Selama pelaksanaan MBKM di Binar Academy, saya

menyelesaikan beberapa tugas dan juga proyek. Salah satu tugas
proyek yang saya bangun yaitu membuat interface sebuah aplikasi
rental mobil Remo OtoDrive yang telah saya rancang menggunakan
metode design thinking. Untuk menyelesaikan proyek tersebut, saya
harus merancang sistem dengan melalui fase empathize, defining dan
ideation.

Gambar 4.1 Logo Remo OtoDrive

4.1 Empathize
Untuk melalui fase empathize ini saya melakukan observasi
terlebih dahulu kepada user yang sering menggunakan jasa rental
mobil yang ada di sekitar saya. Lalu, setelah melakukan observasi,
saya melakukan wawancara singkat kepada salah satu user mengenai
kebutuhan dari user serta permasalahan yang dihadapi oleh user.

28
4.1.1 User Research
Penelitian pengguna ini dilakukan pada mahasiswa berusia
antara 17 hingga 23 tahun, tujuan penelitian ini adalah untuk
mengetahui terkait pengalaman user tentang penyewaan mobil.
Penelitian menjawab pertanyaan seperti :
a. Apa yang harus kita buat?
b. Apa masalah pengguna?
c. Bagaimana kita menyelesaikannya?
Lalu saya melakukan wawancara yang mana wawancara ini adalah
metode penelitian utama dan dilakukan untuk mendapatkan informasi
yang lebih mendalam.
Beberapa pertanyaan wawancara meliputi;
a. Bagaimana cara anda menyewa sebuah mobil?
b. Kesulitan apa yang Anda alami saat menyewa mobil?
c. Apakah Anda memiliki aplikasi yang membantu Anda
menemukan persewaan mobil?
d. Faktor apa yang Anda pikirkan ketika menyewa mobil?
Dari observasi dan wawancara yang telah dilakukan tersebut,
kemudian akan menghasilkan beberapa hal yang akan disusun di fase
defining.

4.2 Defining
Dalam fase define ini, hasil yang didapat dalam proses observasi
dan juga wawancara kemudian didefinisikan secara lebih jelas lagi
agar dapat fokus pada inti dari permasalahan. Cara penyelesaiannya
juga dapat berkembang setelah dilakukan proses pendefinisian

29
masalah. Untuk bisa mendefinisikan masalah yang dialami oleh user,
diperlukan hal-hal yang harus diselesaikan diantaranya adalah user
persona, user pain points, problem statement, user journey maps.
4.2.1 User Persona
Dalam user persona ini diisi tentang ringkasan informasi
pengguna yang telah diresearch dengan metode wawancara yang telah
dilakukan sebelumnya. Hasil dari wawancara tersebut yang kemudian
dirangkum menjadi sebuah persona yang berisi informasi seputar
deskripsi pengguna, kesulitan pengguna dan juga kebutuhan atau
keinginan yang pengguna harapkan. Berikut user persona dari hasil
wawancara yang telah dilakukan dijelaskan pada gambar 4.2.

Gambar 4.2 User Persona

4.2.2 User Pain Points
Salah satu komponen dalam user pesona adalah keterangan
tentang pain point seorang pengguna. Dari user persona yang sudah

30
ada pada gambar 4.2, dapat disimpulkan bahwa keresahan pengguna
atau user pain pointsnya adalah :
a. Tidak memiliki mobil yang dapat digunakan untuk berlibur
bersama keluarga.
b. Untuk menyewa mobil masih harus mendatangi satu satu ke
tempat persewaan mobil.
c. Kebingungan untuk memilih mobil yang akan disewa karena
membandingkan mobil dari tempat persewaan mobil satu dengan
yang lain.
4.2.3 Problem Statement
Setelah menemukan pain pointsnya, langkah berikutnya
adalah menyusun problem statement supaya permasalahannya lebih
mudah dimengerti lalu disusun dengan baik pada user journey maps.
Dari pain points yang sudah tertera, maka dapat disusun problem
statementnya sebagai berikut :
Martin adalah mahasiswa traveller yang membutuhkan
mobil untuk bepergian ke luar kota karena dia membutuhkan waktu
untuk refreshing bersama keluarga ataupun teman yang dekat
dengannya.
4.2.4 User Journey Maps
User journey maps ini dibuat untuk mengetahui pengalaman
pengguna selama menggunakan suatu produk. Setelah mengetahui
maka dapat menentukan titik kontak perjalanan, menyatukan
pemahaman dan juga menemukan kekurangan. Dari progress yang
telah dilalui, gambar 4.3 adalah user journey maps yang telah saya
buat.

31
 Gambar 4.3 User Journey Maps
Dari gambar tersebut, dapat kita lihat bahwa Martin adalah
seorang mahasiswa berusia 20 tahun ingin menyewa mobil yang
cocok untuk berlibur dengan rekan-rekannya di saat weekend. Dia
memiliki ekspetasi mendapat informasi yang jelas tentang mobil yang
akan disewa pada aplikasi dan mendapatkan mobil yang sesuai dengan
yang diinginkan. Serta dapat melakukan booking melalui aplikasi
tersebut.
4.3 Ideation
Pada fase ini dilakukan proses pengumpulan ide melalui
brainstorming yang bertujuan untuk mendapatkan ide-ide
penyelesaian masalah yang ada. Ide-ide yang sudah terkumpul
kemudian dipilih dan diprioritaskan berdasarkan dampak bagi
pengguna dan pengembangan website. Karena tidak ada tim pada
32
project saya kali ini, maka brainstorming ini saya lakukan sendiri
dengan melanjutkan ke tahap selanjutnya dengan menentukan
information architecture.
4.3.1 Information Architecture
Di fase ideation ini melalui tahap information architecture
merupakan bagian yang menyusun ide dari hasil brainstorming
Berikut information architecture saya sajikan pada gambar 4.4

Gambar 4.4 Information Architecture

Dari gambar 4.4 tersebut terdapat 3 menu utama yang akan
dirancang pada aplikasi yang didesain. Untuk menu home terdapat
fitur profile, search, filter, merk dan recommended. Untuk fitur pada
menu sewa saya ada drop-off dan pick-up. Dan untuk fitur pada menu
33
profile ada edit profil, riwayat, metode pembayaran, logout dan help.
Fitur-fitur tersebut sudah dipetakan dan sudah menyesuaikan dengan
hal-hal yang dibutuhkan oleh pengguna.
4.3.2 User flow

Gambar 4.5 User Flow

34
 Pada gambar 4.5 terdapat user flow yang menggambarkan alur
untuk pengguna dalam menggunakan desain dari aplikasi Remo
OtoDrive ini. Dimulai dari membuka halaman awal. Lalu masuk
sebagai tamu. Lalu jika ingin masuk, terdapat dua pilihan. Yaitu daftar
untuk yang belum memiliki akun atau masuk jika sudah memiliki
akun. Setelah masuk, dengan skenario bahwa pengguna ingin
menyewa sebuah mobil, maka hal yang harus dilakukan ketika di
halaman utama adalah dengan memanfaatkan fitur filter. Lalu
memilih mobil yang diinginkan. Setelah itu melakukan pembayaran
dengan memilih metode pembayaran. Setelah itu konfirmasi
pembayaran dan dapat memilih mobil rental tersebut ingin diantar
atau dijemput. Setelah selesai, pengguna dapat melihat riwayat mobil
yang telah disewa.
4.3.3 Wireframe
Wireframe ini adalah konsep dasar dari sebuah desain. Konsep
yang didapat dari wireframe ini selanjutnya akan dibuat lebih detail
dan dimatangkan di fase prototype pada tahap desain. Dalam
perancangan desain dari wireframe ini nantinya berpengaruh dari sisi
user experience yang mana alur dari jalannya kemudahan aplikasi
yang langsung dirasakan oleh pengguna. Untuk desain
perancangannya, wireframe ini mencakup mulai dari halaman awal,
lalu tampilan home ketika belum melakukan login. Setelah itu desain
ini mencakup tampilan halaman daftar dan juga halaman login. Desain
lainnya adalah fitur-fitur yang ada dalam aplikasi Remo OtoDrive.
Diantaranya adalah fitur pencarian, filter, lalu ada drop-off dan juga
pick-up yang mana menjadi fitur utama dari aplikasi ini.

35
Gambar 4.7 Wireframe Awal Gambar 4.6 Wireframe Home Guest
Pada gambar 4.7 dan gambar 4.6 berisikan tampilan awal dari
desain aplikasi yang akan dirancang. Yang mana alurnya berisi setelah
continue ditekan, akan beralih ke halaman home yang belum login.
Untuk wireframe home as guest tersebut memiliki perbedaan dengan
wireframe homepage yang mana pada halaman homepage pengguna
dapat melihat perbedaan pada akun saya dan juga logo akun pada
pojok kanan atas yang mana jika belum masuk menggunakan akun
yang terdaftar, maka pengguna hanya bisa melihat ketersediaan dari
mobil yang akan disewa. Untuk beberapa fitur lain juga memiliki
beberapa keterbatasan untuk pengguna yang masih belum memiliki
akun yang terdaftar pada platform aplikasi Remo OtoDrive ini.

36
 Gambar 4.8 Wireframe Daftar, Masuk

Pada gambar 4.8 tersebut berisi rancangan desain aplikasi

untuk halaman daftar dan halaman login. Untuk halaman daftar berisi
kolom username, nama lengkap, nomor HP, Password, dan juga
kolom konfirmasi kata sandi. Selain itu ada tombol daftar, ada pilihan
juga untuk login, lalu ada pilihan daftar menggunakan aplikasi yang
sudah diintegrasikan yang berisi akun-akun. Lalu unutk halaman
masuk tersebut berisikan gambar logo, lalu kolom username dan
password. Lalu ada tombol login yang disertai dengan pilihan untuk
mendaftar akun. Selain itu ada menu untuk masuk dengan aplikasi
terintegrasi yang sama pada halaman daftar. Setelah user melakukan
pendaftaran atau login, maka tampilan dari aplikasi ini akan beralih
langsung ke halaman home. Yang mana pendaftaran ini juga untuk
membuat akun yang dapat memberikan lebih banyak fitur.

37
 Gambar 4.9 Wireframe profil login & no login

Pada gambar 4.9 menampilkan wireframe profil login dan

ketika belum login. Di sini terdapat beberapa perbedaan karena menu
yang ditampilkan dan juga terdapat pembatasan fitur bagi yang belum
memiliki akun. Di sini ketika user belum memiliki akun, hanya bisa
mengakses fitur menu bantuan saja yang mana dalam bantuan tersebut
hanya menampilkan rincian bantuan panduan untuk menggunakan
aplikasi ini. Dan juga terdapat tombol untuk daftar dan login. Setelah
login, maka terdapat beberapa fitur lain yang dapat diakses
diantaranya ada edit profil, ada riwayat, dompet terhubung, keluar dan
juga bantuan. Serta ada perbedaan tampilan logo pada menu taskbar
di bawah. Yaitu ketika masih dummy dan juga ketika sudah ada
akunnya.

38
 Gambar 4.10 Wireframe fitur home
Gambar 4.10 Menjelaskan dan menggambarkan wireframe
fitur-fitur yang ada di halaman homepage yang mana dijelaskan lebih
detail untuk penggunaannya oleh user diantaranya ada fitur filter yang
mana nantinya user tinggal memilih kategori yang ada di filter
tersebut. Selain fitur filter ada juga fitur yang lain yaitu ada fitur
pencarian dan juga kategori merk mobil yang disukai. Halaman

39
tersebut menjelaskan ketika user sudah menekan tombol – tombol
fiturnya tersebut.

Gambar 4.11 Wireframe Sewa Saya dan Riwayat

Pada gambar 4.11 tersebut terdapat wireframe tampilan yang

ada di menu sewa saya. Yang mana dalam sewa saya terdapat pilihan
untuk pick up dan juga drop-off. Yang selanjutnya diarahkan ke
halaman riwayat. Fitur pick-up yang mana maksudnya adalah
penggunanya menjemput mobil yang akan disewa dan sedangkan
untuk yang drop-off itu adalah fitur yang digunakan oleh pengguna
untuk meminta perusahaan untuk mengantar mobil sewaan langsung
ke rumah penggunanya. Untuk konfirmasi mobil yang sudah terpick-
up berada di admin yang memegang aplikasi dari sisi perusahaannya.
Karena demi keamanan, hal tersebut diperlukan agar pengguna juga
tidak bisa mencurangi dan juga merugikan perusahaan penyedia jasa
sewa mobil tersebut.

40
 Gambar 4.12 Wireframe Pembayaran
Pada gambar 4.12 tersebut adalah wireframe dari fitur
pembayaran dan juga notifikasi pembayaran sukses. Untuk fitur
pembayaran tersebut ada pilihan metode pembayaran dan juga jumlah
dari mobilnya.

41
 Gambar 4.13 Wireframe Informasi Mobil
Gambar 4.13 memberi gambaran mengenai informasi mobil. Namun
ada perbedaan tampilan untuk yang user sebagai tamu dan yang sudah
memiliki akun. Tampilan yang atas itu adalah contoh tampilan untuk
yang belum login. Tampilan yang atas adalah contoh tampilan
informasi aplikasi yang sudah login dan memiliki akun. Untuk yang
bawah adalah contoh tampilan yang belum login dan hanya untuk
melihat ketersediaan aplikasi.

42
 BAB V
IMPLEMENTASI SISTEM

Di implementasi sistem ini pada metode design thinking ada

pada fase prototyping dan usability testing. Implementasi sistem ini
merupakan penerapan dari perancangan produk yang telah dibuat pada
fase empathize, defining dan ideation. Untuk pengimplementasian ini
adalah mulai mendesain aplikasinya. Selain memulai untuk
mendesain dari aplikasinya, maka langsung dilanjutkan pada fase
prototipe yaitu membuat alur sehingga ketika dijalankan melalui tools
figma prototipe. Setelah itu dilanjutkan dengan fase testing yang mana
pada testing kali ini penulis menggunakan metode usability testing.

5.1 Prototyping
Di fase prototyping ini sudah memulai untuk tahapan desain.
Mulai dari mencari moodboard, membuat design system untuk
mempermudah jalannya desain kedepannya. Untuk memulai sebuah
desain sebaiknya mencari moodboard atau referensi desain sebuah
aplikasi terlebih dahulu. Karena untuk menentukan tema, akan
membutuhkan referensi penentuan warna terlebih dahulu baru mulai
membuat design system yang merupakan kumpulan dari beberapa
komponen yang dibutuhkan. Setelah itu barulah dapat memulai desain
dengan baik. Dalam proses desainnya juga harus memperhatikan
wireframe yang telah dibuat sehingga UX yang sudah dikonsep bisa
sesuai. Setelah desain tersebut jadi, maka dibuatlah sebuah
prototypenya yang dapat memberikan animasi dan juga memberi aksi
pada sebuah tampilan pada tools figma.
43
5.1.1 Moodboard

(a)

(b)

44
 (c)
Gambar 5.1 Moodboard. (a) moodboard untuk warna tema aplikasi.
(b) moodboard untuk bentuk tampilan aplikasi. (c) moodboard untuk
tampilan awal aplikasi
Gambar-gambar pada gambar 5.1 merupakan moodboard
referensi untuk desain yang akan dibuat. Dari referensi ini akan
memudahkan desainer untuk membuat desain aplikasinya.
Sebenarnya tahap untuk menemukan moodboard ini tidak terlalu
penting. Karena hanya untuk menemukan referensi saja. Namun
perannya juga tidak bisa diremehkan. Dengan tidak adanya referensi,
maka akan mengurangi inspirasi dari desainernya. Setelah
mendapatkan inspirasi maka desain yang dibuat akan menjadi lebih
baik dan mendapat sebuah acuan dari desain yang sudah ada.
45
5.1.2 Design System
Untuk design system ini memiliki beberapa komponen.
Diantaranya adalah ada color system, typography, icon, button, text
field dan juga masih ada beberapa komponen tambahan yang
dijelaskan melalui gambar-gambar berikut.
a. Color system

Gambar 5.2 Color System

Pada Gambar 5.2 tersebut ada color system pada aplikasi Remo
OtoDrive ini memiliki 5 macam. Yaitu terdapat berbagai warna biru
sebagai warna utama atau primary lalu ada warna kedua atau
secondary yang mana warna kedua ini lebih digunakan untuk
memadukan dan melengkapi warna utamanya. Lalu ada warna yang
merah sebagai warna berbahaya. Selain itu ada warna caution yang
merupakan warna kuning. Dan juga warna untuk komponen lain dan
varian atau butir-butir desain yang digunakan dalam aplikasi ini.

46
b. Typography

Gambar 5.3 Typography

Gambar 5.3 tersebut menjelaskan font family yang digunakan dalam
desain aplikasi ini dengan berbagai jenis ukurannya. Untuk
penerapannya, typography ini menggunakan plugin yang sudah
terdapat dalam figma supaya dapat digunakan dalam desain
aplikasinya sehingga desainnya memiliki font yang konsisten
menggunakan font family Inter untuk tiap komponen aplikasinya atau
biasa disebut body text dan juga headingnya menggunakan jenis font
Lora yang terlihat lebih elegan dan juga lebih terlihat jelas.

47
c. Icon system

Gambar 5.4 Icon System

d. Button

Gambar 5.5 Button

48
e. Text field

Gambar 5.6 Text Field

f. Status bar

Gambar 5.7 Status Bar

49
 Dalam proses design rancangan aplikasi Remo OtoDrive ini
sangat penting adanya design system untuk mempermudah dan juga
mempercepat proses desain mockupnya. Selain itu design system ini
dapat menjaga kekonsistenan dari desain mockup sebuah aplikasi.
5.1.3 Design High Fidelity

Gambar 5.8 Design Halaman Awal dan Daftar

Dalam gambar 5.8 tersebut menampilkan alur dan tampilan
halaman awal dan dan halaman daftar. Sebelum masuk ke aplikasi
teresebut terdapat tampilan screen halaman awal dan pengguna harus
menekan tombol get started pada tampilan halaman awal tersebut.
Lalu pada halaman daftar, terdapat isian form untuk tempat mengisi
laman teks yang terdapat dalam tampilan tersebut. Namun, berhubung
ini hanya untuk tampilan, maka hanya diatur untuk statis yang mana
alur dari aplikasinya sudah ditentukan oleh yang mengatur. Jadi tidak
bisa mengetik secara manual. Hanya bisa diklik salah satu huruf saja.

50
 Gambar 5.9 Design Login

Gambar 5.10 Design Halaman Home

Gambar 5.10 tersebut desain halaman home tersebut terdapat
perbedaan dari tampilan yang belum login dan yang sudah login.

51
 Gambar 5.11 Design fitur filter

Gambar 5.12 Design Fitur Pencarian

Gambar 5.12 menjelaskan detil dari alur tampilan pencarian. Hingga
menampilkan hasil pencarian yang telah diketikkan.

52
 Gambar 5.13 Design Fitur Filter Merk

Gambar 5.14 Desain informasi mobil

Gambar 5.14 itu memiliki perbedaan akun sudah login dan belum.
Untuk yang belum tidak memiliki tombol untuk merental.

53
 Gambar 5.14 Design Informasi Mobil
Gambar 5.14 itu memiliki perbedaan akun sudah login dan belum.
Untuk yang belum tidak memiliki tombol untuk merental.

Gambar 5.15 Design Riwayat dan Fitur Pick-up

54
 Gambar 5.16 Design Sewa Saya

Gambar 5.17 Design Fitur Pembayaran

Gambar 5.17 dan gambar 5.16 adalah tampilan desain yang
merupakan fitur utama dari aplikasi Remo OtoDrive.

55
 Gambar 5.18 Design Fitur Drop-Off

Gambar 5.19 Design Akun Login dan Belum Login

Gambar 5.18 dan gambar 5.19 adalah tampilan dari fitur drop-off yang
merupakan salah satu fitur utama yang lain serta untuk loginnya.

56
 5.2 Testing
Setelah diselesaikannya proses desain dan juga membuat
prototipe alur dari aplikasinya diperlukan suatu pengujian terhadap
pengguna untuk mengetahui seberapa efisien desain dari aplikasi yang
sudah dibuat. Untuk menghindari atau asumsi, usability testing
sebaiknya dilakukan kepada orang yang benar-benar acak.
Untuk metode testing desain aplikasi ini menggunakan
metode in-depth interview. Sebelum melakukan hal tersebut, terlebih
dahulu menyiapkan sebuah dokumentasi wawancara.
5.2.1 Dokumentasi Wawancara
Nama aplikasi Remo OtoDrive
Metode riset In-Depth Interview
Tanggal riset 21 April 2022
Tabel 5.1 Persiapan Riset
1. Tujuan riset
a. Mencari tahu Mencari tahu bagaimana pengguna menemukan
kemudahan mengakses informasi mobil yang akan disewa dan
juga dapat dijadwalkan sistem bookingnya.
b. Mencari tahu bagaimana pengguna menyewa mobil melalui
aplikasi Remo OtoDrive.
2. Kriteria responden
a. Jenis kelamin pria atau wanita
b. Usia responden 20-40 tahun
c. Profesi responden tidak spesifik
d. Berdomisili di Negara Indonesia
e. Memiliki kebutuhan mobil namun tidak memiliki mobil

57
 f. Pengguna jasa sewa mobil
3. Daftar pertanyaan
a. Silakan perkenalan diri (responden) meliputi nama lengkap,
usia, dan domisili
b. Apa profesi Anda?
c. Seberapa sering Anda membutuhkan sebuah mobil?
d. Bagaimana cara Anda menyewa sebuah mobil?
Contoh:
i. Mendatangi tempat persewaan
ii. Melalui aplikasi persewaan mobil secara online
iii. Mengapa memilih opsi tersebut?
e. Apakah Anda pernah menyewa mobil di aplikasi lain selain
Remo OtoDrive? Jika ya, aplikasi apa yang Anda gunakan?
f. Apakah Anda mengalami kesulitan selama menyewa mobil
melalui aplikasi Remo OtoDrive? Jika iya, bisa ceritakan
kesulitan yang dialami?
g. Bagaimana kesan Anda mengenai aplikasi Remo Otodrive?
h. Apa yang Anda harapkan dari aplikasi Remo OtoDrive untuk
kedepannya?
4. Skenario riset
a. Berikan salam saat bertemu dengan responden
b. Perkenalkan diri dan jelaskan maksud tujuan kegiatan yang
akan dilakukan
c. Jelaskan alur proses kegiatan dari awal sampai akhir
d. Meminta responden untuk memperkenalkan diri mulai dari
Nama, Profesi, dan Domisili

58
e. Melakukan wawancara berdasarkan daftar pertanyaan
f. Menjelaskan singkat tentang aplikasi Remo OtoDrive
g. Memberikan link Figma kepada responden
h. Menjelaskan singkat tentang apa yang harus dilakukan dan
cara mengoperasikan Figma Prototype oleh responden
i. [Tugas 1] Meminta pengguna untuk melakukan Pendaftaran
dan Login ke dalam aplikasi (berhenti di halaman Home) dan
observasi apa yang dilakukan oleh responden
i. Tanyakan apakah ada kendala?
ii. Apakah opsi pendaftaran sudah sesuai dengan kebutuhan
pengguna? Mengapa?
j. [Tugas 2] Meminta pengguna untuk melakukan pencarian
merk mobil melalui bar pencarian lalu dilanjutkan dengan
menekan logo merk mobilnya dan observasi apa yang
dilakukan oleh responden
i. Tanyakan apakah ada kendala?
ii. Untuk button logo merk mobil apakah dapat membantu
pengguna dalam pencarian mobil yang akan disewa?
Mengapa?
iii. Apakah informasi yang ditampilkan sudah memenuhi
kebutuhan?
k. [Tugas 3] Meminta pengguna untuk menyewa mobil dengan
cara mencari mobilnya terlebih dahulu menggunakan fitur
filter lalu melihat ketersediaan dari mobilnya dengan melalui
metode pick-up dan observasi apa yang dilakukan oleh
responden.

59
 i. Tanyakan apakah ada kendala?
ii. Apakah fitur filternya membantu?
iii. Apakah kesulitan menemukan informasinya?
iv. Apakah informasi yang ditampilkan apakah sudah sesuai
dengan kebutuhan pengguna? Mengapa?
l. [Tugas 4] Meminta pengguna untuk menyewa mobil dengan
cara mencari mobilnya terlebih dahulu menggunakan fitur
filter lalu melihat ketersediaan dari mobilnya dengan melalui
metode Drop-off dan observasi apa yang dilakukan oleh
responden.
i. Tanyakan apakah ada kendala?
ii. Apakah ketersediaan informasi dari fitur Pembayarannya
sudah cukup?
iii. Apakah kesulitan menemukan informasinya?
iv. Apakah informasi yang ditampilkan apakah sudah sesuai
dengan kebutuhan pengguna? Mengapa?
m. [Tugas 5] Meminta pengguna untuk logout dari akunnya dan
observasi apa yang dilakukan oleh responden
i. Tanyakan apakah ada kendala?
ii. Apakah informasi yang ditampilkan apakah sudah sesuai
dengan kebutuhan pengguna? Mengapa?
n. Menanyakan tentang tingkat Single Ease Question kepada
responden.
i. Menurut Anda, setelah menyelesaikan Tugas 1-5,
seberapa mudah penggunaannya dalam skala 1-5.
o. Penutup dan sampaikan terima kasih.

60
5. Tabel jawaban responden

Jawaban
No. Pertanyaan
Toufan

Silahkan perkenalan diri Toufan Adi Yansah, 22

1 (responden) meliputi nama tahun, Domisili Surabaya
lengkap, usia, dan domisili

Apa profesi Anda? Mahasiswa

2

Seberapa sering Anda Cukup sering

3 membutuhkan sebuah
mobil?

Bagaimana cara Anda Mendatangi langsung ke

4
menyewa sebuah mobil? tempat persewaan

Apakah Anda pernah Tidak pernah

menyewa mobil di aplikasi

5 lain selain Remo OtoDrive?

Jika ya, aplikasi apa yang
Anda gunakan?

Apakah Anda mengalami Dari segi bahasa seharusnya

kesulitan selama menyewa menggunakan bahasa
6
mobil melalui aplikasi Remo Indonesia yang dapat
OtoDrive? Jika iya, bisa

61
 ceritakan kesulitan yang dimengerti oleh orang
dialami? Indonesia secara umum.

Bagaimana kesan Anda Sudah baik, Interfacenya

7 mengenai aplikasi Remo juga sudah sangat menarik

Otodrive?

Aplikasi ini dapat

Apa yang Anda harapkan
dikembangkan menjadi lebih
8 dari aplikasi Remo OtoDrive
baik lagi baik dari segi
untuk kedepannya?
tampilan.

Tabel 5.2 Jawaban Toufan

Jawaban
No. Pertanyaan
Ali Gufron

Silahkan perkenalan diri Ali Gufron, 21 tahun,

1 (responden) meliputi nama Domisili Bangkalan
lengkap, usia, dan domisili

Apa profesi Anda? Mahasiswa

2

Seberapa sering Anda Sangat Jarang

3 membutuhkan sebuah
mobil?

4 Bagaimana cara Anda Datang langsung

62
 menyewa sebuah mobil?

Apakah Anda pernah Tidak pernah

menyewa mobil di aplikasi

5 lain selain Remo OtoDrive?

Jika ya, aplikasi apa yang
Anda gunakan?

Apakah Anda mengalami Untuk pertamakali memang

kesulitan selama menyewa iya. Kesulitan karena
mobil melalui aplikasi Remo bingung memahami fitur
6
OtoDrive? Jika iya, bisa filter dan logo
ceritakan kesulitan yang
dialami?

Bagus, mempermudah kita

Bagaimana kesan Anda untuk menyewa mobil jadi

7 mengenai aplikasi Remo ga perlu repot untuk datang.

Otodrive? Interface sudah lumayan
bagus.

Harapannya untuk UI lebih

Apa yang Anda harapkan
dikembangkan lagi karena
8 dari aplikasi Remo OtoDrive
masih monoton. Di bagian
untuk kedepannya?
profil bisa dikembangkan.

Tabel 5.3 Jawaban Ali Gufron

63
 Jawaban
No. Pertanyaan
Alfian

Silahkan perkenalan diri Alfian Mahendra Ifandia, 21

1 (responden) meliputi nama tahun, Domisili Surabaya
lengkap, usia, dan domisili

Apa profesi Anda? Mahasiswa

2

Seberapa sering Anda Cukup sering

3 membutuhkan sebuah
mobil?

Bagaimana cara Anda Langsung ke tempat

4
menyewa sebuah mobil?

Apakah Anda pernah Belum pernah

menyewa mobil di aplikasi

5 lain selain Remo OtoDrive?

Jika ya, aplikasi apa yang
Anda gunakan?

Apakah Anda mengalami Saya pribadi tidak bingung.

kesulitan selama menyewa
mobil melalui aplikasi Remo
6
OtoDrive? Jika iya, bisa
ceritakan kesulitan yang
dialami?
Namun, mungkin segi
bahasa dikonsistenkan
menggunakan bahasa
nasional agar bisa digunakan
secara umum oleh WNI

64
 Salah satu revolusioner,
Bagaimana kesan Anda karena sangat jarang ada

7 mengenai aplikasi Remo aplikasi sewa mobil secara

Otodrive? online. Untuk interfacenya
sudah cukup rapi.

Harapannya untuk
login/daftar bisa diberikan di
Apa yang Anda harapkan awal dan bisa milih login

8 dari aplikasi Remo OtoDrive sebagai apa. Untuk fitur

untuk kedepannya? filter ada kategori tersedia
dan tidak serta ada jenis
mobilnya

Tabel 5.4 Jawaban Alfian

User Scenario Toufan Ali Gufron Alfian

Masuk dan Daftar 8 8 8

Pencarian 9 8 9

Pick-Up 8 7 7

Drop-Off 8 8 7

Logout 9 8 8
Tabel 5.5 Hasil Riset Kuantitatif
SEQ : 8 + 8,6 + 7,3 + 7,6 + 8,3 = 39,8 : 5 = 7,96

65
Dari hasil usability testing secara kualitatif menggunakan metriks
single ease question dihasilkan total nilai 7,96 yang mana angka
tersebut didasarkan dengan penilaian yang diberikan oleh pengguna.

User Scenario Problem Insight feedback

Masuk dan Bingung dengan tidak ribet dan sudah

Daftar status pendaftaran sesuai dengan alur
karena langsung ke pendaftaran pada
home. umumnya

Pencarian Bingung yang logo Fitur logo dapat

karena tidak semua membantu karena lebih
orang tau logo mobil praktis tidak perlu
mengetik

Pick-Up - Kendala di logo Fitur filter dapat

filter kurang user membantu menyaring
friendly. kategori
Menggunakan
bahasa inggris
- Bingung terkait
aplikasi

Drop-Off Tidak ada kendala - Dari segi informasi

sudah cukup baik dan
lengkap
- Alangkah baiknya
jika diberi live
location (tracking)

Logout Tidak ada kendala Cukup informatif dan

jelas.

Tabel 5.6 Hasil Riset Kualitatif

66
5.3 Design Timeline
Dalam proses pengerjaannya, project ini terdapat urutan waktu
pengerjaan yang sudah saya buat setelah mengerjakan proyek ini.

Gambar 5.20 Design Timeline

Sesuai dengan tampilan pada gambar 5.20, hal tersebut

menjelaskan bahwa untuk mengerjakan proyek ini membutuhkan
waktu hingga kurang lebih 1 bulan. Project ini dimulai di bulan Maret
dan diawali dengan fase empathize untuk memahami kebutuhan dari
user dan juga permasalahan yang dialami oleh user. Sambil melalui
fase empathize yang berjalan 1 minggu lebih, penulis melanjutkan
project ini pada fase define dengan mengerjakan sedikit demi sedikit
hasil dari fase empathize yaitu membuat user persona dan user
journey maps. Sambil mengerjakan hal-hal di fase define, penulis

67
mulai mengonsep UX dari aplikasi ini dengan membuat information
architecture dan juga user flow. Setelah mendapatkan Information
architecture, saya memulai fase prototipe dengan membuat wireframe
terlebih dahulu lalu berlanjut dengan membuat desain high fidelity dan
prototyping dengan mencoba alur yang telah penulis buat. Lalu
diakhiri dengan fase usability testing yang mana saya mewawancari
user yang telah mencoba design aplikasi yang telah penulis rancang.
Selama mengerjakan ini penulis dibantu oleh fasilitator dan
juga didampingi oleh fasilitator yang sudah bekerja sama dengan
mitra yang penulis tempati untuk belajar. Untuk itu, penulis
mendapatkan banyak sekali pengalaman selama mengerjakan dan
juga menyelesaikan rangkaian dari proyek ini. Dimulai dengan fase
empathize dan diakhiri dengan fase testing. Dalam menyelesaikan fase
testing yang berlangsung tersebut, penulis memiliki jangka waktu
kurang lebih selama satu minggu yang dimulai dengan mencari
responden yang memenuhi persyaratan dari kriteria yang sudah
ditentukan dalam dokumen yang telah penulis rancang. Yang mana
hal yang berperan dalam fase ini adalah UX researcher. Yang mana
kegiatan utamanya adalah untuk melakukan penelitian.

68
 BAB VI
PENUTUP

Pada bab ini berisi kesimpulan yang dapat diambil dari

perancangan desain aplikasi mobile, serta saran yang nantinya bisa
bermanfaat untuk penelitian selanjutnya.
6.1 Kesimpulan
Merancang tampilan UI/UX aplikasi Remo OtoDrive
menggunakan metode design thinking merupakan metode yang tepat.
Meskipun pada akhirnya hasil akhir dari proyek ini hanyalah sebuah
produk yang hanya prototipe sebuah tampilan dari perancangan
aplikasi saja, namun dalam proses pembuatannya melalui banyak
sekali tahapan yang mana tahapan ini dimulai dengan riset langsung
kepada pengguna yang memiliki keresahan terhadap suatu masalah.
Lalu dengan dirancangnya sebuah tampilan aplikasi yang
menggunakan metode design thinking ini diharapkan dapat
memberikan jawaban solusi dari sebuah permasalahan tersebut.
Ini lah pentingnya merancang desain tampilan dan juga
pendalaman fitur-fitur aplikasi terlebih dahulu lalu diujikan kepada
penggunanya langsung untuk mengetahui keefektivitasan sebuah
aplikasi kepada pengguna agar nantinya ketika sudah didevelop, biaya
yang dikeluarkan oleh suatu perusahaan dapat menjawab
permasalahan dari penggunanya. Sehingga aplikasi yang sudah
diterbitkan dan diedarkan secara resmi di platform penjualan aplikasi
baik google play store ataupun app store dan aplikasi serupa, sudah
bisa secara efektif sesuai dengan kebutuhan dari pengguna. Sehingga

69
dapat meningkatkan pengguna yang mengunduh aplikasi tersebut.
Untuk perancangan aplikasi Remo OtoDrive ini memiliki fitur pick-
up dan drop-off yang mana fitur tersebut dapat digunakan secara
efektif oleh para penggunanya dalam menyewa mobil dengan
memiliki pilihan untuk mengambil atau mobilnya diantarkan hingga
ke rumah penyewanya.
6.2 Saran
Kedepannya rancangan aplikasi Remo OtoDrive ini dapat
ditingkatkan mulai dari segi tampilan yang lebih fresh dan juga hal-
hal lain yang dapat meningkatkan peminat dari para penggunanya
untuk mengunduh serta memasang aplikasi ini. Selain itu, hasil dari
usability testing yang sudah tertera pada bab 5, harapannya dapat
dipertimbangkan untuk proses redesain yang mana proses tersebut
adalah untuk memperbaiki baik dari segi tampilan maupun fitur yang
sudah ada pada rancangan aplikasi ini. Lalu kemudian setelah tahap
redesain dilanjutkan kembali usability testing tahap ke dua untuk
memastikan aplikasi ini siap untuk didevelop dan digunakan oleh
banyak pengguna.

70
 DAFTAR PUSTAKA

[1] M. L. Lazuardi and I. Sukoco, “Design Thinking David Kelley

& Tim Brown: Otak Dibalik Penciptaan Aplikasi Gojek,”
Organum J. Saintifik Manaj. dan Akunt., vol. 2, no. 1, pp. 1–
11, 2019, doi: 10.35138/organum.v2i1.51.
[2] N. Hasan, “APLIKASI PENYEWAAN MOBIL BERBASIS
WEBSITE ( Studi Kasus pada Rental Mobil Lotus Purworejo
),” Bianglala Inform., vol. 7, no. 2, pp. 117–121, 2019.
[3] E. C. Shirvanadi, “Perancangan Ulang Ui/Ux Situs E-
Learning Amikom Center Dengan Metode Design Thinking
(Studi Kasus: Amikom Center),” Peranc. Ulang Ui/Ux Situs
E-Learning Amikom Cent. Dengan Metod. Des. Think. (Studi
Kasus Amikom Center), p. 8, 2021, [Online]. Available:
https://dspace.uii.ac.id/handle/123456789/34156
[4] F. Fariyanto and F. Ulum, “Perancangan Aplikasi Pemilihan
Kepala Desa Dengan Metode Ux Design Thinking (Studi
Kasus: Kampung Kuripan),” J. Teknol. dan Sist. Inf., vol. 2,
no. 2, pp. 52–60, 2021, [Online]. Available:
http://jim.teknokrat.ac.id/index.php/JTSI
[5] G. Karnawan, “Implementasi User Experience Menggunakan
Metode Design Thinking Pada Prototype Aplikasi Cleanstic,”
J. Teknoinfo, vol. 15, no. 1, p. 61, 2021, doi:
10.33365/jti.v15i1.540.
[6] M. A. Muhyidin, M. A. Sulhan, and A. Sevtiana,

71
“Perancangan Ui/Ux Aplikasi My Cic Layanan Informasi
Akademik Mahasiswa Menggunakan Aplikasi Figma,” J.
Digit, vol. 10, no. 2, p. 208, 2020, doi: 10.51920/jd.v10i2.171.

72
 DAFTAR RIWAYAT HIDUP

Nama : Muhammad Yafie Anwary Rahman

Tempat, Tanggal Lahir : Lamongan, 24 Februari 2000
Alamat : Jalan Atambua E5/30 Perumahan
Permata Bonang, Kelurahan Perbon,
Kecamatan Tuban, Kabupaten Tuban
No. Telepon : 0812-4900-4534
Email : yafiesyn00@gmail.com

73