PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf ·...

55
MASTUR FATULLAH DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR BOGOR 2018 PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE KAMPUS IPB DRAMAGA MENGGUNAKAN METODE DESIGN SPRINT

Transcript of PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf ·...

Page 1: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

MASTUR FATULLAH

DEPARTEMEN ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

INSTITUT PERTANIAN BOGOR

BOGOR

2018

PERANCANGAN MOBILE USER EXPERIENCE APLIKASI

EXPLORE KAMPUS IPB DRAMAGA MENGGUNAKAN

METODE DESIGN SPRINT

Page 2: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN
Page 3: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

PERNYATAAN MENGENAI SKRIPSI DAN

SUMBER INFORMASI SERTA PELIMPAHAN HAK CIPTA

Dengan ini saya menyatakan bahwa skripsi berjudul Perancangan Mobile

User Experience Aplikasi Explore Kampus IPB Dramaga Menggunakan Metode

Design Sprint adalah benar karya saya dengan arahan dari komisi pembimbing dan

belum diajukan dalam bentuk apa pun kepada perguruan tinggi mana pun. Sumber

informasi yang berasal atau dikutip dari karya yang diterbitkan maupun tidak

diterbitkan dari penulis lain telah disebutkan dalam teks dan dicantumkan dalam

Daftar Pustaka di bagian akhir skripsi ini.

Dengan ini saya melimpahkan hak cipta dari karya tulis saya kepada Institut

Pertanian Bogor.

Bogor, Mei 2018

Mastur Fatullah

NIM G64130108

Page 4: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

ABSTRAK

MASTUR FATULLAH. Perancangan Mobile User Experience Aplikasi Explore

Kampus IPB Dramaga Menggunakan Metode Design Sprint. Dibimbing oleh AUZI

ASFARIAN.

Institut Pertanian Bogor (IPB) merupakan lembaga pendidikan yang memiliki

kampus dengan luas wilayah 250 hektar di Dramaga, Bogor. Hal ini menyebabkan

lokasi antara gedung berjauhan dan membuat pengguna sulit mendapatkan akses

informasi tentang sarana dan prasarana. Tujuan dari penelitian ini adalah

membangun rancangan aplikasi explore kampus IPB Dramaga berdasarkan

kebutuhan pengguna yang memperhatikan aspek user experience (UX) dalam

perancangannya. Metode yang digunakan yaitu design sprint dengan dua kali iterasi.

Hasil dari penelitan ini berupa rancangan aplikasi prototipe yang dilakukan hanya

tahap medium fidelity. Pada iterasi pertama, prototipe telah diuji kepada 3 orang

pengguna diperoleh ide solusi informasi rute, posisi, dan jadwal kedatangan

transportasi bus untuk iterasi berikutnya. Pada iterasi kedua prototipe yang

dikembangkan berfokus pada transportasi bus, dan telah diuji kepada 4 orang

pengguna. Berdasarkan hasil data pengujian prototipe, seluruh pengguna

menyatakan rancangan aplikasi sudah baik dan sesuai kebutuhan pengguna.

Kata kunci: aplikasi explore kampus IPB, design sprint, sarana dan prasarana, user

experience

ABSTRACT

MASTUR FATULLAH. Designing the Mobile User Experience Applications

Explore Campus IPB Dramaga Using Design Sprint Method. Supervised by AUZI

ASFARIAN.

Bogor Agricultural University is an educational institution that has a

campus with area of 250 hectares in Dramaga, Bogor. This causes the location

between buildings far apart and makes it difficult for users to access information

about facilities and infrastructures. The purpose of this study is to build the

application design campus IPB Dramaga based on user requirement by considering

of user experience aspect in design. The method used is design sprint with two times

iteration. The result of this research is prototype application design which is

implemented medium fidelity stage. In the first iteration, the prototype has been

tested by 3 users acquired idea of route information solution, position, and arrival

schedule of bus transportation for the next iteration. At the second iteration the

developed prototype focuses on bus transport, and has been tested by 4 users. Based

on the results of prototype testing data, all users declared the application design is

good and according to user requirement.

Keywords: application explore campus IPB, design sprint, facilities and infrastructure,

user experience

Page 5: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

Skripsi

sebagai salah satu syarat untuk memperoleh gelar

Sarjana Komputer

pada

Departemen Ilmu Komputer

MASTUR FATULLAH

DEPARTEMEN ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

INSTITUT PERTANIAN BOGOR

BOGOR

2018

PERANCANGAN MOBILE USER EXPERIENCE APLIKASI

EXPLORE KAMPUS IPB DRAMAGA MENGGUNAKAN

METODE DESIGN SPRINT

Page 6: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

Penguji:

1 Firman Ardiansyah, SKom MSi

2 Dean Apriana Ramadhan, SKomp MKom

Page 7: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN
Page 8: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

Judul Skripsi : Perancangan Mobile User Experience Aplikasi Explore Kampus

IPB Dramaga Menggunakan Metode Design Sprint

Nama : Mastur Fatullah

NIM : G64130108

Disetujui oleh

Auzi Asfarian, SKomp MKom

Pembimbing

Diketahui oleh

Prof Dr Ir Agus Buono, MSi Mkom

Ketua Departemen

Tanggal Lulus:

Page 9: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

PRAKATA

Puji dan syukur penulis panjatkan kepada Allah subhanahu wa ta’ala karena

atas rahmat dan ridha-Nya lah skripsi dengan judul Perancangan Mobile User

Experience Aplikasi Explore Kampus IPB Dramaga Menggunakan Metode Design

Sprint dapat diselesaikan. Penulisan skripsi ini dilakukan dalam rangka memenuhi

salah satu syarat untuk mencapai gelar Sarjana Komputer pada Fakultas

Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor. Penulis

menyadari dalam perjalanan masa perkuliahan sampai dengan pencapaian akhir ini

telah banyak pihak yang membantu dan mendukung. Oleh karena itu, penulis ingin

mengucapkan terima kasih kepada:

1 Orang tua tercinta yaitu ibu Uwat Suprihati dan bapak Moh.Abdul Latif yang

selalu memberikan doa, dukungan dan membiayai penulis selama menempuh

perkuliahan. Penulis sangat bangga memiliki kedua orangtua seperti beliau;

2 Kakak-kakak tercinta: Dewi Sarifah Tullah, Surtinah Tullah, dan keluarga

besar saya yang selalu memberi doa, motivasi dan dukungan materi ketika

penulis menjalani masa perkuliahan;

3 Auzi Asfarian, SKomp MKom sebagai pembimbing skripsi yang telah banyak

memberikan motivasi, dukungan dan arahan bagi penulis hingga penelitian ini

dapat diselesaikan dengan baik;

4 Firman Ardiansyah, SKom MSi dan Dean Apriana Ramadhan, SKomp MKom

sebagai penguji skripsi yang telah memberikan saran dan masukan dalam

penelitian;

5 Dosen dan staf Departemen Ilmu Komputer IPB selama penulis menjalani

masa perkuliahan hingga saat ini;

6 Desi Putri Pertiwi yang selalu memberikan doa dukungan serta telah sangat

membantu dalam mengevalusi hasil penelitian penulis;

7 Teman-teman Ilmu Komputer 50 khususnya: Maul, Akhiyar, Febri, Ryan, dan

Hadiyan sahabat terbaik selama penulis menjalani masa perkuliahan;

8 Teman-teman Ilkom angkatan 50 yang sudah bersama-sama berjuang;

9 Dan semua pihak lainnya yang terlibat dalam penulisan skripsi ini yang tidak

dapat disebutkan namanya satu per satu.

Semoga segala bantuan, bimbingan, motivasi, dan dukungan yang telah

diberikan kepada penulis senantiasa dibalas oleh Allah subhanahu wa ta’ala dan

semoga skripsi ini dapat bermanfaat bagi semua pihak yang membutuhkan.

Bogor, Mei 2018

Mastur Fatullah

Page 10: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

DAFTAR ISI

DAFTAR TABEL vi

DAFTAR GAMBAR vi

DAFTAR LAMPIRAN vii

PENDAHULUAN 1

Latar Belakang 1

Perumusan Masalah 2

Tujuan Penelitian 2

Manfaat Penelitian 2

Ruang Lingkup Penelitian 2

METODE 2

Understand 3

Skecth 4

Decide 4

Prototype 4

Validate 5

HASIL DAN PEMBAHASAN 7

Iterasi Pertama 7

Understand 7

Sketch 8

Decide 11

Prototype 14

Validate 17

Iterasi Kedua 19

Understand 19

Sketch 19

Decide 23

Prototype 24

Validate 27

SIMPULAN DAN SARAN 28

Simpulan 28

Page 11: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

Saran 29

DAFTAR PUSTAKA 29

LAMPIRAN 30

RIWAYAT HIDUP 42

DAFTAR TABEL

1 Pertanyaan Kuesioner 3

2 Kegiatan dan pertanyaan iterasi pertama wawancara 5 3 Kegiatan dan pertanyaan iterasi kedua wawancara 6 4 Catatan iterasi pertama 8 5 Fitur iterasi pertama 11 6 Catatan iterasi kedua 19 7 Fitur iterasi kedua 23

DAFTAR GAMBAR

1 Tahapan Design Sprint 2

2 Empat Langkah Sketch (Knapp et al. 2016) 4 3 Map 7 4 Catatan iterasi pertama 8 5 Ide iterasi pertama 9 6 Crazy 8's 10 7 Sketsa iterasi pertama 11 8 Storyboard iterasi pertama 12 9 Stroyboard lanjutan iterasi pertama 13 10 Layout menu 14 11 Layout fitur bus 15

12 Layout hasil pencarian rute bus 15 13 Layout mobil listrik 15

14 Layout direct lokasi mobil listrik 15 15 Layout shelter sepeda, gedung kuliah, tempat shalat, kantin, dan parkir 16 16 Kegiatan pengujian kepada pengguna 17

17 User Persona 17 18 Experience map iterasi pertama 18

19 Ide iterasi kedua 20 20 Crazy 8's iterasi kedua 20 21 Sketsa cari rute iterasi kedua 21

22 Sketsa koridor iterasi kedua 21 23 Sketsa hasil cari rute iterasi kedua 22

24 Sketsa informasi umum dan jadwal iterasi kedua 22 25 Storyboard iterasi kedua 24

26 Layout pencarian rute sebelum dan sesudah perbaikan 25 27 Layout pemilihan lokasi rute sebelum dan sesudah perbaikan 25

Page 12: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

28 Layout informasi hasil pencarian rute sebelum dan sesudah perbaikan 26 29 Layout koridor bus 26 30 Layout jadwal halte 27 31 Layout informasi umum bus 27 32 Experience map iterasi kedua 27

DAFTAR LAMPIRAN

1 Kuesioner aplikasi explore kampus IPB Dramaga 30 2 Antarmuka aplikasi explore kampus IPB Dramaga 35

3 Daftar ringkasan wawancara responden five act interview iterasi pertama 37 4 Daftar ringkasan wawancara responden five act interview iterasi kedua 40

Page 13: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN
Page 14: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

PENDAHULUAN

Latar Belakang

Institut Pertanian Bogor merupakan Perguruan Tinggi Negeri terbesar yang

diresmikan sejak 1 September 1963, berdasarkan Surat Keputusan Menteri

Perguruan Tinggi dan Ilmu Pengetahuan Nomor 91 Tahun 1963 dan disahkan oleh

Keputusan Presiden Republik Indonesia Nomor 279 Tahun 1965. IPB memiliki

beberapa kampus, salah satunya kampus yang terletak di Dramaga, Jawa Barat.

Kampus IPB Dramaga memiliki luas wilayah 250 ha dengan jumlah mahasiswa

21 176 orang yang meliputi mahasiswa Starta-1 (S1), Strata-2 (S2), dan Strata-3

(S3). Kendala yang dihadapai dari luas wilayah dan jumlah mahasiswa, yaitu

sulitnya mendapatkan informasi mengenai sarana dan prasarana di kampus IPB

Dramaga, terutama untuk mahasiswa baru yang masih minim pengetahuan seputar

kampus.

Sarana dan prasarana merupakan alat penunjang keberhasilan suatu lembaga

institusi pendidikan untuk memberikan pelayanan kepada seluruh civitas yang ada

didalamnya, karena apabila kedua hal ini tidak tersedia dan sulit untuk didapatkan

akses informasinya maka semua kegiatan tidak akan mencapai hasil yang

diharapkan sesuai dengan rencana. Pentingnya sarana seperti media belajar,

transportasi dan prasarana seperti kantin, tempat berolahraga, tempat beribadah,

dan tempat lain-lainnya dalam suatu lembaga institusi pendidikan tertuang dalam

Peraturan Pemerintah Republik Indonesia Nomor 19 Tahun 2005 Pasal 42. Sebagai

lembaga institusi pendidikan, IPB memerlukan dukungan untuk kemudahan akses

terhadap informasi saranan dan prasarana.

Perkembangan teknologi dan informasi untuk mendukung kemudahan dalam

berbagai aktivitas berkembang pesat seiring dengan meningkatnya kebutuhan

informasi yang diperlukan manusia. Saat ini teknologi dan informasi banyak

dikembangkan di komputer yang berbasis desktop maupun media elektronik

berbasis mobile seperti handphone, smartphone, tablet PC, dan lain-lain. Para

pengembang teknologi informasi sedang menyorti perkembangan tingkah laku

manusia yang beralih ke media berbasis mobile untuk mendukung tingginya

mobilitas sehingga memudahkan manusia untuk mengakses suatu informasi. Hasil

riset dari Statista, pengguna komputer berbasis mobile (smartphone) di Indonesia

pada tahun 2016 mencapai 20.63% dari populasi penduduk Indonesia dan terus naik

pada tahun 2017 menjadi sebesar 23.71%. Berdasarkan hasil tersebut, pemanfaatan

komputer berbasis mobile menjadi sebuah aplikasi untuk membantu aktifitas sehari-

hari dapat diterapkan di Indonesia.

Pada tahap pengembangan aplikasi, kebutuhan aspek usability dan user

experience (UX) harus turut diperhatikan. Garrett 2011 menjelaskan perancangan

aplikasi harus memperhatikan unsur UX disamping kebutuhan secara fungsional

agar dapat dirasakan langsung manfaatnya oleh pengguna. Aplikasi Explore

Kampus IPB dirancang agar dapat mendukung kegiatan civitas akademika

khusunya mahasiswa baru dalam mendapatkan kemudahan akses terhadap

informasi sarana dan prasarana yang telah ada di kampus IPB Dramaga, sehingga

tercapainya hasil yang diharapkan sesuai dengan rencana kegiatan, dan

memberikan kenyaman dalam menjalankan aktivitas.

Page 15: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

2

Perumusan Masalah

Rumusan permasalahan pada penelitian ini adalah seperti apa mobile user

experience aplikasi Explore Kampus IPB yang tepat dan baik sehingga dapat

mendukung kegiatan aktifitas dan menciptakan pengalaman yang baik kepada

pengguna selama berada di kampus IPB Dramaga.

Tujuan Penelitian

Penelitian ini bertujuan membangun rancangan aplikasi Explore Kampus IPB

berdasarkan kebutuhan pengguna dengan memperhatikan unsur UX didalam

perancangannya.

Manfaat Penelitian

Hasil dari penelitian ini diharapkan dapat membantu civitas khususnya

mahasiswa baru dalam mendapatkan akses informasi terkait sarana dan prasarana

yang ada di wilayah kampus IPB Dramaga.

Ruang Lingkup Penelitian

Ruang lingkup dari penelitian ini adalah:

1 Prototipe dikembangkan sampai tahap medium fidelity.

2 Rancangan aplikasi untuk platform Android dengan ukuran layar 360 × 640

piksel.

3 Pengujian prototipe medium fidelity masing-masing dilakukan sebanyak satu

kali.

METODE

Penelitian ini menggunakan metode design sprint yang diperkenalkan oleh

Knapp et al (2016). Terdapat lima tahapan pada metode tersebut, yaitu understand,

sketch, decide, prototype, dan validate. Penelitian ini dilakukan dengan dua kali

iterasi, iterasi pertama membuat rancangan keseluruhan masalah yang diperlukan

dan iterasi kedua memilih fokus perancangan terhadap salah satu fitur yang

dikembangkan. Tahapan setiap iterasi tersebut dilakukan secara terurut seperti lima

hari kerja yang dimulai dari understand hingga ke validate (Gambar 1).

Gambar 1 Tahapan Design Sprint

Page 16: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

3

Understand

Pemetaan masalah mengenai rancangan aplikasi yang akan digunakan oleh

pengguna. Iterasi pertama, pemetaan masalah dilakukan dengan cara identifikasi

kebutuhan pengguna mengenai sarana dan prasarana kampus IPB Darmaga yang

dilakukan menggunakan kuesioner. Hasil data kuesioner kemudian diolah dan

digunakan untuk tahapan sketch iterasi pertama. Kuesioner yang digunakan

mengacu pada penelitian yang dilakukan Nadhirah (2014) dapat dilihat pada Tabel

1. Pada iterasi kedua, pemetaan masalah dilakukan dengan pemilihan fokus untuk

perancangan satu fitur yang sudah didapat dari hasil iterasi pertama. Fokus

perancangan satu fitur dipilih berdasarkan solusi untuk menjawab latar belakang

masalah penelitan dan berdasarkan hasil validate prototipe rangcangan iterasi

pertama.

Tabel 1 Pertanyaan Kuesioner

No Pertanyaan

1 Biodata

2 Bagaimana sarana dan prasarana yang ada di kampus IPB Dramaga?

3 Bagaimana akses terhadap informasi sarana dan prasarana yang ada di

kampus IPB Dramaga?

4 Jika diberikan skala 1-10, angka berapa yang Anda berikan sebagai

kepuasan terhadap sarana dan prasarana saat berada di kampus IPB

Dramaga

5 Ceritakan hal buruk apa yang pernah anda alami terhadap sarana dan

prasarana yang ada di kampus IPB Dramaga

6 Apakah Anda memiliki telepon seluler?

7 Apakah telepon seluler Anda terhubung dengan koneksi internet?

8 Sistem Operasi Perangkat Mobile Anda?

9 Aplikasi yang paling sering Anda gunakan pada perangkat mobile?

10 Jika ada sebuah sistem yang dapat memberitahu sarana-prasarana yang ada

di kampus IPB Dramaga melalui telepon seluler, apakah sistem tersebut

akan bermanfaat?

11 Jika ada sebuah sistem berbasis mobile yang dapat keberadaan sarana

seperti bus kampus secara real time melalui telepon seluler. Apakah

berniat mengunduh dan menggunakannya?

12 Apakah perlu ada fungsi untuk menambahkan tootlip (pesan, kesan, saran,

dsb) untuk setiap sarana-prasarana yang ada di Kampus IPB Dramaga?

Setalah didapatkan hasil pemetaan masalah dilanjutkan membuat sebuah map

yang merupakan alur langkah-langkah pengguna mendapatkan hasil tujuan akhir

jangka panjang. Pembuatan map dibuat dengan menuliskan atau menggambarkan

pengguna sebagai aktor utama dan tujuan akhir dari perancangan disebelah

kanannya. Gambar atau tuliskan diantara keduanya sebuah langkah-langkah yang

merupakan interaksi antara pengguna dan tujuan akhir. Map yang telah dibuat

memunculkan catatan-catatan pertanyaan solusi bagaimana menjawab

permasalahan yang ada. Hasil dari tahapan ini berupa map dan catatan digunakan

untuk mencari dan menggambarkan solusi dari tahap selanjutnya perancangan

aplikasi explore kampus IPB.

Page 17: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

4

Skecth

Pencarian solusi dengan cara mengabungkan ide-ide digunakan untuk

perancangan fungsionalitas dan konten yang akan ditampilkan pada aplikasi explore

kampus IPB. Solusi dan ide-ide dibuat menjadi sebuah sketsa aplikasi dengan cara

mengikuti proses empat langkah yang terdiri dari catatan, ide, 8 crazy’s, dan sketsa

digambarkan atau ditulis pada kertas.

Gambar 2. Empat Langkah Sketch (Knapp et al. 2016)

Catatan dibuat dari hasil pemetaan masalah pada tahapan pertama berisi

pertanyaan-pertanyaan bagaiaman cara menjawab masalah yang digunkanan untuk

memilih solusi. Catatan diubah kedalam bentuk ide-ide yang bisa menjawab

permasalahan pengguna dan rancangan aplikasi explore kampus IPB Darmaga.

Kemudian ide-ide favorit dipilih dan diimplementasikan untuk kebutuhan

perancangan aplikasi. Proses berikutnya crazy 8’s yang merupakan gagasan ide-ide

yang digambarkan dalam waktu singkat pada sebuah lembar kertas yang dibagi

menjadi delapan bagian. Proses terakhir berupa rancangan gambar sketsa yang

merupakan hipotesa terperinci untuk menjawab dan memecahkan masalah dengan

ide-ide yang telah didapat.

Decide

Pemilihan solusi dari setiap ide-ide yang memiliki peluang terbaik untuk

meraih tujuan jangka panjang dan membantu menyelesaikan masalah pengguna

aplikasi explore kampus IPB. Solusi dikategorikan berdasarkan prioritas dari hasil

analisis data kuesioner. Solusi-solusi yang sudah dipilih kemudian disalin dan

dibuat skenario. Skenario dibuat sesuai dengan persona pengguna yang ditulis

langkah demi langkah ke sebuah papan cerita untuk selanjutnya digunakan untuk

membuat prototipe.

Papan cerita dibuat menjadi langkah demi langkah pengguna sebagai karakter

utama yang berisi lima sampai lima belas skenario. Skenario langkah pertama dibuat

dengan cara bagaimana pengguna tahu atau menggunakan aplikasi explore Kampus

IPB. Skenario selanjutnya dibuat berdasarkan solusi-solusi dari ide-ide yang sudah

dipilih sampai pengguna menemukan tujuan akhir dari aplikasi yang dirancang.

Prototype

Pembuatan rancagan prototipe mobile aplikasi explore kampus IPB dari

skenario-skenario terbaik pada papan cerita. Perancangan aplikasi harus

memerhatikan aspek kontras dan keseragaman, konsistensi, penggunaan warna, dan

tipografi. Selanjutnya, pada iterasi pertama pengembangan prototipe medium

fidelity dibuat menggunakan perangkat lunak Axure RP Pro 8.0 dengan lisensi

pelajar. Pada iterasi kedua, prototipe medium fidelity dibuat menjadi satu fokus fitur

Catatan Ide

Crazy

8’s

Sketch

Gambar 2 Empat Langkah Sketch (Knapp et al. 2016)

Page 18: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

5

dan diperbaiki untuk dikembangkan dari rancangan sebelumnya. Selain itu

perancangan elemen-elemen visual dan style antarmuka aplikasi akan mengacu

pada Google Material Design Guidelines.

Tahapan ini juga dilakukan pengecekan kesesuaian hasil akhir pembuatan

prototipe dengan skenario yang ada pada papan cerita. Prototipe ini sudah dapat

merepresentasikan look, feel, dan behavior serta interaksi yang dilakukan

berdasarkan skenario yang dibuat (Nadhirah 2014).

Validate

Pengujian prototipe aplikasi merupakan serangkain tahapan wawancara

terstruktur untuk menggali informasi dan menguji kesesuaian prototipe oleh

mahasiswa IPB angkatan 54 tahun 2017 sebagai pengguna. Hasil pengujian

digunakan untuk membuat experience map dan user persona. Pada iterasi pertama,

pengujian prototipe dilakukan kepada tiga orang pengguna dan kegiatan yang

dilakukan pada saat wawancara dapat dilihat pada Tabel 2. Pada iterasi kedua,

pengujian prototipe dilakukan kepada empat orang pengguna dan kegiatan yang

dilakukan pada saat wawancara dapat dilihat pada Tabel 3. Tahapan wawancara

dibagi menjadi lima tahap, yaitu:

1 Friendly welcome: sambutan ramah tamah yang dilakukan pewawancara

kepada pengguna dan berkenalan dengan pengguna agar proses wawancara

menjadi lebih ringan dan natural. Pewawancara juga menyampaikan tujuan

dilaksanakannya wawancara kepada pengguna.

2 Context question: pewawancara memberikan pertanyaan konteks untuk

menggali informasi seputar kegiatan pengguna. Tahapan wawancara ini

dimanfaatkan untuk mengembangkan peta pengalaman pengguna.

3 Introduce the prototype: pewawancara memperkenalkan rancangan prototipe

aplikasi Explore Kampus IPB Darmaga kepada pengguna. Pewawancara

menekankan bahwa mereka tidak menguji pengguna, namun menguji

rancangan aplikasi dan meminta masukan-masukan dari pengguna untuk

meningkatkan kualitas dari sistem.

4 Tasks: pewawancara mempersilahkan pengguna untuk menggunakan prototipe

aplikasi Explore Kampus IPB Darmaga. Selama pengguna menggunakan

prototipe, pewawancara mempersilahkan pengguna untuk memberikan

komentar terhadap prototipe secara natural.

5 Quick debrief: pewawancara mengulas kembali tahapan-tahapan dari hasil

yang telah dilakukan oleh pengguna. Pewawancara meminta masukan

mengenai poin-poin apa yang masih kurang jelas dan saran terhadap rancangan

protitipe yang telah dikembangkan.

Tabel 2 Kegiatan dan pertanyaan iterasi pertama wawancara

Tahapan Kegiatan dan pertanyaan

Friendly Welcome Memulai pembicaraan dengan santai, berkenalan, dan basa

basi.

Context Question 1 Kegiatan apa saja yang anda lakukan selama berada di

kampus?

Page 19: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

6

Tahapan Kegiatan dan pertanyaan

2 Selama anda berada di kampus, sarana dan prasarana

apa saja yang anda ketahui dan yang anda gunakan?

3 Bagaimana cara mendapatkan informasi terhadap

sarana dan prasarana?

4 Informasi apa saja yang diperlukan untuk sarana dan

prasarana yang ada di kampus?

5 Selama berada di kampus untuk bepergian dari satu

tempat ke tempat lain menggunakan apa? Transportasi

kampus apa yang digunakan?

6 Apa kendala saat menggunakan sarana dan prasarana

di kampus IPB Dramaga?

7 Apa perangkat elektronik yang anda gunakan?

Task 1 Aplikasi mulai ditunjukan kepada mahasiswa

2 Jelaskan apa itu aplikasi Explore Kampus IPB

Dramaga

3 Memberikan maksud dan tujuan bahwa kita perlu

bantuan dari saurdara/i agar aplikasi dapat berjalan

dengan baik.

Debrief 1 Menanyakan pendapat tentang aplikasi explore

kampus?

2 Menanyakan saran untuk kedepannya. (tambahan

untuk aplikasi dsb)

3 Apakah mau memakai aplikasi ini kedepannya?

Tabel 3 Kegiatan dan pertanyaan iterasi kedua wawancara

Tahapan Kegiatan dan pertanyaan

Friendly Welcome Memulai pembicaraan dengan santai, berkenalan, dan basa

basi.

Context Question 1 Kegiatan apa saja yang anda lakukan selama berada di

kampus?

2 Sudah berapa lama berada di kampus IPB?

3 Selama anda berada di kampus pernahkah

menggunakan transportasi bus? Apa kendala yang

dihadapi?

4 Bagaimana cara mendapatkan informasi terhadap

sarana transportasi bus?

5 Perangkat elektronik apa yang sering digunakan?

Task 1 Aplikasi mulai ditunjukan kepada mahasiswa

2 Jelaskan apa itu aplikasi Explore Kampus IPB Darmaga

3 Memberikan maksud dan tujuan bahwa kita perlu

bantuan dari pengguna agar aplikasi dapat berjalan

dengan baik.

Debrief 1 Menanyakan pendapat tentang aplikasi explore

kampus?

Page 20: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

7

Tahapan Kegiatan dan pertanyaan

2 Menanyakan saran untuk kedepannya. (tambahan

untuk aplikasi dsb)

3 Apakah mau memakai aplikasi ini kedepannya?

HASIL DAN PEMBAHASAN

Iterasi Pertama

Understand

Pemetaan masalah dilakukan dengan cara survei kebutuhan pengguna

kepada tiga puluh empat responden mahasiswa IPB angkatan 54 tahun 2017 secara

online. Pertanyaan yang diajukan terdiri dari tiga bagian yaitu sarana dan prasarana,

penggunaan telepon seluler, dan kebutuhan serta respon terhadap aplikasi explore

kampus IPB yang akan diracang. Data hasil survei sebanyak 56% menyatakan puas

mengenai sarana dan prasarana yang tersedia di kampus IPB Dramaga. Namun

sebaliknya sebanyak 65% belum menyatakan puas terhadap kemudahan akses

informasi sarana dan prasaran yang tersedia. Seluruh responden memiliki telepon

seluler, sebanyak 84% selalu dan sering terhubung dengan koneksi internet.

Sebanyak 90% responden menunjukan minat yang tinggi untuk mengunduh dan

menggunakan aplikasi explore kampus IPB. Skala dari 1-5, sebanyak 25% orang

responden memberi angka 4, dan 65% responden memberi angka 5 terhadap

manfaat informasi yang ditawarkan.

Gambar 3 Map

Mahasiswa angkatan 54 tahun 2017 IPB menjadi aktor utama aplikasi explore

kampus IPB dan tujuan akhir dari hasil data kuesioner memiliki kesamaan yaitu

mendapatkan informasi yang tepat mengenani saranan prasarana yang tersedia di

kampus IPB Dramaga. Aktor dan tujuan akhir dari aplikasi kemudian di buat

menjadi sebuah map yang memiliki interaksi antara keduanya. Informasi alur

interaksi pengguna untuk mendapatkan tujuan akhir memiliki 4 poin utama yaitu

mencari di web, bertanya kepada orang, mencari petunjuk jalan, dan memilih

transportasi seperti pada Gambar 3. Hasil dari sebuah map tersebut memunculkan

catatan-catatan penting yang digunakan untuk tahap selanjutnya Gambar 4.

Page 21: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

8

Gambar 4 Catatan Iterasi Pertama

Sketch

Catatan

Pada tahap proses catatan, semua catatan yang ada pada tahap sebelumnya

ditulis ulang dan ditambahkan catatan-catatan baru. Catatan baru hasil dari proses

ini berisi pertanyaan bagaimana menjawab permasalahan rancangan aplikasi

explore kampus IPB, dan berisi solusi yang bisa dibuat untuk ide-ide peracangan

fungsional Tabel 4.

Tabel 4 Catatan iterasi pertama

No. Catatan

1 Bagaimana menyusun informasi yang tepat mengenai sarana dan prasrana?

2 Mungkinkah pengguna dapat mendapatkan informasi secara realtime?

3 Membuat aplikasi yang mudah digunakan?

4 Mempersingkat langkah pengguna?

5 Membuat aplikasi serupa seperti di web?

6 Bagaimana mengetahui informasi tanpa harus bertanya ke orang?

7 Bagaimana memberikan alternatif trasportasi?

8 Bagaimana memberikan informasi wilayah yang belum diketahui?

9 Memberikan informasi detail seperti shelter sepeda dan bus?

Ide

Perancangan fungsionalitas aplikasi explore kampus IPB Dramaga

dirancangan berdasarkan ide-ide dari tahap proses catatan. Selanjutnya, didapatkan

ide-ide untuk pembuatan fungsionalitas aplikasi explore kampus IPB. Ide-ide utama

dalam perancangan aplikasi untuk membantu pengguna mendapatkan akses

terhadap informasi sarana prasrana adalah transportasi, tempat, dan wisata.

Ide transportasi dipilih karena memiliki peranan penting membantu

pengguna di kampus IPB Dramaga untuk sampai ke tempat tujuan sehingga lebih

efisien tidak memakan waktu banyak. Tempat seperti gedung kuliah, kantin, tempat

Page 22: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

9

shalat, dan sebagainya harus memiliki lokasi dan informasi yang jelas bagi

pengguna. IPB yang memiliki konsep agroeduturism menjadikan destinasi wisata

untuk memperkenalkan tempat-tempat menarik di wilayah kampus IPB Dramaga.

Berdasarkan tiga ide utama tersebut kemudian di kategorikan menjadi

delapan fitur utama. Fitur utama tersebut diantaranya bus, mobil listrik, gedung

kuliah, tempat shalat, shelter sepeda, kantin, area parkir, dan tempat wisata.

Masing-masing memiliki konten untuk perancangan pada aplikasi explore kampus

IPB Dramaga seperti pada Gambar 5.

Gambar 5 Ide iterasi pertama

Crazy 8`s

Proses crazy 8`s menghasilkan gagasan ide dalam perancangan fitur dimana

tertuang dalam selembar kertas yang dibagi delapan. Setiap gagasan ide

digambarkan dalam waktu satu menit. Gagasan ide yang dirancang untuk setiap

menitnya tidak memiliki kesamaan satu sama lain. Rancangna ide tersebut

Page 23: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

10

diantaranya berupa menu utama, pencarian rute bus, informasi rute pencarian, list

mobil listrik, daftar tempat, informasi tempat, search keyword, dan chatbox seperti

Gambar 6.

Menu utama menampilkan gagasan ide yang akan dipilih antara menu dalam

bentuk list dan menu yang disusun dalam bentuk kotak-kotak. Pencarian rute

menampilkan gagasan ide berdasarkan asal dan tujuan dari lokasi yang dipilih

pengguna. Informasi rute menampilkan hasil gagasan ide dari pencarian rute yang

berisi informasi petunjuk pengguna dalam setiap langkahnya. Selanjutnya, gambar

dari gagasan ide yang menampilkan daftar tempat dalam bentuk sebuah card atau

list yang bisa merepresentasikan informasi sehingga mudah dimengerti oleh

pengguna. Informasi tempat menampilkan hasil dari daftar tempat yang dipilih oleh

pengguna, Informasi yang ditampilkan berupa fasilitas, alamat, kontak, dan

informasi penunjang yang ada di tempat tersebut. Kotak search merupakan gagasan

ide untuk mengakomodasi pengguna sehingga bisa mencari berdasarkan keyword

yang dikehendaki. Chatbox merupakan gagasan ide yang menampilkan pengguna

bisa berinteraksi langsung dengan pemilik atau admin dari aplikasi, sehingga bisa

menanyakan apa yang ingin diketahui oleh pengguna.

Gambar 6 Crazy 8's

Sketsa

Sketsa dibuat menjadi hipotesis dari keseluruhan proses empat langkah yang

telah dilakukan sebelumnya. Sketsa dibuat dengan tujuan untuk membuktikan

penerapan user experience yang tepat untuk aplikasi mobile explore kampus IPB

Dramaga. Hasil sketsa tersebut dapat dilihat pada Gambar 7.

Page 24: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

11

Gambar 7 Sketsa iterasi pertama

Gambar 7 menunjukan proses penggambaran sketsa untuk transportasi dan

tempat yang ada di wilayah kampus IPB Dramaga. Pada skestsa transportasi bus

memperlihatkan kotak pencarian rute halte dengan memilih halte asal dan tujuan,

setelah memilih selanjutnya muncul layer rute halte yang dilalui, informasi bus

yang tersedia, dan waktu sampai tujuan setiap halte. Sketsa tempat, pengguna dapat

memilih list tempat yang tersedia, list yang ditampilkan menampilkan informasi

nama tempat, jarak tempat dengan posisi pengguna, dan status tempat, selain itu

ketika pengguna memilih tempat maka akan menampilkan layer informasi detail

mengenai kontak penanggung jawab, fasilitas tempat, maps, status tempat, dan icon

direct lokasi ke tempat tujuan.

Decide

Gagasan ide yang didapatkan dari tahapan sebelumnya, kemudian dipilih

menjadi tujuh fitur utama berdasarkan tujuan akhir aplikasi explore kampus IPB

Dramaga. Tabel 5 menunjukan tujuh fitur yang sudah pilih yaitu bus, mobil listrik,

shelter sepeda, gedung kuliah, tempat shalat, kantin, dan parkir. Setiap fitur

memiliki konten yang berbeda dan akan dibuat pada rancangan prototipe aplikasi.

Tabel 5 Fitur iterasi pertama

Ide Fitur Konten

Transportasi Bus Pencarian rute bus: asal, tujuan, peta lokasi, halte dan

posisi bus pada peta lokasi

Page 25: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

12

Ide Fitur Konten

Informasi hasil pencarian rute : asal tujuan, waktu,

jarak, peta lokasi rute, halte, posisi bus

Mobil

listrik

List mobil listrik: peta lokasi, jarak, direct lokasi

Tempat Gedung

Kuliah

List gedung kuliah: informasi umum, direct lokasi,

jarak, fasilitas, kontak pengelola, alamat gedung

kuliah, map lokasi

Tempat

Shalat

List tempat shalat: informasi umum, direct lokasi,

jarak, jumlah sepeda, fasilitas, kontak pengelola,

alamat, map lokasi, review tempat shalat

Shelter

Sepeda

List shelter sepeda: informasi umum, direct lokasi,

jarak, jumlah sepeda secara realtime, jam oprasional,

kontak pengelola, alamat, peta lokasi, review shelter

Kantin List kantin: informasi umum, direct lokasi, jarak,

status, kontak pengelola, alamat, peta lokasi, review

kantin

Parkir List area parkir: kontak pengelola, alamat, peta

lokasi, review gedung kuliah

Selanjutnya membuat storyboard berisi skenario yang ditunjukan kepada

pengguna aplikasi explore kampus IPB Dramaga. Langkah pertama dari skenario

merupakan gambaran utama. Skenario dimulai pada saat pengguna berada di

kampus IPB Dramaga hingga mendapatkan tujuan akhir aplikasi yang dapat dilihat

pada Gambar 8 dan Gambar 9.

Gambar 8 Storyboard iterasi pertama

Page 26: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

13

Gambar 9 Stroyboard lanjutan iterasi pertama

Skenario dimulai ketika pengguna sedang berada di kampus IPB Dramaga

dan menerima text SMS berisi pesan singkat yang didalamnya ada alamat link untuk

mengunduh aplikasi explore kampus IPB Dramaga. Pengguna membuka alamat

URL tersebut, lalu masuk ke halaman playstore aplikasi explore kampus IPB

Dramaga, dan mengunduh pada mobile phone pengguna. Pengguna membuka

aplikasi dan masuk langsung ke daftar fitur-fitur utama. Kemudian pengguna

memilih fitur tempat, kemudian aplikasi menampilkan daftar tempat yang tersedia

pada fitur tersebut. Daftar tempat memiliki informasi seperti foto, nama tempat,

status, serta jarak tempat dengan lokasi pengguna dan status tempat. Selanjutnya

pengguna memilih dan menyentuh salah satu list tempat maka aplikasi akan

menampilkan berupa informasi umum, kontak, alamat, fasilitas, dan direct lokasi

tempat tersebut. Ketika pengguna menyentuh ikon direct lokasi maka akan

ditampilkan rute pada aplikasi Google maps.

Setelah itu, pengguna mencari rute dari moda transportasi bus, maka

pengguna masuk ke halaman fitur transportasi bus. Aplikasi akan menampilkan

kotak pencarian halte asal dan tujuan dari transportasi bus yang akan digunakan.

Ketika pengguna memilih halte asal dan tujuan, maka aplikasi akan menampilkan

hasil pencarian yang berisi informasi rute yang dicari. Pada halaman hasil pencarian

rute, terdapat map yang menampilkan icon halte asal, halte tujuan, halte-halte yang

dilewati, posisi bus secara realtime, dan posisi lokasi pengguna saat itu. Pada

halaman yang sama, terdapat juga informasi dan petunjuk rute yang dilewati. Ketika

pengguna memilih moda transportasi mobil listrik (moli), aplikasi akan

menampilkan daftar moli yang tersedia beserta jarak dari posisi moli ke pengguna.

Jika pengguna menyentuh satu daftar moli maka aplikasi akan menampilkan rute

dari posisi pengguna ke posisi moli.

Page 27: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

14

Prototype

Prototipe yang dikembangkan yaitu tahap medium fidelity menggunakan

Axure RP Pro 8.0 dengan mengacu pada Google Material Design yang dapat dilihat

pada tautan https://material.io/guidelines/, dan sudah sesuai dengan interaksi

skenario pada storyboard. Tampilan lengkap user interface prorotipe medium

fidelity aplikasi explore kampus IPB Dramaga dapat dilihat pada Lampiran 2.

Warna utama yang dipilih untuk aplikasi explore kampus IPB Dramaga yaitu hijau

dengan kode hexa #34a853 dan latar background berwarna putih dengan kode hexa

#ffffff. Pada proses perancangangan, prototipe terdiri dari 10 layout utama yaitu

menu, bus, hasil pencarian rute bus, daftar moli, hasil direct lokasi moli, dan tempat

yaitu gedung kuliah, shelter sepeda, tempat shalat, kantin, dan parkir.

Pada saat pertama kali masuk aplikasi seperti pada Gambar 10, pengguna

disuguhkan dengan layout halaman menu yang menampilkan daftar tujuh list fitur

seperti bus, mobil listrik, shelter sepeda, gedung kuliah, tempat shalat, kantin, dan

parkir. Tujuh list fitur tersebut diurutkan dengan asumsi pengguna memilih

trasportasi bus sebagai pilihan pertama untuk menjangkau wilayah kampus IPB

Dramaga. Kemudian dilanjutkan dengan pemilihan transportasi mobil listrik, dan

shelter sepeda. Asusmsi kedua pengguna memilih tempat untuk mengetahui

informasi tempat-tempat yang ada di kampus IPB Dramaga, pengurutan dimulai

dari fitur gedung kuliah, tempat shalat, kantin, dan tempat parkir.

Gambar 10 Layout menu

Pemilihan urutan fitur berdasarkan asumsi pengguna tersebut melibatkan

beberapa fitur untuk setiap kategori ide. Kategori ide fitur trasportasi diurutkan

berdasarkan ketersedian dan kemudahan pemakaian sarana transportasi yang ada di

wilayah kampus, seperti bus yang beroperasi setiap 8 menit sekali dan mobil listrik.

Page 28: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

15

Gambar 11 Layout fitur bus

Gambar 12 Layout hasil pencarian

rute bus

Layout fitur bus menampilkan peta berisi halte-halte, posisi bus secara

realtime, dan kotak pencarian rute seperti pada Gambar 11. Tampilan awal dari fitur

bus ditujukan sebagai pemilihan sarana transportasi, pada tampilan ini pengguna

diharuskan mengisi form halte asal dan halte tujuan pada kotak pencarian rute.

Setelah pengguna mengisi semua form yang dibutuhkan pada pencarian rute bus,

kemudian pengguna di arahkan ke-layout hasil pencarian rute seperti pada Gambar

12. Layout hasil pencarian rute bus menampilkan peta dan informasi langkah demi

langkah berupa halte yang dilalui, waktu estimasi perjalanan, posisi bus yang

tersedia, dan petunjuk arah untuk mencapai halte.

Gambar 13 Layout mobil listrik

Gambar 14 Layout direct lokasi

mobil listrik

Page 29: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

16

Layout mobil listrik seperti pada Gambar 13 menampilkan peta posisi mobil

listrik secara realtime, dan daftar mobil listrik yang tersedia bagi pengguna. Daftar

mobil listrik menampilkan informasi nama, posisi, dan jarak mobil listrik dengan

lokasi pengguna. Jika pengguna memilih salah satu daftar yang tersedia, maka

pengguna diarahkan ke-layout dierect lokasi mobil listrik seperti pada Gambar 14.

Fitur yang masuk kategori tempat diurut berdasarkan asumsi tempat yang

sering dicari oleh pengguna seperti shelter sepeda, gedung kuliah, tempat shalat,

kantin, dan parkir seperti pada Gambar 15. Layout kategori tempat didesain

berbentuk daftar kartu yang menampilkan informasi nama, status tempat, dan jarak

lokasi tempat dengan pengguna. Selanjutnya jika pengguna memilih salah satu

tempat yang ada pada daftar, maka pengguna diarahkan ke halaman layout

informasi umum. Layout informasi umum menampilkan nama, jarak, fasilitas,

status, kontak penanggung jawab, peta lokasi, dan direct lokasi tempat yang dipilih.

Namun layout infomasi umum untuk setiap fitur memiliki tampilan yang

menyesuaikan konten yang telah dipilih pada tahapan decide pada iterasi pertama.

Desain kartu pada layout tempat dipilih karena sifat antarmuka berupa visual yang

mefokuskan pada gambar atau foto.

Penggunaan media foto atau gambar pada desain tempat tersebut dapat

memfokuskan perhatian pengguna, menambah minat pengguna kepada layar, dan

dengan cepat dapat membuat user menangkap isi informasi yang sulit ditangkap

secara tekstual (Galitz 2002). Typeface yang digunakan pada prototipe ini adalah

Roboto, karena Roboto merupakan font yang dikembangkan oleh Google sebagai

font bawaan sistem operasi Android.

Gambar 15 Layout shelter sepeda, gedung kuliah, tempat shalat, kantin, dan parkir

Page 30: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

17

Validate

Pengujian dilakukan dengan cara merekam suara ketika wawancara dan

aktivitas pengguna saat menggunakan prototipe. Pengujian dilakukan kepada tiga

orang responden mahasiswa angkatan 54 tahun 2017 bergantian secara tatap muka

di kampus IPB Dramaga. Waktu pengujian setiap tatap muka berlangsung sekitar

15-45 menit. Kegiatan pada saat pengujian kepada pengguna dapat dilihat pada

Gambar 16.

Gambar 16 Kegiatan pengujian kepada pengguna

Hasil dari pengujian kepada ketiga responden digunakan untuk pembuatan

user pesona dan experience map pengguna yang diperoleh dari bagian context

question. Hasil ringkasan pengujian kepada responden dapat dilihat pada

Lampiran 3. User persona dapat dilihat pada Gambar 17. Persona yang diperoleh

dari ketiga orang responden yang diwawancarai adalah sebagai berikut:

1 Behaviors: mencintai statusnya sebagai mahasiswa IPB, pengguna ponsel

pintar dengan operating system android, penggunanan ponsel untuk membantu

aktivitas selama berada di kampus, jadwal kegiatan selalu padat, fokus kegiatan

utama kuliah, senang mengetahui hal baru tentang kampus.

2 Demographics: 16-18 tahun, mahasiswa aktif IPB angkatan 54 tahun 2017,

sudah lebih dari 6 bulan berada di kampus IPB dramaga, mahasiswa daerah

dari pulau jawa dan sumatera.

3 Need/Goal: membutuhkan sumber informasi sarana dan prasrana untuk

membantu aktivitas selama menjadi mahasiswa IPB, sumber harus terpercaya

dan mudah didapatkan.

Gambar 17 User Persona

Page 31: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

18

Experience Map dapat dilihat pada Gambar 18. Hasil experience map

menggambarkan bahwa kendala terbesar saat mencari informasi lengkap mengenai

sarana dan prasarana. Selain itu jarak dari satu tempat ke tempat lain saling

berjauhan, yang menyebabkan pengguna harus mencari rute terbaik dan memilih

cara untuk mencapai dari satu tempat ke tempat lain di wilayah kampus IPB

Dramaga. Sumber informasi yang tersedia masih jauh dari kata cukup, karena

sumber yang tersedia masih belum lengkap dan terkadang pengguna harus mencari

kembali informasi lengkap mengenai lokasi dan tempat yang dicari.

Pengguna sepakat membutuhkan sebuah sistem informasi yang

menyediakan informasi lengkap mengenai sarana prasrana untuk menunjang

kegiatan selama berada di kampus IPB Dramaga. Sistem informasi dibuat menjadi

sebuah aplikasi ponsel pintar sehingga memudahkan pengguna dan bisa dibawa

kemana-mana. Aplikasi memuat informasi secara realtime mengenai kondisi sarana

dan prasarana yang sudah tersedia.

Hasil wawancara tahap task dan quick debrief terlihat bahwa ada beberapa

hal yang terdapat pada experience map belum diakomodasi oleh prototipe aplikasi

explore kapus IPB Dramaga. Informasi mengenai detail dari setiap ruangan yang

belum tersedia. Informasi rute dan jadwal-jadwal transportasi kampus yang masih

belum tersedia pada prototipe aplikasi. Informasi jumlah sepeda yang tersedia tidak

terbaca oleh pengguna ketika menggunakan protitipe aplikasi.

Gambar 18 Experience map iterasi pertama

Namun, hasil dari keselurahan wawancara dapat ditarik kesimpulan bahwa

rancangan aplikasi yang diinginkan oleh pengguna sudah sesuai dengan ekspetasi.

Informasi umum mengenai sarana transportasi dan prasarana tempat yang

ditampilkan pada rancangan aplikasi dilengkapi petunjuk sehingga dapat dan

mudah digunakan untuk menunjang kegiatan sehari-hari pengguna selama berada

kampus IPB Dramaga. Selain itu, pengguna menginginkan informasi realtime dari

rancangan sistem informasi yang disuguhkan oleh aplikasi explore kampus IPB

Dramaga.

Page 32: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

19

Iterasi Kedua

Understand

Berdasarkan hasil tahap validate di iterasi pertama, perancangan pada iterasi

kedua berfokus pada pengembangan transportasi bus. Moda transportasi bus dipilih

karena memungkinkan untuk direalisasikan, bus lebih sering beroperasi, dan bisa

menjangkau luas wilayah kampus IPB Dramaga. Selain itu, fokus transportasi bus

dipilih untuk mendukung terlaksananya kebijakan menuju green campus tahun

2020 di kampus IPB Dramaga.

Pada iterasi kedua terdapat perubahan dan penambahan konten rancangan

transportasi dari iterasi sebelumnya. Perubahan dan penambahan fitur dilakukan

berdasarkan wawancara dengan responden. Berdasarkan hasil wawancara tersebut

dapat ditarik kesimpulan bahwa responden masih merasa kebingungan

menggunakan fitur bus. Beberapa masalah tersebut seperti pada saat pencarian rute

ketika memilih halte asal dan tujuan, waktu tiba bus, kurangnya informasi yang

jelas mengenai koridor, dan juga informasi umum bus.

Sketch

Catatan

Proses catatan iterasi kedua berisi pertanyaan-pertanyaan bagaimana

menjawab pemetaan masalah pada iterasi kedua. Pertanyaan yang dibuat untuk

proses pencarian solusi dan penambahan konten fitur transportasi bus. Pertanyaan

tersebut dapat dilihat pada Tabel 6.

Tabel 6 Catatan iterasi kedua

No. Catatan

1 Bagaimana pengguna dapat mengetahui informasi bus yang tersedia

disetiap halte?

2 Bagaimana merubah tampilan pencarian rute sehingga lebih menarik dan

mudah dimengerti?

3 Bagaimana pengguna mengetahui informasi umum transportasi bus?

4 Menambah lokasi saat pengguna untuk rute pencarian?

5 Bagaimana memberikan rekomendasi halte terdekat dari pengguna?

Ide

Ide diperoleh dari hasil pengembangan konten fitur transportasi bus iterasi

pertama dan hasil solusi dari catatan-catatan yang diperoleh untuk menjawab fokus

utama pada iterasi kedua. Ide-ide tersebut berupa perubahan isi pada konten

pencarian rute pada iterasi pertama. Selain itu, penambahan ide konten rancangan

yaitu konten koridor bus yang memberikan informasi halte-halte yang dilalui oleh

setiap koridor, jadwal kedatangan bus untuk setiap halte dan infomasi umum

Page 33: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

20

mengenai transportasi bus. Rancangan ide itearasi kedua dapat dilihat pada Gambar

19.

Gambar 19 Ide iterasi kedua

Crazy 8`s

Crazy 8’s pada iterasi kedua dilakukan dengan tujuan menggambarkan

rancangan pengembangan yang akan dilakukan pada fitur transportasi bus.

Rancangan tersebut berupa fitur tambahan maupun perbaikan dari fitur transportasi

bus pada iterasi pertama yang dapat dilihat pada Gambar 20. Gambar crazy 8’s yang

telah dibuat dimulai dari sisi kiri atas dan berakhir pada sisi kanan bawah.

Gambar 20 Crazy 8's iterasi kedua

Konten pertama menggambarkan pencarian halte asal dan tujuan yang

dilengkapi dengan map. Konten kedua menggambarkan posisi bus terhadap halte

secara realtime agar pengguna mengetahui secara pasti dimana posisi bus. Konten

Page 34: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

21

ketiga, menampilkan list pemberhentian bus di setiap halte berdasarkan koridor.

Konten keempat memberikan informasi perkiraan jadwal bus untuk setiap halte,

baik untuk jadwal kedatangan bus maupun jadwal keberangkatan bus. Pemberian

jadwal bus ditujukan agar pengguna nantinya dapat mengestimasikan waktu berada

di halte bus. Konten kelima mengambarkan hasil pencarian rute setelah dilakukan

proses pada konten pertama. Konten keenam menggambarkan informasi umum

tentang trasportasi bus, meliputi cara pembayaran yang dilakukan dan jadwal

operasinal bus. Konten ketujuh menggambarkan rekomendasi rute berdasarkan

hasil pencarian rute halte berdasarkan konten pertama. Konten delapan

menggambarkan rekomendasi halte terdekat dengan pengguna ketika melakukan

pemilihan lokasi asal pada konten pertama.

Sketsa

Sketsa iterasi kedua merupakan tahapan terakhir dari proses empat langkah.

Sketsa digambar dan dibuat dari gabungan ide yang telah diperoleh berdasarkan

tahapan catatan, ide, dan crazy 8’s. Gabungan ide disimpulkan menjadi empat

bagian sketsa seperti pencarian rute, informasi koridor, hasil pencarian rute, dan

informasi umum tentang bus.

Gambar 21 Sketsa cari rute iterasi

kedua

Gambar 22 Sketsa koridor iterasi

kedua

Sketsa pertama pencarian rute yang ditunjukan pada Gambar 21. Konten

pencarian rute menampilkan halte, posisi bus secara realtime pada sebuah map, dan

kotak pencarian rute berdasarkan asal dan tujuan. Pada kotak pencarian rute asal

maupun tujuan dapat dilakukan dengan search keyword, pemilihan lokasi

berdasarkan rekomendasi halte terdekat, halte yang sering pilih, serta lokasi GPS

pengguna.

Sketsa kedua koridor bus ditunjukan pada Gambar 22. Konten koridor bus

menampilkan rute yang dilalui setiap bus, rute tersebut biasa disebut koridor yang

memliki halte-halte perhentian untuk setiap bus. Setiap halte yang terdapat pada list

koridor dapat dilihat rinciannya, seperti peta rute dan informasi jadwal bus yang

melewati halte tersebut.

Page 35: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

22

Gambar 23 Sketsa hasil cari rute iterasi kedua

Sketsa ketiga hasil pencarian rute ditunjukan pada Gambar 23. Hasil

pencarian rute memuat peta dan informasi rute yang dicari oleh pengguna

berdasarkan asal dan tujuan. Pada bagian peta menampilkan rute yang tergambar

didalam peta dengan menempatkan icon halte, bus, dan jalan yang dilalui oleh

pengguna. Informasi rute berisi petunjuk langkah demi langkah dari asal sampai

tujuan. Petunjuk yang diberikan meliputi informasi perkiraan waktu sampai tujuan,

informasi bus yang bisa digunakan untuk setiap langkah, serta lokasi atau tempat

yang dilalui.

Gambar 24 Sketsa informasi umum dan jadwal iterasi kedua

Sketsa keempat informasi umum dan jadwal kedatangan bus untuk setiap

halte ditujukan pada Gambar 24. Konten yang dimuat pada informasi umum seperti

peta, waktu operasional bus, serta jumlah dan metode pembayaran bus. Selain itu

pada bagian bawah terdapat sketsa jadwal berdasarkan halte yang dipilih pengguna.

Page 36: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

23

Sketsa jadwal menampilkan informasi kedatangan bus seperti koridor, tujuan,

lokasi bus, dan estimasi waktu sampai tujuan.

Decide

Pemilihan gagasan ide-ide digunakan untuk fokus rancangan fungsionalitas

transportasi bus berdasarkan hasil dari tahapan sketch iterasi kedua. Hasil pemilihan

gagasan terdapat informasi yang dimuat dalam bentuk konten untuk keperluan

pengguna. Konten-konten yang dipilih yaitu pencarian rute, informasi hasil

pencarian rute, koridor bus, informasi umum, dan jadwal kedatangan bus. Informasi

yang dimuat pada konten-konten yang telah dipilih dapat dilihat pada Tabel 7.

Tabel 7 Fitur iterasi kedua

Fitur Konten Isi Konten

Bus Pencarian rute bus Asal, tujuan, search lokasi, rekomendasi halte

Informasi hasil

pencarian rute

Asal tujuan, waktu, jarak, peta lokasi rute, halte,

posisi bus

Koridor Peta lokasi, list koridor, list halte

Informasi umum Peta lokasi, jadwal operasional, metode

pembayaran

Jadwal Koridor, tujuan, waktu berangkat, lokasi bus,

estimasi waktu sampai

Setelah pemilihan gagasan ide, dilanjutkan dengan membuat dan

menggambar skenario pada storyboard yang dibuat menjadi 11 skenario, masing-

masing menjelaskan sebuah interaksi ketika pengguna menggunakan fitur

transportasi bus pada aplikasi. Asumsi untuk skenario awal yaitu pengguna sudah

memasang aplikasi explore kampus IPB Dramaga. Hasil storyboard iterasi kedua

dapat dilihat pada Gambar 25.

Skenario dimulai ketika pengguna menggunakan aplikasi explore kampus

IPB Dramaga, dan memilih fitur transportasi bus. Layout pertama fitur transportasi

bus menampilkan peta dan kotak pencarian rute. Kotak pencarian rute berada di

tengah layout aplikasi yang menampilkan pencarian lokasi asal dan tujuan. Ketika

pengguna memilih lokasi asal, aplikasi menampilkan beberapa alternatif cara

memilih lokasi seperti mencari berdasarkan nama lokasi, memilih dari peta, dan

memilih dari rekomendasi halte yang diberikan oleh aplikasi. Selanjutnya pengguna

memilih lokasi tujuan melalui pick lokasi pada peta. Setelah pengguna selesai

memilih asal dan tujuan, pengguna klik button cari maka akan di arahkan ke

halaman hasil pencarian infomrasi rute. Hasil pencarian informasi rute

menampilkan peta lokasi dan informasi langkah demi langkah rute yang dicari.

Selanjutnya pengguna membaca informasi langkah demi langkah hasil pencarian

rute, informasi yang ditampilkan berupa waktu perkiraan perjalanan, lokasi-lokasi

yang dilewati, dan petunjuk disetiap langkahnya.

Setelah itu, ketika pengguna ingin mencari informasi mengenai koridor-

koridor yang ada di kampus IPB Dramaga. Pengguna kembali ke halaman pertama

Page 37: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

24

transportasi bus, dan memilih tab koridor. Tab koridor menampilkan gambar peta

dan list koridor. Setiap koridor menjelaskan beberapa halte yang termasuk kedalam

rute koridor. Ketika pengguna ingin melihat jadwal kedatangan bus pada salah satu

halte, pengguna dapat memilih halte yang ada pada koridor, kemudian pengguna

diarahkan ke halaman jadwal halte. Halaman jadwal halte menampilkan jadwal

kedatangan bus, peta lokasi halte secara realtime, dan bus yang tersedia disekitar

lokasi halte. Skenario terakhir berisikan informasi umum yang ditunjukan kepada

pengguna baru tentang informasi bus.

Gambar 25 Storyboard iterasi kedua

Prototype

Prototipe yang dikembangkan pada iterasi kedua masih tahap medium fidelity

menggunakan Axure RP Pro 8.0. Perubahan dan penambahan konten sesuai dengan

hasil dari tahapan validate iterasi pertama dan tahapan-tahapan pada iterasi kedua.

Perubahan pada layout pencarian rute yaitu terdapat tabs cari rute, koridor yang

memungkinkan pengguna meilih rute yang ingin dilewati, dan icon informasi bus

di sebelah kanan kotak pencarian yang ada di tengah layout seperti pada Gambar

26.

Page 38: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

25

Gambar 26 Layout pencarian rute sebelum dan sesudah perbaikan

Perubahan selanjutnya yaitu pada proses pemilihan lokasi pada layout

pencarian rute, sebelumnya pemilihan lokasi hanya pick dari peta, kemudian

berubah menjadi 4 alternatif pemilihan lokasi. Pemilihan lokasi bisa digunakan

dengan cara mencari nama lokasi, memilih dari peta, lokasi saat ini, dan

rekomendasi halte yang dapat dilihat pada Gambar 27.

Gambar 27 Layout pemilihan lokasi rute sebelum dan sesudah perbaikan

Selain itu terdapat perubahan layout informasi hasil pencarian rute.

Perubahan tersebut terjadi pada jalan penghubung rute peta lokasi, isi konten

informasi hasil pencarian rute yang dapat dilihat pada Gambar 28, hal ini

dikarenakan informasi jalan penghubung, asal, dan tujuan rute yang belum jelas

tergambarkan dalam prototipe sebelumnya. Informasi pada peta menampilkan

warna dari rute setiap jalan berdasarkan koridor yang dilalui, halte, lokasi asal dan

tujuan. Selanjutnya, pada informasi rute dibawah peta terjadi perubahan warna

Page 39: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

26

penghubung setiap langkah, dan penambahan informasi asal berangkat sampai

tujuan akhir.

Gambar 28 Layout informasi hasil pencarian rute sebelum dan sesudah perbaikan

Gambar 29 Layout koridor bus

Selain perubahan yang terjadi pada iterasi kedua, dilakukan juga penambahan

konten pada fitur transportasi bus. Penambahan tersebut berupa konten koridor bus,

jadwal halte, dan informasi umum bus. Pada layout konten koridor bus

menampilkan gambar peta dan penjelasan halte yang dilalui oleh setiap koridor

yang dapat dilihat pada Gambar 29. Pada layout jadwal halte menampilkan jadwal

kedatangan bus, peta lokasi halte, dan posisi bus di sekitar halte secara realtime

yang dapat dilihat pada Gambar 30. Selanjutnya, layout informasi umum

menampilkan gambar peta lokasi, jadwal operasional, dan metode pembayaran bus

yang dapat dilihat pada Gambar 31.

Page 40: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

27

Gambar 30 Layout jadwal halte Gambar 31 Layout informasi umum

bus

Validate

Pengujian pada iterasi kedua dilakukan dengan cara merekam suara ketika

wawancara dan aktivitas pengguna saat menggunakan prototipe. Pengujian masih

dilakukan secara bergantian kepada 4 orang responden mahasiswa angkatan 54

tahun 2017 di kampus IPB Dramaga. Waktu pengujian setiap tatap muka

berlangsung sekitar 15-45 menit.

Gambar 32 Experience map iterasi kedua

Hasil dari pengujian pada iterasi kedua digunakan untuk membuat experience

map pengguna yang diperoleh dari bagian context question. Hasil ringkasan

pengujian kepada responden dapat dilihat pada Lampiran 4. Hasil experience map

dapat dilihat pada Gambar 32. Experience map iterasi kedua memiliki perubahan

Page 41: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

28

stage dari hasil tahapan iterasi pertama, dimana perubahan stage terjadi pada

menentukan cara mencapai tujuan menjadi memilih transportasi, perubahan terjadi

karena fokus utama pada iterasi kedua adalah transportasi bus.

Kendala terbesar pengguna dari hasil experience map iterasi kedua adalah

saat mencari informasi rute, posisi, dan jadwal kedatangan transportasi bus. Selain

itu sumber informasi yang tersedia hanya sebatas pengetahuan dari pengguna dan

jadwal perkiraan disetiap papan petunjuk yang berada di halte. Namun hal itu

menjadi sebuah keuntungan untuk mengembakan rancagan aplikasi yang dapat

menjawab kendala yang dihadapi oleh pengguna. Keuntungan tersebut menjadi

salah satu tolak ukur kesesuain rancangan aplikasi explore kampus IPB Dramaga

dengan hasil informasi yang diperoleh dari experience map.

Solusi untuk menjawab masalah-masalah yang terdapat pada hasil validate

iterasi pertama sudah ditambahkan pada rancangan prototipe iterasi kedua seperti

informasi rute dan jadwal transportasi bus. Rancangan aplikasi yang dibuat telah

memuat informasi pencarian rute untuk menghemat pengguna dalam pemilihan rute,

jadwal kedatangan bus mengurai waktu tunggu pengguna sealama berada di halte,

informasi koridor dan informasi umum menjadikan pengguna tidak ragu untuk

menggunakan transportasi bus selama beraktifitas di kampus IPB Dramaga.

Berdasarkan, hasil wawancara tahap task dan quick debrief iterasi kedua diperoleh

kesimpulan bahwa seluruh pengguna menyatakan rancangan aplikasi explore

kampus IPB Dramaga sudah baik dan sesuai dengan kebutuhan pengguna.

Sedangkan untuk pengembangan berikutnya harus ditunjang oleh fasilitas

pendukung dilapangan agar rancangan dapat direalisasikan menjadi sebuah aplikasi

yang dapat dirasakan manfaatnya oleh pengguna..

SIMPULAN DAN SARAN

Simpulan

Prototipe aplikasi explore kampus IPB Dramaga dibuat pada tahap medium

fidelity dengan memperhatikan aspek user experience berdasarkan kebutuhan

pengguna yang melibatkan 34 orang responden untuk tahapan awal perancangan.

Prototipe dikembangan melalui proses dua tahap iterasi. Prototipe iterasi pertama

memiliki 7 fitur utama yaitu bus, mobil listrik, shelter sepeda, gedung kuliah,

tempat shalat, kantin, dan parkir telah diuji kepada 3 orang pengguna. Prototipe

iterasi kedua dikembangkan dengan memilih fokus transportasi bus yang

menampilkan 5 konten informasi yaitu pencarian rute, hasil pencarian rute, koridor,

informasi umum, dan jadwal telah di uji kepada 4 orang pengguna.

Hasil pengujian kepada pengguna pada iterasi pertama diperoleh masalah

yaitu kurangnya informasi detail ruangan, informasi jumlah sepeda, rute bus, posisi,

dan jadwal kedatangan transportasi bus. Masalah yang ditemukan pada iterasi

pertama dibuat menjadi sebuah solusi yang ditambahkan kedalam rancagan

prototipe iterasi kedua. Hasil pengujian iterasi kedua setelah dilakukan penambahan

dan perubahan fitur prototipe dari tahapan iterasi pertama, dapat diperoleh

kesimpulan bahwa seluruh pengguna menyatakan rancangan prototipe aplikasi

explore kampus IPB Dramaga sudah baik dan sesuai dengan kebutuhan pengguna

mahasiswa angkatan 54.

Page 42: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

29

Saran

Saran untuk penelitan berikutnya, diharapkan pengembangan rancangan

aplikasi explore kampus IPB Dramaga tidak hanya berfokus pada fitur transportasi

bus. Namun dikembangkan juga untuk fitur lainnya seperti gedung kuliah, shelter

sepeda dan lain sebagainya. Selain itu untuk development menjadi sebuah aplikasi

harus disertai dengan fasilitas penunjangan pendukung dilapangan agar rancangan

dapat direalisasikan dengan nyata dan dapat langsung dirasakan manfaatnya oleh

pengguna.

DAFTAR PUSTAKA

Galitz OW. 2002. The Essential Guide to User Interface Design. Ed ke-2. Canada

(US): John Wiley & Sons.

Garrett JJ. 2011. The Elements of User Experience: User-Centered Design for the

Web and Beyond. Ed ke-2. Berkeley (US): New Riders.

Idler S. 2011. How User Scenarios Help to Improve Your UX [internet]. [diunduh

2017 September 20]. Tersedia pada: http://blog.usabilla.com/how-user-

scenarios-help-to-improve-your-ux/.

IPB 2018. Tentang IPB [Internet]. [diakses 2018 Mei 23]. Tersedia pada:

https://www.ipb.ac.id/page/about/

Knapp J, Zerstsky J, Kowitz B. 2016. Sprint: How to Solve Big Problems and Test

New Ideas in Just Five Days. New York (US): Simon & Schuster

Nadhirah ASD. 2014. Perancangan mobile user experience aplikasi visit puncak

untuk perkiraan kunjungan wisatawan puncak kabupaten bogor [skripsi].

Bogor (ID): Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut

Pertanian Bogor.

Presiden Republik Indonesia. Peraturan pemerintah Republik Indonesia No. 19

tahun 2005 tentang standar nasional pendidikan , Pasal 42, ayat 1-2.

Statista. 2017. Number of mobile phone users in Indonesia from 2013 to 2019 (in

millions) [Internet]. [diakses 2017 Okt 27]. Tersedia pada:

https://www.statista.com/statistics/321485/smartphone-user-penetration-in-

indonesia/

Page 43: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

30

LAMPIRAN

Lampiran 1 Kuesioner aplikasi explore kampus IPB Dramaga

Page 44: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

31

Lampiran 1 Lanjutan Kuesioner aplikasi explore kampus IPB Dramaga

Page 45: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

32

Lampiran 1 Lanjutan Kuesioner aplikasi explore kampus IPB Dramaga

Page 46: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

33

Lampiran 1 Lanjutan Kuesioner aplikasi explore kampus IPB Dramaga

Page 47: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

34

Lampiran 1 Lanjutan Kuesioner aplikasi explore kampus IPB Dramaga

Page 48: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

35

Lampiran 2 Antarmuka aplikasi explore kampus IPB Dramaga

Prototipe aplikasi explore kampus IPB Dramaga dapat dilihat pada tautan:

https://hq4jyf.axshare.com

Page 49: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

36

Lampiran 2 Lanjutan antarmuka aplikasi explore kampus IPB Dramaga

Page 50: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

37

Lampiran 3 Daftar ringkasan wawancara responden five act interview iterasi

pertama

No Pertanyaan

1 Kegiatan apa saja yang anda lakukan selama berada di kampus?

Jawab:

Responden 1

Saat ini kegiatan yang saya lakukan adalah kuliah dan kegiatan UKM.

Kegiatan UKM yang saya ikuti adalah panahan.

Responden 2

Karena mahasiswa baru paling saya hanya kuliah, setelah sore ke bara

mencari makan, kalau malam ke alhur dan juga ikut organisasi.

Responden 3

Sebagai mahasiswa baru semester satu IPB saya hanya kuliah dan sedikit

ikut kegiatan UKM, namun ketika waktu luang saya juga biasanya bermain

gitar dan mengikuti kegiatan asrama.

2. Selama anda berada di kampus, sarana dan prasarana apa saja yang anda

ketahui dan yang anda gunakan?

Jawab:

Responden 1

Sarana dan prasarana yang saya ketahui seperti shelter sepeda, mobil

listrik, gedung kuliah, bus, dan kantin. Yang sering saya gunakan karena

saya masih mahasiswa baru paling antara gedung kuliah dan kantin.

Responden 2

Kalau sarana hampir semua sarana tranportasi saya gunakan seperti bus dan

moli, sedangkan untuk prasarana saya menggunakan semuanya

Responden 3

Saya tahu, tapi mungkin masih sedikit, sekitar wilayah CCR, seperti

gedung CCR, asrama, sarana transportasi bus, dan shelter sepeda.

3 Bagaimana cara mendapatkan informasi terhadap sarana dan prasarana?

Jawab:

Responden 1

Saya lebih sering mendatangi tempatnya atau bertanya kepada orang secara

langsung untuk mencari informasi yang saya butuhkan

Responden 2

Karena masih terbilang baru, dan setiap tempat ada penjaga yang bertugas,

biasanya saya menanyakan lokasi atau tempat kepada petugas yang

bersangkutan

Responden 3

Saya biasanya bertanya kepada teman yang sudah tahu, kalau teman tidak

tahu paling saya cari di internet seperti google maps. Namun, terkadang

tidak semua informasi kampus terdapat di google maps. Kalau sudah

kepepet biasanya saya bertanya kepada orang yang lewat.

4 Informasi apa saja yang diperlukan untuk sarana dan prasarana yang ada di

kampus?

Jawab:

Responden 1

Page 51: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

38

Informasi detail mengenai tempat atau gedung kuliah, seperti layout di

dalamnya, dan juga tempat-tempat yang belum ada di google atau belum

pernah mahasiswa baru ketahui.

Responden 2

Mungkin informasi mengenai tempat dan transportasi yang ada di kampus,

karena kalau tidak ada penjaga yang bertugas biasanya kebingungan.

Responden 3

Kalau untuk tempat pastinya lokasinya dimana, dan untuk transportasi

penjadwalannya karena transportasi yang ada tidak setiap saat tersedia

ketika dibutuhkan.

5 Selama berada di kampus untuk berpergian dari satu tempat ke tempat lain

menggunakan apa? Transportasi kampus apa yang digunakan?

Jawab:

Responden 1

Saya pernah menggunakan bus dan moli untuk menuju tempat-tempat yang

ada di kampus. Namun, saya lebih sering berjalan kaki jika lokasi nya tidak

terlalu jauh ketimbang menggunakan transportasi kampus.

Responden 2

Saya juga pernah menggunakan transportasi bus dan sepeda kampus juga.

Tapi biasanya saya menggunakan sepeda milik sendiri.

Responden 3

Saya pernah menggunakan moli, kendala yang saya hadapi posisi moli

tidak diketahui dimana, dan apakah molinya sudah penuh atau tidak, dan

juga tidak diketahuinya estimasi waktu dari moli ke tempat saya.

6 Apa kendala saat menggunakan sarana dan prasarana di kampus IPB

Dramaga?

Jawab:

Responden 1

Saya sulit menemukan denah ruangan ketika mencari ruang di gedung-

gedung kampus IPB Dramaga. Untuk sarana transportasi, kendala ketika

membayar transportasi kampus tersebut, saya tidak memiliki tapcash untuk

alat pembayarannya.

Responden 2

Mungkin jika saran transportasi, jadwalnya masih belum pasti, terkadang

harus menunggu lama untuk naik transportasi bus kampus dan moli

Responden 3

Kendala yang saya hadapi ketika menaiki moli, posisi moli tidak diketahui,

apakah molinya sudah penuh atau tidak, dan juga tidak diketahuinya

estimasi waktu dari moli ke tempat saya.

7 Apakah aplikasi explore kampus IPB Dramaga yang diujikan sudah baik

atau masih ada kekurangan? Saran untuk aplikasi?

Responden 1

Sudah baik, bisa membantu mahasiswa untuk mencari tempat-tempat yang

belum diketahui. Saran untuk denah ruang berdasarkan jumlah lantai atau

level dari setiap gedung.

Responden 2

Sudah baik, apalagi karena saya pengguna sepeda jadi kalau ingin tahu

ketersedian sepeda saya bisa tahu, dan untuk transportasi bus jadi tidak

Page 52: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

39

perlu khawatir untuk menunggu lama. Saran untuk aplikasi seperti lokasi

tempat yang diperjelas berdasarkan level dan wing untuk setiap gedung,

untuk transportasi bus bisa melihat jadwalnya.

Responden 3

Aplikasi ini sudah berguna bagi mahasiswa yang belum tahu rute dan

tempat yang ada di kampus IPB. Saran warna aplikasi nya jangan hijau,

untuk moli bisa ditambahkan waktu sampai ke tempat pengguna, dan untuk

shelter sepeda diberikan benar-benar informasi untuk jumlah sepeda yang

bisa dipakai.

Page 53: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

40

Lampiran 4 Daftar ringkasan wawancara responden five act interview iterasi

kedua

No Pertanyaan

1 Kegiatan apa saja yang anda lakukan selama berada di kampus?

Jawab:

Responden 1

Kegiatan sehari-hari di asrama ke tempat kuliah, dan sekarang ada kegiatan

di alhuriyah. Selama waktu luang saya ikut LDK di alhur dan ikut

kepanitian lokal karya.

Responden 2

Keseharian rutinitas kegiatan senin sampai jumat dari asrama ke gedung

kuliah jalan kaki. Kegiatan tambahan selain kuliah, ikut UKM untuk

menambah pengalaman, namun terkadang untuk menujang aktifitas

tersebut membutuhkan modal waktu dan materi.

Responden 3

Keseharian mahasiswa baru kuliah dari asrama ke CCR, di waktu luang

lebih sering meet time berkumpul bersama teman dan juga biasanya jalan-

jalan untuk lebih mengenal wilayah IPB.

Responden 4

Keseharin selama kuliah di IPB karena mahasiswa baru paling dari asrama

ke CCR, dan juga karena sekarang sudah dapat pelajaran agama jadi ada

aktivitas ke alhurriyah. Waktu luang lebih suka di asrama untuk bermain

game dan mencari-cari informasi baru.

2. Selama anda berada di kampus pernahkah menggunakan transportasi bus?

Apa kendala yang dihadapi?

Jawab:

Responden 1

Pernah, saya sering menggunakan transportasi bus. Kendala yang dihadapi

untuk informasi transportasi bus nya, karena bagi mahasiswa baru menaiki

asal naik bus yang tersedia tanpa diketahui rute dan koridornya, padahal

informasi tersebut penting untuk jenjang semester berikutnya.

Responden 2

Saya pernah menggunakan sepeda dan bus. Kendala yang dihadapi untuk

transportasi bus seperti waktu tunggu bus lebih terjadwal sehingga tidak

wasting time, ketersedian transportasi bus pada weekend karena saya

mahasiswa rantu lebih sering stay di kampus,

Responden 3

Saya menggunakan sarana transportasi bus dan moli. Kendala yang saya

hadapi selama menggunakan transportasi bus seperti tidak tahu nya jadwal

bus yang pasti sehingga menunggu lama, dan ketika menaiki bus terkadang

masih ragu apakah bus yang dinaiki atau yang tersedia sudah sesuai tujuan,

Responden 4

Pernah. Kendala yang sering dihadapi yaitu kita tidak tahu jadwal dan rute

karena keterbatasan informasi sebagai mahasiswa baru.

3 Bagaimana cara mendapatkan informasi terhadap sarana transportasi bus?

Jawab:

Responden 1

Page 54: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

41

Saya biasanya jalan-jalan mencari tahu sendiri dan bertanya kepada orang

yang sudah tahu.

Responden 2

Biasanya saya bertanya kepada teman yang sudah tahu, karena disini juga

kan asrama jadi bisa tanya-tanya.

Responden 3

Bertanya kepada supir bus yang lewat, dan melihat petunjuk yang ada

disetiap halte.

Responden 4

Saya lebih sering mencari informasi sendiri di internet, bertanya ke pada

teman yang sudah tahu, dan membaca petunjuk disekitar kampus.

4 Informasi apa saja yang diperlukan untuk sarana transportasi bus?

Jawab:

Responden 1

Informasi rute dari setiap koridor bus, nomor pengenal bus. Kalau bisa

informasi dimuat di media online sehingga mudah di akses.

Responden 2

Saya membutuhkan informasi ketersedian transportasi, jadwal dari setiap

bus sehingga tidak wasting time.

Responden 3

Mungkin dari pengalaman saya menaiki bus, seperti jadwal bus sehingga

saya tidak menunggu lama lagi, rute dari setiap bus yang jelas menujukan

lokasi tujuan, informasi bus yang datang diperjelas lagi.

Responden 4

Saya menginginkan informasi posisi bus, jadwal dari setiap bus, seperti

jadwal pasti bus tiba di halte-halte nya, karena yang saya ketahui kalau di

universitas lain setiap bus sudah ontime tiba disetiap haltenya.

5 Apakah aplikasi explore kampus IPB Dramaga yang diujikan sudah baik

atau masih ada kekurangan? Saran untuk aplikasi?

Jawab:

Responden 1

Bagus, sudah familiar dengan aplikasi serupa. Saran untuk aplikasi ini

ditambahakan ciri-ciri bus yang akan sampai ke halte seperti nomor bus

atau plat nomor.

Responden 2

Ide aplikasinya sudah bagus, jadi untuk kedepannya bisa di upgrade dan di

maintenance, so far so good, orang-orang juga pasti membutuhkan dan

tidak bakal wasting time. Saran untuk tambahan informasi jumlah

operasional bus.

Responden 3

Sudah bagus, dengan adanya aplikasi ini menjadi lebih membantu untuk

beraktivitas. Saran saya selalu dikembangkan dan ditambahkan fitur-fitur

yang lainnya.

Responden 4

Sangat membantu dan sangat baik untuk mahasiswa baru yang belum tau

informasi jadwal kedatangan bus, rute dari setiap koridor bus.

Page 55: PERANCANGAN MOBILE USER EXPERIENCE APLIKASI EXPLORE …repository.unugha.ac.id/704/1/24.pdf · 2019-07-31 · PERNYATAAN MENGENAI . SKRIPSI. DAN . SUMBER INFORMASI SERTA PELIMPAHAN

42

RIWAYAT HIDUP

Penulis dilahirkan di Bogor pada tanggal 14 April 1995 dari Bapak Moh.

Abdul Latif dan Ibu Uwat Suprihati. Penulis adalah putra ke- delapan dari sembilan

bersaudara. Pada tahun 2013, penulis lulus dari SMA Negeri 10 Bogor dan pada

tahun yang sama, penulis lulus seleksi masuk Institut Pertanian Bogor (IPB) melalui

jalur Ujian Talenta Masuk IPB dan diterima di Departemen Ilmu Komputer,

Fakultas Matematika dan Ilmu Pengetahuan Alam IPB.

Selama kuliah, penulis aktif di organisasi Himpunan Mahasiswa Ilmu

Komputer selama satu tahun sebagai staff divisi eksternal, Lembaga Pendidikan

dan Keterampilan Tepi Sawah sebagai ketua dan organisasi Cyber Security IPB

sebagai anggota. Selama kuliah di IPB, penulis juga mendapat berbagai macam

pengetahuan tentang IT Security dan pernah mengikuti beberapa lomba terkait IT

Security diantaranya Lomba Capture The Flag Gemastik 9 (4th Winner), Lomba

IDSECCONF CTF offline 2016 (4th Winner) serta Lomba Cyber Defense

Competition (Top 10).