UX Case Study: Kitabatik Apps

Nanda Brilianto
9 min readNov 26, 2018

--

Hi! Kali ini saya akan membahas tentang UX process dari project prototype aplikasi yang dibuat oleh saya bersama teman-teman. Kami membagi tim menjadi:

Aplikasi yang kami buat bernama Kitabatik, yaitu aplikasi mobile yang memungkinkan pengguna untuk tidak hanya membeli produk batik tetapi juga mempelajari makna, sejarah, dan filosofi, dibalik motif-motif batik.

Market Research

Market research yang dilakukan oleh tim UX researcher bertujuan untuk memvalidasi hipotesis masalah yang didefinisikan dan mencari tahu apakah ada demand terhadap produk. Hipotesis masalah yang didefinisikan adalah sebagai berikut:

  1. Orang hanya belanja batik tanpa mengetahui filosofi dibalik motif-motif batik
  2. Belum ada sarana untuk belajar batik sekaligus edukasi tentang filosofi dibalik motif batik

Research plan

Setelah mendefinisikan hipotesis masalah, kami membuat research plan sebagai berikut:

  1. Metode yang digunakan: Online Survey
  2. Target jumlah responden: 100 orang
  3. Demografi market:
  • Usia 16–25 tahun
  • Pendidikan S1
  • Pengguna aktif smartphone
Persona Target User 1
Persona Target User 2

Pelaksanaan Research

Setelah membuat research plan, kami memulai melakukan research dengan menyebarkan link online survey ke media sosial dan didapat hasil sebagai berikut:

Kesimpulan Research

Berdasarkan hasil market research yang telah dilakukan dapat disimpulkan bahwa ada demand terhadap produk ini.

Desain dan Prototype

Tim UX/UI Designer membuat 2 desain alternatif yang nantinya akan dicari mana yang terbaik untuk digunakan.

Wireframing

Wireframe dibuat dengan menggunakan pen and paper.

  • Wireframe desain A:
  • Wireframe desain B:

High-Fidelity Design

High-fidelity design dibuat dengan menggunakan Adobe XD.

Desain Login (Desain A sebelah kiri dan desain B sebelah kanan)
Desain Fitur Snap Batik (Desain A sebelah kiri dan desain B sebelah kanan)
Desain Fitur Belajar Batik (Desain A sebelah kiri dan desain B sebelah kanan)
Desain Fitur Belanja Batik (Desain A sebelah kiri dan desain B sebelah kanan)

Prototype

Prototype dibuat dengan menggunakan Marvellapp. Desain dan prototype lengkap dapat dilihat pada link berikut:

C. Usability Testing

Usability testing dilakukan oleh tim UX researcher untuk mengetahui masalah usability yang mungkin terdapat pada desain yang sudah dibuat oleh tim UX/UI designer.

Usability Studies Plan

Usability studies plan digunakan untuk merencanakan model dari usability studies, dengan rincian sebagai berikut:

  • Formative study, yaitu hanya ingin mengetahui masalah usability dari produk
  • Studi membandingkan desain A dan desain B
  • Within-group model, dengan jumlah 5 responden yang sama untuk kedua desain (berasal dari kalangan mahasiswa S1)

Task

Task yang harus dijalankan oleh partisipan adalah sebagai berikut:

  • Task 1: Belanja batik blue navy
  • Task 2: Mempelajari motif batik Megamendung
  • Task 3: Melakukan snap batik

Usability Metrics

Usability metrics yang digunakan adalah sebagai berikut:

  • Task completion rate
  • Task analysis
  • Time-on task
  • User Experience Questionnaire (UEQ)

Hasil Usability Testing

  1. Task Completion Rate

Dari hasil usability testing, didapatkan task completion rate sebagai berikut:

Desain A:

  • Pada task 1, 5 partisipan dari total 5 partisipan berhasil menyelesaikan task
  • Pada task 2, 5 partisipan dari total 5 partisipan berhasil menyelesaikan task
  • Pada task 3, 5 partisipan dari total 5 partisipan berhasil menyelesaikan task

Desain B:

  • Pada task 1, 4 partisipan dari total 5 partisipan berhasil menyelesaikan task
  • Pada task 2, 5 partisipan dari total 5 partisipan berhasil menyelesaikan task
  • Pada task 3, 5 partisipan dari total 5 partisipan berhasil menyelesaikan task

Untuk lebih jelas dapat dilihat pada grafik dan tabel di bawah ini:

Hasil Task Completion Rate
Grafik Task Completion Rate

2. Task Analysis and User Journey

Task 1:

  • Berikut merupakan task analysis dan user journey dari task 1 desain A:
Task Analysis Task 1 Desain A
User Journey Task 1 Desain A
  • Berikut merupakan task analysis dan user journey dari task 1 desain B:
Task Analysis Task 1 Desain B
User Journey Task 1 Desain B
  • Berikut merupakan task analysis dan user journey dari task 2 desain A:
Task Analysis Task 2 Desain A
User Journey Task 2 Desain A
  • Berikut merupakan task analysis dan user journey dari task 2 desain B:
Task Analysis Task 2 Desain B
User Journey Task 2 Desain B
  • Berikut merupakan task analysis dan user journey dari task 3 desain A:
Task Analysis Task 3 Desain A
User Journey Task 2 Desain B
  • Berikut merupakan task analysis dan user journey dari task 3 desain B:
Task Analysis Task 3 Desain B
User Journey Task 3 Desain B

3. Time-on Task Completion

Setelah dilakukan usability testing, didapatkan time-on task completion sebagai berikut:

Desain A:

Time-on Task Completion Desain A

Pada task 1 desain A, didapatkan:

  • Mean sebesar 40,8 detik. Terdapat 2 partisipan yang dapat menyelesaikan task lebih cepat dari mean dan terdapat 3 partisipan yang dapat menyelesaikan task lebih lambat dari mean
  • Median sebesar 41 detik. Terdapat 2 partisipan yang dapat menyelesaikan task lebih cepat dari median dan terdapat 2 partisipan yang dapat menyelesaikan task lebih lambat dari median

Pada task 2 desain A, didapatkan:

  • Mean sebesar 43,6 detik. Terdapat 2 partisipan yang dapat menyelesaikan task lebih cepat dari mean dan terdapat 3 partisipan yang dapat menyelesaikan task lebih lambat dari mean
  • Median sebesar 54 detik. Terdapat 2 partisipan yang dapat menyelesaikan task lebih cepat dari median dan terdapat 2 partisipan yang dapat menyelesaikan task lebih lambat dari median

Pada task 3 desain A, didapatkan:

  • Mean sebesar 38,6 detik. Terdapat 4 partisipan yang dapat menyelesaikan task lebih cepat dari mean dan terdapat 1 partisipan yang dapat menyelesaikan task lebih lambat dari mean
  • Median sebesar 36 detik. Terdapat 2 partisipan yang dapat menyelesaikan task lebih cepat dari median dan terdapat 2 partisipan yang dapat menyelesaikan task lebih lambat dari median

Desain B:

Time-on Task Completion Desain B

Pada task 1 desain B, didapatkan:

  • Mean sebesar 65,6 detik. Terdapat 4 partisipan yang dapat menyelesaikan task lebih cepat dari mean dan terdapat 1 partisipan yang dapat menyelesaikan task lebih lambat dari mean
  • Median sebesar 40 detik. Terdapat 2 partisipan yang dapat menyelesaikan task lebih cepat dari median dan terdapat 2 partisipan yang dapat menyelesaikan task lebih lambat dari median

Pada task 2 desain B, didapatkan:

  • Mean sebesar 21,8 detik. Terdapat 3 partisipan yang dapat menyelesaikan task lebih cepat dari mean dan terdapat 2 partisipan yang dapat menyelesaikan task lebih lambat dari mean
  • Median sebesar 18 detik. Terdapat 2 partisipan yang dapat menyelesaikan task lebih cepat dari median dan terdapat 1 partisipan yang dapat menyelesaikan task lebih lambat dari median

Perbandingan mean dari kedua desain dapat dilihat pada grafik di bawah ini:

Grafik Perbandingan Mean Time-on Task Completion (alpha level = 0,05)

Dari grafik di atas, dapat dilihat secara kasat mata bahwa partisipan dapat :

  1. Menyelesaikan task 1 lebih cepat dengan menggunakan desain A daripada desain B
  2. Menyelesaikan task 2 lebih cepat dengan menggunakan desain B daripada desain A
  3. Menyelesaikan task 3 lebih cepat dengan menggunakan desain B daripada desain A.

Untuk melihat signifikansi dari perbedaan mean time-on task completion perlu dilakukan t-test yang diolah dengan menggunakan Excel Data Analysis.

Time-on task completion dari task 1:

Hasil Analisis Statistik Time-on Task Completion dari Task 1

Dari tabel di atas, didapatkan nilai p sebesar 0,403272156 (alpha value = 0,05). Karena nilai p>0,05, dapat disimpulkan bahwa tidak ada perbedaan signifikan antara nilai mean dari time-on task completion untuk task 1 desain A dan desain B.

Time-on task completion dari task 2:

Hasil Analisis Statistik Time-on Task Completion dari Task 2

Dari tabel di atas, didapatkan nilai p sebesar 0,038976638 (alpha value = 0,05). Karena nilai p<0,05, dapat disimpulkan bahwa ada perbedaan signifikan antara nilai mean dari time-on task completion untuk task 2 desain A dan desain B.

Time-on task completion dari task 3:

Dari tabel di atas, didapatkan nilai p sebesar 0,007903645 (alpha value = 0,05). Karena nilai p<0,05, dapat disimpulkan bahwa ada perbedaan signifikan antara nilai mean dari time-on task completion untuk task 3 desain A dan desain B.

4. User Experience Questionnaire (UEQ)

User Experience Questionnaire (UEQ) adalah salah satu kuesioner yang dapat digunakan dalam usability testing untuk mengukur tingkat User Experience suatu produk. UEQ dapat diunduh di www.ueq-online.org. Terdapat 7 skala dengan total 26 elemen yang dikategorikan berdasarkan skala-skala pengukuran (komponen) yang terdapat pada UEQ . Skala-skala pengukuran (komponen) yang terdapat pada UEQ adalah sebagai berikut:

  • Attractiveness (Daya tarik): Kesan terhadap produk. Apakah pengguna menyukai atau tidak menyukai produk?
  • Efficiency (Efisiensi): Kemungkinan suatu produk dapat digunakan dengan cepat dan efisien. Selain itu, apakah antarmuka pengguna terlihat terorganisir, menjadi bagian aspek yang dipertimbangkan.
  • Perspicuity (Kejelasan): Apakah memungkinkan menggunakan produk ini? Apakah mudah untuk membiasakan diri menggunakan produk ini?
  • Dependability (Ketepatan): Apakah pengguna merasa dalam kontrol interaksi? Apakah interaksi dengan produk aman dan dapat diprediksi?
  • Stimulation (Stimulasi): Apakah menarik dan menyenangkan menggunakan produk tersebut? Apakah pengguna merasa termotivasi untuk terus menggunakan produk?
  • Novelty (Kebaruan): Apakah desain produk inovatif dan kreatif? Apakah produk mampu mendapatkan perhatian pengguna?
Kuesioner UEQ

Dari usability testing, didapatkan hasil UEQ sebagai berikut:

Scale Mean dari UEQ (alpha level = 0,05)
Grafik Perbandingan dari Scale Mean UEQ (alpha level = 0,05, data set 1 = desain A, data set 2 = desain B)

Pada grafik di atas, secara kasat mata dapat dilihat bahwa:

  • Pada komponen attractiveness (daya tarik), desain A lebih tinggi daripada desain B
  • Pada komponen perspicuity (kejelasan), desain B lebih tinggi daripada desain A
  • Pada komponen efficiency (efisiensi), desain B lebih tinggi daripada desain A
  • Pada komponen dependability (ketepatan), desain A lebih tinggi daripada desain B
  • Pada komponen stimulation (stimulasi), desain B lebih tinggi daripada desain A
  • Pada komponen novelty (kebaruan), desain A lebih tinggi daripada desain B

Untuk melihat signifikansi perbandingan dari scale mean masing-masing komponen UEQ antara kedua desain perlu dilakukan t-test. Didapatkan hasil sebagai berikut:

t-test results (alpha level = 0,05)

Dari tabel di atas didapatkan p level pada semua komponen UEQ. p level pada semua komponen UEQ bernilai > 0,05, sehingga dapat disimpulkan bahwa tidak ada perbedaan signifikan pada masing-masing komponen UEQ di antara desain A dan desain B.

P.S:

  1. Semakin banyak jumlah partisipan akan semakin akurat nilai statistik yang dihasilkan. Disinilah kesabaran UX Researcher akan diuji jika dihadapkan pada jumlah partisipan yang semakin banyak 😛
  2. Silahkan beri komentar dan masukkan! Komentar dan masukkan dari anda sangat berarti untuk kami 😀

Sumber referensi:

--

--

Nanda Brilianto

Interested in Human Computer Interaction (HCI) and User Experience (UX) research