Received June1 st ,2012; Revised June25 th , 2012; Accepted July 10 th , 2012

## Analisis dan Desain User Interface dan User Experience dengan Pendekatan User Persona Berbasis Design Thinking
Reva Eka Prasetyo 1 , Tan Amelia 2 , Julianto Lemantara* 3 1,2,3 Jurusan Sistem Informasi, Fakultas Teknologi dan Informatika, Universitas Dinamika,
Jl. Raya Kedung Baruk No. 98, Surabaya, Jawa Timur, Indonesia
e-mail: 1 18410100004@dinamika.ac.id, 2 meli@dinamika.ac.id, * 3 julianto@dinamika.ac.id

## Abstrak
Picnicker merupakan startup yang bergerak pada bidang pariwisata dimana layanannya menyediakan  informasi  bagi  para  wisatawan  yang  ingin  mencari  kemudahan  menemukan informasi dan mendapatkan akses ke tempat wisata lokal dengan pembelian tiket secara online dan validasi masuk ke tempat wisata tanpa antrean untuk mengurangi risiko tertular Covid-19 di tengah  pandemi.  Permasalahan  saat  ini  startup  Picnicker  membutuhkan  platform  yang  dapat menampung sekumpulan informasi tentang destinasi wisata, lokasi wisata, dan tiket obyek wisata dalam membentuk sebuah produk yang akan dibangun untuk mencapai minimum viable product (MVP)  yang  tentunya  terdapat  aspek-aspek  salah  satunya  yaitu  User  Interface  dan  User Experience. Penelitian ini menggunakan metode Design Thinking yang terdapat ada 5 tahap yaitu empathize,  define,  ideate,  prototype,  dan  test.  Selain  itu  alasan  menggunakan  metode  Design Thinking karena proses penciptaan ide-ide inovasi baru untuk memecahkan permasalahan pada pengembangan  produk  aplikasi  baru  serta  untuk  pengukuran  user  experience  menggunakan framework HEART Metric yang dikembangkan oleh Google untuk mengukur tingkat keberhasilan UX  pada  suatu  produk.  Berdasarkan  analisis  dan  perancangan  user  interface  dan  user experience  pada  startup  Picnicker  dengan  pendekatan  user  persona  berbasis  design  thinking menghasilkan  kesuksesan  User  Experience  yang  dilakukan  menggunakan  Framework  Google Heart Metric memperoleh sebesar 0,762 dan lebih besar dari r-tabel 0,284 dengan melakukan uji reliabel menggunakan Cronbach Alpha yang ditunjukkan ke 23 pertanyaan dan dari indikator Framework Heart Metric terdapat 5 indikator yaitu happiness, engagement, adaption, retention, dan task success yang mana rata-rata presentase sebesar 55,1% yang artinya secara keseluruhan dari hasil yang didapat menunjukkan pengguna dapat diterima dan mendapatkan kisaran yang baik.
Kata kunci : User interface/user experience, Design Thinking, Framework Heart Metric

## Abstract
Picnicker is a startup that is engaged in tourism where its services provide information for tourists who want to find it easy to find information and gain access to local tourist attractions by purchasing tickets online and validating entry to tourist attractions without queuing to reduce the risk of contracting Covid-19 in the middle of the world. pandemic. The current problem is that the Picnicker startup requires a platform that can accommodate a collection of information about tourist destinations, tourist locations, and tourist attraction tickets in forming a product that will be built to achieve a minimum viable product (MVP), which of course has aspects, one of which is the User Interface and User Experience. This study uses the Design Thinking method which there are 5 stages, namely empathize, define, ideate, prototype, and test. In addition, the reason for using the Design Thinking method is because of the process of creating new innovative ideas to  solve  problems  in  developing  new  application  products  and  for  measuring  user  experience using the HEART Metric framework developed by Google to measure the level of success of UX on a product. Based on the analysis and design of the user interface and user experience at the

## 2
Picnicker startup with a user persona approach based on design thinking, the success of  User Experience carried out using the Google Heart Metric Framework was 0.762 and greater than r- table 0.284 by performing a reliable test using Cronbach Alpha which is shown to 23 questions and  from  the  Heart  Metric  Framework  indicators  there  are  5  indicators,  namely  happiness, engagement,  adaptation,  retention,  and  task  success  where  the  average  percentage  is  55.1%, which means that overall the results obtained indicate that users are acceptable and get a range of the good one.
Keywords : User interface/user experience, Design Thinking, Framework Heart Metric

## 1. PENDAHULUAN
Picnicker merupakan startup yang bergerak pada bidang pariwisata dimana layanannya menyediakan  informasi  bagi  para  wisatawan  yang  ingin  mencari  kemudahan  menemukan informasi dan mendapatkan akses ke tempat wisata lokal dengan pembelian tiket secara online dan validasi  masuk  ke  tempat  wisata  tanpa  antrean  untuk  mengurangi  resiko  tertular  Covid-19 ditengah  pandemi.  Permasalahan  saat  ini startup Picnicker  membutuhkan platform  yang  dapat menampung sekumpulan informasi tentang destinasi wisata, lokasi wisata, dan tiket obyek wisata dalam membentuk sebuah produk yang akan dibangun untuk mencapai minimum viable product (MVP) yang tentunya terdapat aspek-aspek salah satunya yaitu User Interface Ketika pengguna merasakan sebuah perasaan atau pengalaman setelah menggunakan jasa atau produk disebut User Experience (UX) [1] sedangkan tampilan visual yang dilihat oleh pengguna ketika berinteraksi dengan mobile  application, dalam  tujuannya  untuk  memahami  informasi  serta  menggunakan layanan yang disediakan produk atau jasa disebut dengan User Interface (UI) [2]. Penelitian ini menggunakan  metode Design  Thinking karena  proses  penciptaan  ide-ide  inovasi  baru  untuk memecahkan permasalahan pada pengembangan produk aplikasi baru. Metode ini memecahkan permasalahan yang belum terdefinisi secara jelas dilakukan dengan cara memahami kebutuhan pengguna  yang  akan  terlibat  menggunakan  aplikasi,  dengan  cara  mengumpulkan  banyak  ide dalam sesi brainstroming , dan melakukan pendekatan langsung melalui pembuatan prototipe dan pengujian langsung [3] serta untuk pengukuran user experience menggunakan framework HEART Metric dari Google [4] untuk mengukur tingkat keberhasilan UX pada suatu produk.

## 2. METODE PENELITIAN
Metode penelitian dapat dilihat pada Gambar 1.
3
Tahapan  metodologi  penelitian  ini  terdapat  ada  3  tahapan  yaitu  tahap  awal,  tahap pengembangan,  dan  tahap  akhir.  Untuk  tahap  awal  untuk  memahami  model  peracangan  dan pemahaman  materi,  untuk  tahap  pengembangan  untuk  melakukan  pelaksanaan  penelitian percangan  desain user  interface dan user  experience berdasarkan  metode  dan  pengujian  yang dipakai,  dan  yang  terakhir  tahap  akhir  untuk mendokumentasikan  hasil  rancangan  desain  yang sudah diuji cobakan.

## 3. HASIL DAN PEMBAHASAN

## 3.1. Tahap Awal
A. Studi Literatur
Berdasarkan  identifikasi  masalah  yang  ditemukan  maka  mempelajari  studi  literatur  dari teori-teori dan sumber data pendukung yang akan dikembangkan dalam pembuatan analisis dan perancangan UI/UX pada aplikasi Picnicker dengan pendekatan user persona [4] dengan metode Design Thinking [5].

## B. Tahap Empatize
Tahap Empatize dengan melakukan user research seperti in-dept interview kepada 5 orang dan  menyebarkan  survey  kepada  33  orang.  Hasil  in-depth  interview  ditemukan  beberapa permasalahan  yang  dialami  pengguna  ketika  melakukan  perjalanan  ke  tempat  destinasi  wisata dikala  pandemi,  kebutuhan  pengguna  ketika  mencari  destinasi  wisata  dikala  pandemi.  Setalah melakukan In-depth  interview dan  survey,  penulis  melakukan competitor  analysis untuk membedakan  produk  dan  layanan  yang  akan  diberikan  kepada  pengguna. Competitor  analysis dapat dilihat pada Tabel 1.
Tabel 1 Competitor Analysis Customer (Who) Problem (What) Solution (How) Picnicker vs Traveloka Different Customer   Picnicker vs Tiket.com Different Customer   Picnicker vs Atourin   Different Approch Picnciker vs Fave   

## 3.2. Tahap Pengembangan
A. Tahap Define
Tahap Define untuk mendefinisikan dari permasalahan pengguna dari hasil tahap empathize yang  mana  mengindetifikasi  permasalahan  pengguna  ketika  mencari  informasi  dan  melakukan destinasi wisata dikala pandemi.
1. Teknik User Persona
a. State Hypothesis
Pada  tahap State  Hypothesis penulis  mencari  permasalah  mengenai  pengguna  ketika mencari  informasi  dan  melakukan  destinasi  wisata  dikala  pandemi.  Berikut  hasil  analisa  yang terkait dengan permasalahan pada Tabel 2.
Tabel 2 Hipotesis State Hypothesis Hypotesis Persona Explanation H0 Wisatawan Picnicker  Pengguna ingin mengetahui informasi (alamat, lokasi, no. telp, website destinasi wisata, harga, dll) destinasi wisata yang sesuai dengan protokol kesehatan dan tiket online
4

## b. Ranges of Behavioural Variabels
Pada tahap ini penulis membuat daftar variabel perilaku yang berhubungan dengan masalah yang  ada  pada  Picnicker,  dan  memberikan  rentang  nilai  yang  mungkin  dari  setiap  variabel perilaku. Tabel 3 merupakan hasil identifikasi variabel perilaku.
Tabel 3 Variabel Perilaku Pengguna No Observed Behavioral Variabel Scale 1. Mencari Informasi Lokasi Destinasi Wisata Mudah          Sulit 2. Motivasi ingin berlibur ke tempat wisata dikala pandemi Ingin          Tidak Ingin 3. Frekuensi  melihat  tempat-tempat  wisata  berbagaia kategori/tipe tempat wisata di sosial media Sering          Jarang 4. Platform pencarian tempat wisata Mobile          Website 5. Jenis tiket yang sering digunakan Fisik          Digital
c. Mapping of interview subject (emotion card)
Pada  tahap  ini  akan  dilakukan  pemetaan  berdasarkan  dari  hasil  wawancara  yang  telah dilakukan oleh penulis. Hasil pemetaan dapat dilihat pada Gambar 2.
Gambar 2 Emoticon Card
d. Identify Significant Behaviour Pattern
Pada  tahap  ini  mengindentifikasi  masing-masing  kelompok  berdasarkan  karakteristik pengguna Picnicker Invalid source specified. . Hasil identifikasi dapat dilihat pada Tabel 4.
Tabel 4 Hasil Identify Significant Behaviour Observed Behavioral Variabel Scale Percentage Mencari Informasi Lokasi Destinasi Wisata Mudah Kadang Sulit 80% 10% 10% Motivasi  ingin  berlibur  ke  tempat  wisata  dikala pandemi Ingin Tidak Ingin 100% 0% Frekuensi  melihat  tempat-tempat  wisata  berbagai kategori/tipe tempat wisata di sosial media Sering Jarang 90% 10% Platform pencarian tempat wisata Mobile Website 80% 20% Jenis tiket yang sering digunakan Fisik Digital 10% 90%
5
e. Synthesize Characteristic and Relevant Goals
Pada tahap ini digunakan untuk menemukan pola perilaku dari pengguna Picnicker. Hasil pola perilaku yang sudah dipresentasikan dapat dilihat pada gambar 3.
Gambar 3 Synthesize Characteristic Pengguna
f. Check for Redudancy and Completeness
Pada tahap ini digunakan untuk memastikan bahwa semua persona bermakna berbeda [7]. Pada tahap ini, dilakukan validasi responden yang terdapat 4 fase sebagai berikut:
i. Memvalidasi data pengguna Picnicker
ii. Validasi menggunakan responden lain
iii. Validasi variable
iv. Menentukan anomali yang sedang terjadi
g. Expand the Description of Attribute and Behaviours
Tahap ini persona yang telah dibuat pada tahap-tahapan sebelumnya akan diubah menjadi bentuk narasi deskriptif yang akan di deskripsikan kedalam Persona Fundation Document yang dapat dilihat pada Gambar 5 [8].
h. Designate Persona Types
Tahap  ini  dibuat  berdasarkan  pada  tahap  sebelumnya,  yaitu  narasi  deskriptif  yang  telah dibuat untuk menentukan persona yang telah diwawancari yang dapat dilihat pada Gambar 4.
6
Gambar 5 Persona Fundation Document
i. Build Use Case
Pada  tahap  ini  penulis  membuat use  case untuk  mengimplementasikan  dan  merancang prototipe  yang  akan  dibangun  berdasarkan  kebutuhan  pengguna.  Use  case  dapat  dilihat  pada Gambar 6.
7
j. Implement and evaluate prototypes
Di tahap terakhir ini tahap untuk merancang prototype dalam proses pengembangan sistem yang  akan dibuat  yang didalamnya  terdapat  informasi  mengenai  destinasi  wisata  dan  tahap  ini berkaitan dengan design thinking yang terdapat pada tahap prototype di metode design thinking [6].
2. Empthy Map Empthy map untuk memvisualisasikan kolaboratif yang digunakan untuk mengartikulasikan apa yang kita ketahui tentang jenis pengguna tertentu yang berdasarkan apa yang dikatakan, dipikirkan, dilakukan, dan dirasakan. Emphaty Map dapat dilihat pada Gambar 7.

## Gambar 7 Emphaty Map

## B. Tahap Ideate
Pada tahap ini mencari segala macam solusi  yang dapat memecahkan permasalahan dari tahap sebelumnya dan mencatat segala macam solusi yang dikemukakan pada saat brainstorming .
1. How Might We
How Might we pada Gambar 8 adalah metode inovasi brainstorming yang didasarkan dapat bereksplorasi dengan liar/spontan dan kreativitas.
How Might We Pertama How Might We Kedua How Might We Kedua Gambar 8 How Might We
2. Crazy 8 Crazy  8 adalah  metode  invoasi brainstorming dengan  menggunakan  kertas  yang  dilipat sebanyak  8  kali  yang  dapat  menuangkan  ide-ide  yang  digambarkan.  Desain wireframe dapat dilihat pada Gambar 9.
8
Wireframe login dan kelengkapan data Wireframe Halaman Utama
Wireframe detail destinasi wisata Wireframe detail pemesanan Wireframe metode Pembayaran
Gambar 9 Desain Wireframe

## C. Tahap Prototype
Pada  tahap  ini  memvalidasi  bahwa  ide  yang  ada  dapat  menyelesaikan  masalah  dari pengguna.  Mulai  tahap  sebelumnya  yaitu ideate dari wireframe dengan  metode  crazy  8 dipindahkan ke low fidelity dalam bentuk digital. Lalu selanjutnya dari low fidelity ke high fidelity yang sudah memiliki warna, ukuran, jarak dan bentuk elemennya juga sudah dirangkai ke dalam bentuk prototype . Hasil high fidelity dapat dilihat pada Gambar 10.
9
Gambar 10 Prototype High Fidelity

## D. Tahap Testing
Pada  tahap  ini  melakukan  uji  coba  dari  ide  dan  rancangan  dari  tahap  sebelum,  untuk melakukan uji coba dengan metode usability testing yang terdapat indikator dari framework Heart by  google untuk  mengukur  parameter  kesuksesan  pengalaman  pengguna    yang  terdapat  ada  5 kategori  yaitu Happiness,  Engagement,  Adoption,  Retention, dan Task  Success .  5  kategori tersebut  adalah  metrik  yang  akan  digunakan  dalam  tahap  pengujian  ini.  Selanjutnya mengartikulasikan tujuan yang akan dijadikan tolak diukur yang mana terdapat 3 hal yaitu goals- signal-metrics . Goals-signal-metrics bisa dilihat pada tabel 5.
Tabel 5 Goals-signal-metrics Goal Signal Metrics Happiness, Engagement, Adaption, Retention, Dan Task Success Lakukan  penyebaran  kuesioner  dengan memberikan  pernyataan  yang  beriorientasi pada kepuasan,
kebahagiaan, dan kenyamanan  ( Happiness ), Engagement,
Adaption, Retention, dan Task Success Bentuk  jawaban  kuesioner akan  berada  pada  skala  1 sampai  5;  dan  peneliti  ingin menghitung presentasi responden yang menjawab 5
Langkah  selanjutnya  adalah  menyusun  pernyataan  kuisioner  yang  akan  diukur  untuk mendapatkan Metrics yang  telah  disusun  pada goal-signal-metrics .  Pernyataan  dijawab  oleh responden  dengan  skala likret 1  sampai  5.  Setelah  menyusun  kuisioner  peneliti  menyebarkan kuisioner yang mana telah mendapat jumlah responden sebanyak 48 responden dan melakukan depth  interview ke  10  responden  yang  dipilih.  Setelah  itu  melakukan  uji  reliabilitas  dengan menggunakan Cronbach alpha dengan menggunakan SPSS. Dari hasil pengujian  menunjukkan tingkat  reliabilitas  dengan  nilai  koefisiannya  kriteria  ≥  0,60.  Hasil  uji  reliabilitas  jika dibandingkan dengan r-tabel ditunjukkan pada tabel 7.
Tabel 6 Hasil Uji Reliabilitas Cronbach Alpha Test R-Tabel 0,762 0,284
Hasil analisa pengujian google heart metric menghasilkan yaitu:
1. User Interface dan visual mobile sesuai dengan pendekatan user persona
2. Menghasilkan  user  interface  dan  user  experience  yang  mudah  dipahami  oleh  pengguna dalam  mengakses  aplikasi mobile yang  mana  presentasenya  sebesar  52,1%  pada  kriteria Happines (H3) pengguna merasa mudah menggunakan aplikasi Picnicker dan pada kriteria task success (TS 3) yang mana presentase nya sebesar 56,3% bahwa pengguna bisa membaca detail informasi tempat destinasi wisata yang dipiih pengguna di aplikasi Picnciker
10
3. Memberikan  rekomendasi  informasi  destinasi  wisata  yang  sesuai  dengan  kebutuhan pengguna yang mana presentasenya sebesar 60,4% pada kriteria task success (TS 2) bahwa pengguna dapat melihat informasi tempat-tempat wisata di aplikasi Picnciker dan ditambah lagi pada kriteria adaption (A2) dengan presentase 47,9% aplikasi Picnicker dapat memenuhi kebutuhan pengguna
4. Informasi uptodate tentang destinasi wisata yang didukung pada kriteria Engagement (E5) dengan presentase 39,6% pengguna melakukan rutin update aplikasi Picnciker.
Dalam hal ini secara keseluruhan dari hasil yang didapat menunjukkan pengguna dapat diterima dengan baik dengan user interface dan user experience pada desain aplikasi Picnicker.

## 3.3. Tahap Akhir
Pada tahap ini merupakan dokumentasi hasil dari validasi yang dengan user interface / user experience dari  saran  dan  masukkan  yang  didapat  dari  responden.  Desain user  interface dapat dilihat pada gambar
Halaman Login dan Lengakapi Data
Halaman Detail Pesanan dan Data Pemesanan
Halaman Beranda Halaman Detail Destinasi Wisata
11 Halaman Pembayaran Halaman Pesanan dan Detail Tiket Gambar 11 Desain user interface

## 4. KESIMPULAN
Berdasarkan hasil analisis dan perancangan user interface dan user experience pada startup Picnicker dengan pendekatan user persona berbasis Design Thinking , menghasilkan kesimpulan dapsat ditarik antara lain:
A. Hasil  dari  pengujian  untuk  mengukur  kesuksesan  User  Experience  yang  dilakukan menggunakan Framework  Google  Heart  Metric memperoleh  sebesar  0,762 dan  lebih  besar dari r-tabel 0,284  dengan  melakukan  uji  reliabel  menggunakan Cronbach  Alpha yang ditunjukkan ke 23 pertanyaan. 23 pertanyaan tersebut dari 5 indikator kategori/kriteria yaitu Happiness,  Engagement,  Adoption,  Retention, dan Task  Success dari Framework  Google Heart  Metric yang  terbukti  reliabel  diperoleh  dari  hasil  skala  likert  dari  presentase  nilai variabel  yaitu:
i. Happiness mendapatkan rata-rata presentase paling sebesar yaitu 58,3%
ii. Engagement mendapatakan rata-rata presentase sebesar yauitu 58,3%, iii. Adoption mendapatkan rata-rata presentase sebesar 63,3% , iv. Retention mendapatkan rata-rata presentase sebesar 51%,
v. Task Success mendapatkan rata-rata presentase sebesar 63,3%.
B. Dari 5 kriteria google heart metric secara keseluruhan dari hasil yang didapat menunjukkan pengguna  dapat  diterima  dan  mendapatkan  kisaran  yang  baik  mulai  dari visual  desain/user interface yang  sesuai  dengan  pendektan user  persona ,  informasi  yang  mudah  dipahami, pengguna  mendapatkan  infomasi  rekomendasi  dan update serta  lengkap  tentang  destinasi wisata yang diinginkan.

## 5. SARAN
Saran  yang  diberikan  pada  hasil  penelitian  ini prototype yang  dihasilkan  fokus  pada device smartphone . Sehingga kedepannya dapat dikembangkan lagi dengan membuat tampilan prototype dalam segala ukuran device seperti tablet dan desktop, sehingga mampu menghasilkan prototype yang  lebih  baik  lagi  dan  dapat  digunakan  didalam  semua  jenis device .  Yang  kedua ditingkat kan lagi dalam hal user research nya seperti melakukan user persona , empthy map , user journey , dan lain-lainnya.
12

## DAFTAR PUSTAKA
[1]  R.  Fadhillah,  "Perbedaan  User  Interface  dan  User  Experience  pada  Desain  Aplikasi," Medium,  2018.  [Online].  Available:  https://medium.com/@ganfadhil/perbedaan-user- interface-dan-user-experience-pada-desain-aplikasi-d8fcaccf400a.
[2]  E. Tirtadarma, A. E. B. Waspada and E. F. Jasjfi, "Kajian Peranan Desain UX (Pengalaman Pengguna) - UI (Antar Muka Pengguna) Mobile Application Kategori Transportasi Online terhadap Gaya Hidup Bertransportasi Masyarakat Urban," Jurnal Seni Dan Reka Rancang: Jurnal Ilmiah Magister Desain, vol. 1(1), 2018.
[3]  E. Susanti, E. Fatkhiyah and E. Efendi, "Pengembangan Ui / Ux pada aplikasi M-Voting," Simposium Nasional RAPI, p. 364–370, 2019.
[4]  P.  N.  Lestari,  P.  I.  Santosa  and  R.  Ferdiana,  "Pengukuran  Pengalaman  Pengguna  Dalam Menggunakan  Sistem  Informasi  Akademik," Seminar  Nasional  Teknologi  Informasi  Dan Komunikasi, 2016.
[5]  Y.  Arifin,  "PENGENALAN  TENTANG  PERSONA,"  Binus  University,  2016.  [Online]. Available: https://socs.binus.ac.id/2016/12/28/pengenalan-tentang-persona/.
[6]  H.  M.  Kalyani, "Apa  itu  Persona?,"  Medium,  2019.  [Online].  Available: https://medium.com/learnfazz/apa-itu-persona-2e3d2cab00ba.
[7]  W. A. Kusuma and D. Yanto, "Penggunaan User Persona untuk Meningkatkan Efektifitas Penggunaan  Kebutuhan  pada  Perangkat  Lunak," SENTRA  (Seminar  Teknologi  dan Rekayasa), p. 42–48, 2021.
[8]  W.  A.  Kusuma,  A.  Chathil,  Y.  Raditya  and  N.  &  Prakoso,  "Elisitasi  Kebutuhan Menggunakan  User  Persona," Prosiding  SENTRA  (Seminar  Teknologi  Dan  Rekayasa), p. 85–93, 2020.
[9]  W.  Eli,  "Design  Thinking  Handbook,"  DesignBetter.Co,  2011.  [Online].  Available: https://www.designbetter.co/design-thinking/prototype.