UI UX Case Study: Kompas ePaper Interaction Redesign
Kompas sebagai media jurnalistik nasional sejak 1965 telah membantu masyarakat menerima informasi secara cepat dan mudah melalui media yang diterbitkannya. Kompas sendiri telah menerima berbagai penghargaan sebagai wujud kinerjanya di bidang media dan informasi. Kompas telah menyajikan informasi dalam berbagai media seperti koran fisik, berita digital, hingga inovasi koran digital yang dikenal sebagai ePaper Kompas.
EPaper kompas hadir sebagai solusi masyarakat dalam membaca terbitan koran fisik dalam bentuk website dan mobile. Selain itu, ePaper Kompas menjadi salah satu tantangan Kompas dalam menyajikan informasi yang ramah dibaca oleh pengguna dengan bentuk yang baru, tanpa mengubah esensi koran fisik itu sendiri. Kompas meminta saya melakukan riset terhadap desain interaksi dan interface mobile website ePaper Kompas untuk pengalaman membaca yang lebih baik. Saya juga memperluas scope riset dengan meredesain komponen dan visual website.
Brief
Objektif pada study case ini yaitu perancangan interaksi yang efektif dan efisien pada pengelaman membaca, sehingga user dapat merasa nyaman dan terus menggunakan produk ePaper Kompas. Adapun matriks yang diukur yaitu user engagement atau average time on page.
Metode
Case study ini menggunakan metode desain proses Double Diamond yang dikembangkan oleh British Design Council yang berdasarkan pada siklus divergen dan konvergensi. Output yang dihasilkan dari metode ini adalah sebuah rancangan desain prototype aplikasi yang siap diimplementasikan. Pada proses nya dibagi menjadi 4 bagian, yaitu Discover, Define, Develop dan Deliver.
- Discover: tahap pertama yang dilakukan dalam metode ini adalah mengumpulkan semua informasi yang dapat menjawab semua kebutuhan yang diperlukan untuk mencari sudut pandang yang memiliki nilai lebih.
- Define: tahap selanjutnya membahas semua informasi yang telah dikumpulkan pada tahap discover yang nantinya akan ditentukan dan dijadikan sebuah permasalahan yang akan dicarikan solusinya.
- Develop: kemudian adalah tahap untuk menemukan sejumlah solusi yang tepat untuk permasalahan yang didapatkan pada tahap define.
- Deliver: lalu pada tahap terakhir adalah tahap pembuatan dan pengujian dari solusi yang telah didapatkan dari tahap develop. Tahap ini berlangsung secara iterasi atau berulang hingga dirasa solusi yang telah dibuat sudah sesuai.
Discover
Pada tahap ini saya melakukan riset kepada potential user yang kemungkinan besar merupakan seorang pembaca berita, baik secara online melalui website, aplikasi khusus, maupun koran fisik. Saya mendata daftar nama potential user terlebih dahulu, untuk kemudian saya ajak wawancara untuk mendapatkan data berupa profil user tersebut.
User Research
Setelah melakukan wawancara singkat terhadap 7 potential user, saya menemukan 5 diantaranya merupakan pembaca berita, baik secara mobile ataupun melalui koran fisik. Dari hasil wawancara ini juga saya ingin mengetahui apa saja yang menjadi point penting selama membaca berita melalui mobile, point-point tersebut diantaranya:
- Topik berita yang disajikan beragam pada satu terbitan koran
- Ingin membaca sub topik pada ePaper dengan mudah
- Rekomendasi topik berita membantu ketika user ingin membaca tanpa harus memilih topik sendiri di waktu senggang
- Format ePaper berupa pdf mengharuskan user melakukan zoom in/out untuk membaca sub topik didalamnya.
Proto-persona
Dari hasil wawancara terhadap 5 user pembaca berita, saya mendapati beberapa informasi yang dapat saya jadikan sebagai acuan pembuatan Proto-persona ePaper Kompas. Proto-persona merupakan miniature user persona sebagai representative user yang dapat mewakili beberapa pengguna dalam jumlah besar, serta dibuat berdasarkan analisis untuk membantu menemukan solusi masalah pada pembuatan suatu produk. Berikut adalah 2 proto-persona yang sudah dibuat beserta informasi yang berkaitan dengan user yang telah diwawancarai:
Define
The Problem Statement
Pada tahap ini saya mengambil satu masalah pokok yang diperoleh dari hasil wawancara, kemudian dilanjutkan dengan menentukan bagaimana solusi yang tepat dan efisien untuk permasalahahan yang ingin diselesaikan. Adapun masalah pokok tersebut yaitu:
User yang memiliki aktivitas padat ingin menyempatkan waktu membaca berita yang sesuai dengan minat mereka dan memiliki interaksi serta format yang mudah dibaca.
How Might We
Setalah mendefinisikan masalah pokok dari case study ini, kemudian saya melakukan metode pertanyaan How might we atau “bagaimana kita dapat” yang merupakan bagian dari Human-Centered Design dan dapat saya digunakan untuk mendapatkan solusi-solusi yang kreatif dari masalah pokok yang telah ditentukan.
- Bagaimana mungkin kita membuat user membaca sub topik pada ePaper dengan mudah.
- Bagaimana mungkin kita menyediakan format ePaper yang memungkinkan user untuk membaca sub topik didalamnya tanpa perlu melakukan zoom in/out.
- Bagaimana mungkin kita merekomendasikan topik berita yang user inginkan.
Hypothesis
Hipotesis yang saya buat berdasarkan pertanyaan-pertanyaan diatas yaitu dengan merekomendasikan topik dan sub topik berita yang user inginkan dapat mempercepat user menemukan topik yang ingin mereka baca serta dapat memudahkan user mengakses topik pada ePaper tanpa perlu melakukan zoom in/out.
Develop
Ideation Solution
Struktur koran yang memiliki sub topik didalamnya dan diterbitkan setiap hari menjadi sajian tersendiri bagi masyarakat. Menyajikannya dalam bentuk ePaper tentu perlu dilakukan penyesuaian lebih lanjut, mengingat interaksi user terhadap koran fisik dan berita mobile sangat berbeda.
Melihat permasalahan yang telah didefinisikan sebelumnya, hampir seluruhnya sudah teratasi oleh layanan mobile dan website berita dalam bentuk artikel, dimana salah satunya dapat dibaca melalui laman Kompas.id. Disana user dapat membaca topik berita sesuai dengan kategori, dan dengan interaksi scrolling yang mudah. Namun tantangan pada study case ini yaitu bagaimana produk ePaper atau koran digital dapat memiliki interaksi yang seramah berita dalam bentuk artikel dan dapat menyelesaikan pokok masalah tanpa menghilangkan esensi koran itu sendiri.
Untuk itu, berikut diantaranya solusi yang dapat menyelesaikan masalah-masalah yang telah didefinisikan sebelumnya:
- Menampilkan sub topik pada ePaper dan memungkinkan user memilih topik yang mereka inginkan.
- Menampilkan rekomendasi sub topik pada ePaper berdasarkan keinginan user.
- Menampilkan konten sub topik yang dipilih dalam bentuk artikel sehingga menghindari interaksi zoom in/out oleh user terhadap paper.
Deliver
User flow dan Low Fidelity
Pada proses ini saya menyusun user flow dan membuat sebuah kerangka desain interface untuk menganalisis apakah desain yang telah dibuat sudah tepat dengan solusi yang ditawarkan, serta agar dapat memudahkan saya dalam proses iterasi dan revisi pada desain.
UI Component dan High fidelity
Setelah mendapatkan desain low fidelity yang sesuai, maka proses dilanjut dengan mendesain versi High fidelity beserta UI komponen dan visual didalamnya. Pada proses ini saya menggunakan software Adobe Xd untuk mendesain emelen visual dan komponen UI yang dibutuhkan.
Setelah berlangganan dan saat pertamakali hendak Membaca ePaper, user akan diarahkan ke halaman onboarding untuk melakukan user profiling terkait topik yang di minati. Pada halaman ePaper reader, ditampilkan konten ePaper yang hendak dibaca dengan top bar berisi edisi ePaper dan menu, serta bottom bar yang berisi rekomendasi sub heading/topik beserta list lengkapnya.
Tab Rekomendasi akan memunculkan sub-heading card yang merupakan rekomendasi bacaan untuk user pada terbitan ePaper yang dipilih. Setelah memilih sub-heading yang diinginkan, akan tampil sorotan berwarna hijau beserta CTA “Baca” pada konten yang dimaksud. Setelah memilih tombol “Baca”, user dapat Membaca konten sub-heading tersebut dengan mudah melalui po-up khusus. Ketika user hendak selesai Membaca, user dapat menekan CTA “Selesai”, dan kembali pada tampilan sebelumnya.
Prototype
Pada tahap prototyping, saya menghubungkan setiap komponen dan screen sesuai dengan flow interaksi saat Membaca ePaper, dan menerapkan micro interaction animation di beberapa UI komponen.
Anda dapat mengakses interaktif Adobe Xd prototypenya disini
Future Research
Berdasarkan penelitian yang telah saya lakukan terhadap study case mobile website ePaper Kompas, solusi interaksi berupa rekomendasi sub topik/heading pada ePaper dapat mempersingkat waktu user mengakses konten yang ingin dibaca pada sebuah ePaper. Pengembangan yang ingin saya lakukan jika memiliki waktu lebih banyak yaitu membuat desain interaksi dengan micro interaction animation dan melakukan testing kepada lebih banyak user agar dapat mengetahui tingkat keakuratan yang diperoleh desain saya terhadap penyelesaian pokok masalah pada study case ini.
Terimakasih Kompas atas kesempatannya, juga responden yang telah terlibat selama project ini berlangsung. Silahkan teman teman jika ada diskusi, saran atau masukan bisa tulis di komentar ya. Terimakasih.
Silahkan mampir di Behance saya untuk melihat detail visual project ini.
