Studi kasus UX: Wajah baru aplikasi JNE

Sebuah pendesainan dan perancangan ulang dari aplikasi JNE

Rhasyab
9 min readMay 8, 2019

Studi kasus ini bertujuan untuk membagikan proses yang saya dalam mendesain ulang sebuah aplikasi, sekaligus pembelajaran untuk saya mengenai proses-proses dalam membuat user Interface. Mulai dari proses research hingga prototype.

Sebelum mulai, JNE adalah sebuah perusahaan yang bergerak dalam bidang pengiriman dan logistik yang bermarkas di Jakarta, Indonesia.

Goals dari case study ini adalah membuat aplikasi yang memenuhi kebutuhan user dan juga membuat interface dari aplikasi ini lebih menarik.

Impact yang saya coba berikan jika desain ini diimplementasikan adalah bertambahnya jumlah pelanggan yang menggunakan aplikasi ketimbang menggunakan platform website dalam menggunakan fitur JNE. Dan juga membuat user yang sudah tidak menggunakan aplikasi JNE, kembali menggunakannya karena merasa lebih terbantu dengan adanya fitur-fitur baru dari studi kasus ini.

Ide dari case study ini saya dapatkan ketika saya dulunya seseorang yang aktif sebagai seller disalah satu e-commerce yang mengharuskan saya menggunakan jasa pengiriman barang. Namun ide ini baru terpikirkan lagi saat saya mulai belajar UI & UX dan ingin menjadikan ide ini sebagai studi kasus.

Keresahan

Sebagai pengirim atau penerima, saya ingin sekali mengetahui barang yang kita kirim sedang dimana? Sudah dekat atau belum? Apa kurir mengantar di alamat yang benar?

Saya sendiri tentu sering menanyakan ke diri sendiri salah satu pertanyaan di atas yang memang benar-benar membuat kekhawatiran yang berlebih karena takut barang tidak sampai tujuan atau sudah sampai namun berbeda penerima dan si penerima yang seharusnya menerima tidak tau-menau sama sekali soal itu.

Dari masalah-masalah di atas, saya mengasumsikan ide: Bagaimana jika ada suatu layanan jasa pengiriman barang mempunyai

  • fitur live tracking pada kurir saat mulai mengantarkan barang dan
  • fitur chat kepada kurir jika kurir mempunyai pertanyaan seputar lokasi si penerima dan juga bisa untuk menginformasikan kurir tentang patokan

Untuk mengetahui apakah fitur tersebut akan berguna, saya melakukan..

Research

Untuk mengetahui apakah fitur-fitur yang saya asumsikan dibutuhkan oleh user, saya membuat survey yang saya bagikan secara online yang bertujuan untuk menemukan kesulitan pada user yang telah memakai aplikasi ini.

Dari hasil survey, saya mendapatkan 12 responden dari mulai mahasiswa hingga yang sudah bekerja, mulai dari umur 18 tahun hingga 24 tahun.

Memang terbilang sedikit, namun saya kira tanggapan dari 12 Responden sudah cukup merepresentasikan apa yang dikeluhkan dan disukai user lain pada aplikasi tersebut.

Dari Pertanyaan ke 5 hingga 7, saya mendapatkan hasil yaitu 99% responden pernah menggunakan jasa JNE dan cukup sering menggunakan jasanya.

Dan yang paling unik adalah pada Pertanyaan ke 8 yang menanyakan kepada responden: “platform apa yang sering dipakai untuk mengecek barang atau resi, website/aplikasi?” dan 75% responden menjawab website.

Tanggapan mengenai platform yang sering digunakan untuk mengecek resi

Lalu kenapa saya tetap melanjutkan untuk melanjutkan studi kasus ini? Karena saya mempunyai asumsi bahwa user berfikir jika mempunyai sebuah aplikasi namun fiturnya sama saja dengan yang ada di website, untuk apa di unduh? Yang sekiranya hanya memenuhi storage ponsel.

Dari pertanyaan ke 9, saya bertanya mengenai aplikasi tersebut kepada user, mulai dari pengalaman user hingga kesulitan user.

Dari pertanyaan mengenai pengalaman, user beranggapan bahwa fitur yang ada sekarang sudah cukup membantu mereka, tapi saat saya mengajukan pertanyaan tentang kesulitan mereka, ternyata banyak sekali kesulitan dan ketidaksukaan yang user alami terhadap aplikasi tersebut. Mulai dari Kurangnya detail dalam memberikan posisi kurir hingga tampilan interface yang kurang menarik.

Tanggapan Responden dari pertanyaan “Apa saja kekurangan pada Aplikasinya?”

User Need

Dari kesulitan-kesulitan yang user alami pada aplikasi ini, saya menyimpulkan beberapa hal yang dibutukan user, yaitu:

  1. Bisa melacak keberadaan paket (Fitur utama)
  2. Mengetahui lokasi kurir secara real time (Fitur live tracking)
  3. Bisa berinteraksi dengan kurir (Fitur chat)
  4. Perkiraan waktu sampainya kurir ke tujuan pengiriman
  5. Mengetahui data penerima
  6. Mengetahui identitas kurir
  7. Interface yang menarik dan modern

User Flow

User flow di bawah adalah flow mulai dari user membuka aplikasi hingga tampilan ketika user menerima barang.

User Flow

Mungkin anda bertanya-tanya “Kenapa cek resi harus login?”, Halaman login hanya diperuntukan jika user belum login saja.

Kenapa harus? Sebenarnya pada aplikasi ini terdapat fitur yang akan berguna namun hanya bisa dipakai jika user telah login saja.

Wireframe dan Low Fidelity

Untuk wireframe saya hanya membuatnya disecarik kertas untuk menentukan apa saja informasi yang akan ditampilkan pada tiap halaman. Jadi di Adobe XD saya langsung membuat low Fidelity-nya untuk menyusun konten dan informasi.

Low Fidelity

Sebenarnya saya lebih suka langsung lompat ke pembuatan high fidelity, karena ketika langsung membuat high fidelity saya merasa lebih cepat mendapat gambaran hasil akhirnya, sekaligus bisa langsung mengetahui apakah ukuran font, icon, dan tombolnya terlalu kecil, terlalu besar, atau bahkan tidak cocok. Namun pada studi kasus ini saya mencoba membuat low fidelity-nya terlebih dahulu untuk belajar proses UI Design dengan membuat low fidelity-nya terlebih dahulu.

Walaupun high fidelity-nya lumayan berbeda dari hasil low fidelity, namun untuk susunan informasinya tetap sama.

High Fidelity

Ini adalah hasil high fidelity dari semua halaman yang ada di user flow.

Sebelum mulai, saya ingin memberitahukan bahwa icon yang saya gunakan saya dapatkan di Flaticon (Flaticon.com) dan juga Feathericon (Feathericon.com).

Beranda

Halaman ini adalah tempat dimana user akan mengakses fitur-fitur yang mereka ingin gunakan, mulai dari cek Resi, cek Tarif, dll.

Di Halaman ini terdapat salah satu fitur yang berguna jika user telah login, yaitu fitur yang menunjukan paket yang sedang diproses, yang terletak dibawah profile.

Jadi dengan adanya login, user bisa mengakses fitur ini di mana saja dengan device yang berbeda.

Cek Resi

Pada Halaman ini terdapat satu tombol FAQ yang jika ditekan akan membawa user ke Halaman FAQ, yang akan membantu user jika ada pertanyaan mengenai resi, cara meng-scan Resi, dan lain-lain.

Kenapa saat nomor resi belum diisi, tombol scan-nya menyala? Sebenarnya saya ingin agar user lebih memakai scan ketimbang mengetik ulang resi yang memakan waktu lebih lama. Namun jika user tetap ingin paste nomor resi, tetap bisa.

Kenapa saat nomor resi telah diisi, tombol scan-nya tidak menyala? Ketika user telah mengisi nomer resi, jika tombol scan dan cek resi sama-sama menyala, user berkemungkinan besar akan salah menekan tombol.

Menurut saya, jika user telah mengisi nomor resi, user tidak akan melakukan peng-scanan lagi. Jadi lebih baik tombol scan di-disabled agar user tidak salah menekan tombol.

Login

Pada halaman ini, saya memilih untuk membuat desain yang sangat simpel dan sangat umum diketahui orang-orang.

Detail Info

Pada halaman ini, saya membaginya menjadi 4 bagian informasi,

Bagian Pertama adalah Bagian dikirim dan waktu

Pada bagian ini user akan diberikan informasi mengenai tanggal, bulan, tahun, dan waktu saat paket dikirim.

Bagian Kedua adalah Bagian alamat dan tujuan pengiriman

Pada bagian ini user akan diberikan informasi mengenai siapa pengirim, penerimanya, asal dan tujuan paketnya.

Di bagian kanan atas bagian ini, terdapat tombol centang didalam lingkaran oranye yang jika ditekan, akan menyatakan bahwa informasi di bagian kedua dan ketiga adalah benar.

Bagian Ketiga adalah Bagian informasi yang mendetail mengenai paket dan jasa pengiriman

Pada bagian ini user diberikan informasi mulai dari apa isi paket yang sedang dikirimkan, berat paket, apakah paket menggunakan asuransi, dan apa layanannya. Informasi ini bertujuan agar user tau kenapa tarifnya bisa sekian rupiah.

Disebelah Detail Barang terdapat icon dan juga tulisan yang bertuliskan approved yang akan menyala jika user telah menekan tombol centang yang ada di Bagian Kedua . Ini bertujuan untuk menginformasikan kalau user telah menyetujui kalau informasi yang terdapat pada halaman tersebut sudah benar.

Bagian Keempat adalah Bagian informasi Total Tarif dari Jasa Pengiriman

Pada Bagian ini user diberikan informasi total tarif dari jasa yang dipakai.

Track Info

Pada halaman ini, user diberikan informasi dimana letak paketnya berada, sedang dalam proses apa, dan proses apa yang sebelumnya dijalankan oleh paketnya.

Dalam bagian informasi proses, saya coba berikan informasi yang lebih spesifik dalam penulisan proses yang sedang dilakukan pada paket agar tidak membingungkan user.

Pada halaman ini dan sebelumnya, terdapat tombol report yang dapat digunakan jika paket stuck disuatu proses dan tempat dengan waktu yang cukup lama atau terdapat sesuatu yang salah pada detail informasi

Live Tracking

Halaman ini adalah halaman yang akan muncul ketika kurir sudah mulai menuju ke alamat tujuan pada resi anda. Halaman ini bertujuan untuk mempermudah user dalam mengetahui posisi kurir yang membuat user lebih merasa lega, karena mungkin jika tadinya user mau pergi ke suatu tempat jadi bisa ditunda karena mengetahui tau kurir sudah dekat.

Pada halaman ini juga terdapat Fitur chat yang akan membantu kurir jika kurir tersesat atau sekedar ingin mengetahui patokan dan detail alamat yang lebih lengkap. Dan fitur ini juga dapat membantu user jika ingin memberikan informasi penting, misalnya penerimanya nanti akan berbeda dari yang dicantumkan.

Dari fitur chat, pengirim dan penerima akan mempunyai halaman chat yang berbeda, tentu agar pengirim tidak bisa melihat pesan antara penerima dan kurir atau sebaliknya. Sebenarnya dari sisi kurir saya punya desain tersendiri agar kurir tidak kewalahan dalam mengatasi dua chat sekaligus. Jika ada waktu saya akan mendesain dan mengunggahnya di sosial media saya.

Pada halaman ini juga terdapat informasi mengenai kurir mulai dari nama, nomor polisi, dan juga kendaraan yang dipakai kurir yang bisa membantu jika user ingin melaporkan jika terjadi kerusakan atau hilangnya barang ke pihak JNE.

Jika diperhatikan bagian informasi tanggal dan waktu berubah menjadi tanggal dan sampai. Kenapa? Karena untuk halaman ini pada bagian tersebut merupakan informasi mengenai tanggal saat kurir menuju tujuan dan perkiraan waktu sampainya kurir ke tujuan.

Shipment Arrive

Halaman ini merupakan halaman yang sama dengan halaman yang sebelumnya namun akan terdapat bottom sheet yang berisikan informasi kalau paket yang dikirimkan telah sampai.

Pada halaman ini juga terdapat informasi penerima, tanggal, waktu sampainya paket dan juga tangan tangan penerima dan kurir.

Karena saya sering melihat pembeli memberikan screen shoot halaman JNE nya kepada Penjual untuk menginformasikan kalau barangnya telah sampai sebagai testimoni, saya memikirkan 2 fitur yang berkemungkinan bisa membantu user dalam flow ini.

Jadi di halaman ini saya memberikan fitur tambahan yaitu: Save, seperti layaknya screen shoot, fitur ini digunakan untuk menyimpan halaman ini menjadi gambar.

Dan juga terdapat fitur share untuk memudahkan user untuk membagi informasi mengenai sampainya paket.

Fitur share dan save ini bisa digunakan user untuk memberi informasi ke penjual kalau barang yang dibeli telah sampai tanpa harus screen shoot dan di upload ke halaman chat dengan penjual.

Akhir dari Studi kasus

Desain ini dibuat based on data. Sesuai hasil research yang saya harapkan bisa memenuhi kebutuhan user.

Sekian studi kasus dari saya, semoga di studi kasus ini bisa menginspirasi orang-orang yang ingin membuat studi kasus dan juga untuk menambah ilmu dan pengalaman saya dalam membuat studi kasus.

Update

8 Juni 2019

Saat saya melakukan testing kepada teman saya sehari setelah studi kasus ini diunggah, saya menemukan masalah baru dalam desain ini, yaitu maksud dari tanggal dan waktu pada halaman Detail info, Track , Live Track, dan Shipment Arrive.

Jadi dalam penulisan tanggal dan waktu, teman saya mengira kalau bagian info ini menunjukan tanggal dan waktu hari dimana user membuka aplikasi tersebut.

Jadi saya memutuskan untuk mengubah copy pada halaman detail info dan track info menjadi: Dikirim dan Waktu.

Karena sebenarnya bagian info ini diperuntukan untuk menunjukan info kapan dikirimnya paket tersebut.

Dan untuk halaman Live Tracking dan Shipmet Arrive, diubah menjadi Sampai dan Waktu.

Karena bagian info pada halaman ini diperuntukan untuk menunjukan informasi kapan sampainya paket tersebut.

Ingin bertanya atau mempunyai masukan serta tambahan terkait tulisan ini?

Silahkan ketik pertanyaan, masukan dan tambahan tersebut di Bagian Response di bawah.

Terima kasih telah meluangkan waktu untuk membaca! 😊

Dribbble, LinkedIn, Instagram.

--

--

Rhasyab

Product Designer @ Tamara تمارا • Building chamjo.design • Latest Case Study: bit.ly/TokTing