User-Centered Design (UCD) for Dailypedia - Daily Life Productivity Web

Information

Project Name:

Dailypedia - Daily Life Productivity Web

Category:

UX Research

Client:

N/A

Team:

Khairul Imam, Muhammad A. Ghifari, Cornelius P. Situmorang

Date:

November 2020

Skills:

UX Research, User Centered Design, UI Design, Prototyping



Introduction

Menjadi pribadi yang produktif memiliki banyak kelebihan, di antaranya dapat menjaga pikiran selalu aktif, pikiran yang selalu aktif dapat menguatkan sel-sel otak yang dapat mengembangkan kemampuan otak. Otak yang selalu berkembang mempermudah seorang pribadi untuk berkembang menjadi pribadi yang lebih baik lagi. Dengan menjadi pribadi yang lebih baik, seseorang menjadi lebih mudah untuk menjaga kestabilan suasana hatinya, karena suasana hati dan produktivitas sangat berkaitan erat. Suasana hati yang bagus dapat mengarah pada produktivitas, produktivitas yang baik dapat mencegah prokrastinasi, yang nantinya juga dapat mencegah adanya penyakit mental seperti kecemasan berlebih (anxiety disorder) dan juga depresi.

Sejumlah 74% dari 23 responden kami (16 tahun ke atas) menyatakan masih merasa kurang produktif selama pandemi Covid-19. Mereka menghabiskan waktunya di rumah dengan rebahan, bermain gim, menonton film, dan scrolling media sosial. Oleh karena kami membuat situs web bernama DailyPedia. DailyPedia adalah sebuah situs web berisi kumpulan rekomendasi film, buku, dan video dan dapat langsung dinikmati secara gratis dengan disesuaikan berdasarkan suasana hati dan ketertarikan setiap penggunanya sehingga dapat menggerakkan mereka untuk bisa lebih produktif.

Tujuan

Manfaat yang akan didapat dari web kami ialah:

  1. Menginspirasi para anak muda yang mengakses web kami
  2. Membangkitkan semangat untuk kembali produktif
  3. Menjadi suatu sarana produktif untuk menghibur diri saat sedang malas
Keunggulan

Kelebihan dan keunikan dari situs web “DailyPedia” adalah sebagai berikut.

  1. Situs memiliki tema yang dapat diatur berdasarkan suasana hati pengguna perharinya.
  2. Rekomendasi yang diatur berdasarkan gabungan suasana hati dan juga interest dari pengguna.
  3. Memiliki fitur reminder untuk melanjutkan aktivitas terakhir dari pengguna melalui surel.
  4. Memanfaatkan cookies yang jika diaktifkan akan mendapatkan informasi lebih dalam dan personal pada masing-masing pengguna.
  5. Pengguna dapat menikmati konten-konten yang menghibur sekaligus dapat menambah ilmu sehingga menjadi produktif.
Metodologi Pengembangan

Kami menerapkan Metode User Centered Design (UCD) dan Prototyping dalam menyiapkan dan merencanakan situs web dalam proses praproduksi kali ini. Metode ini terbentuk menjadi berikut:

test-case
Target Pengguna

Sasaran target pengguna situs web kami adalah pemuda/pemudi (terutama Gen-Z dan Gen Millenial) yang memiliki waktu luang atau sedang merasa stress (burnout syndrome) dengan pekerjaannya namun ingin merasa produktif kembali dengan cara yang lebih menyenangkan (fun).

test-case
Platform yang Digunakan

Situs web Dailypedia dapat dibuka dalam perangkat manapun seperti browser desktop, browser smartphone, dan browser tablet selama browser tersebut mendukung HTML5 seperti Chrome, Firefox, dan Edge.

Batasan Aplikasi

Karena aplikasi yang kami buat berbasis web, maka situs web Dailypedia ini memiliki batasan-batasan sebagai berikut:

  1. Membutuhkan koneksi internet untuk mengakses web, serta notifikasi
  2. Membutuhkan cookies untuk menyimpan data dalam web
  3. Direkomendasikan menggunakan browser seperti Google Chrome, firefox, dan Edge.
Analisis Desain

Kami membuat situs web berdasarkan analisis yang kami dapatkan selama masa Praproduksi. Analisis kami mencakup: Permasalahan utama yang muncul, batasan sistem dan perangkat, dan hasil evaluasi kami terhadap pandangan pengguna dan ide utama kami.

Hal ini kami lakukan dengan tujuan mencapai User Experience terbaik untuk pengguna, tentunya tanpa mengorbankan User Interface yang ada, kami juga berusaha untuk lebih mengefisienkan sekaligus mengefektifkan pengaplikasian situs web kami sehingga kami dapat memanjakan mata pengguna serta memberikan efek psikologis agar mood pengguna dapat kembali baik.

Oleh karena itu, kami memberikan pengguna kebebasan untuk menentukan tema situs web sesuai mood-nya hari itu di setiap kali pengguna mengunjungi situs web kami dengan menggunakan warna-warna khusus, seperti:

  • Untuk suasana hati netral (neutral), warna dasar yang dipakai adalah biru muda karena biru diyakini dapat memberikan rasa kedamaian, intelektual, dan juga dapat membangkitkan produktivitas.
  • Untuk suasana hati yang senang (happy), warna dasar yang dipakai adalah kuning karena warna tersebut menggambarkan kegembiraan dan juga dapat membangkitkan semangat.
  • Untuk suasana hati yang sedang jatuh cinta (love), warna dasar yang dipakai adalah merah muda karena warna tersebut identik dengan cinta sehingga dapat memberikan kesan lembut.
  • Untuk suasana yang sedang murung (moody), warna dasar yang dipakai adalah hijau karena warna hijau dapat menenangkan mata dan juga memberikan kenyamanan bagi yang melihat.
  • Untuk suasana hati yang sedang sedih, warna dasar yang dipakai adalah gabungan warna biru muda dan merah muda agar didapat warna yang halus untuk dilihat.
Metode Pencapaian Tujuan

Feedback dari pengguna lalu kami adaptasi ke prototipe dengan perubahan sebagai berikut:

  1. List Schedule ditambah dengan keterangan gambar karena pengguna akan lebih mudah mengidentifikasi judul konten melalui gambar.
test-case
  1. Menambahkan fitur Reminder melalui email pengguna agar pengguna tetap mengingat aktivitas terakhirnya dan menambah interaksi (hubungan) dengan pengguna.
test-case
Evaluasi Desain

Hasil desain web diujicobakan kembali kepada target pengguna dengan pertanyaan evaluatif berskala terhadap 23 orang seperti berikut.

test-case test-case test-case test-case
Skenario Penggunaan

Berikut skenario penggunaan situs web DailyPedia:

test-case

Sabrina Benita adalah seorang mahasiswi di salah satu perguruan tinggi di Indonesia. Ia terkadang memiliki banyak waktu senggang saat kuliah daring selama pandemi, namun masih terkendala pada suasana hati yang terkadang baik dan buruk. Selain itu, ia harus melawan kemalasannya dalam beraktivitas.

Sabrina berkeinginan untuk melakukan banyak hal produktif, akan tetapi ia bingung untuk memulai kegiatan produktifnya, sehingga dia mulai menggunakan situs web DailyPedia sebagai solusinya.

Untuk memulai, Sabrina direkomendasikan untuk menentukan suasana hatinya saat mengakses situs DailyPedia. Pilihan dari suasana hati yang dipilih akan menentukan tema warna dari situs DailyPedia, warna yang kemudian menjadi tema utama diharapkan dapat memberi semangat kepada Sabrina ke arah yang lebih positif.

Kemudian, Sabrina diharuskan untuk melakukan pendaftaran melalui tombol Match Now untuk menyesuaikan minat/ketertarikan terhadap genre buku, video, maupun kerajinan yang ada. Pendaftaran ini bertujuan mendapatkan data Sabrina yang akan digunakan pada fitur reminder, berita terbaru, dan juga daftar rekomendasi yang akan muncul jika Sabrina mengaktifkan cookies pada situs web.

Pada halaman Home, Sabrina akan mendapatkan informasi umum mengenai DailyPedia. Informasi tersebut berupa pengertian, manfaat, dan instruksi singkat dari fitur web.

Sabrina dapat memulai kegiatan produktifnya saat mengakses Library. Pada bagian tersebut, ia bebas untuk mengakses konten manapun yang sedang dibutuhkan untuk mengisi waktu luangnya. Saat Sabrina menekan salah satu konten, maka ia akan diarahkan ke laman detail dari konten tersebut. Pada laman detail video dan buku, terdapat detail dari konten tersebut seperti author, synopsis, review pengguna lainnya, dan juga Sabrina dapat langsung menikmati video maupun buku secara langsung di dalam laman tersebut. Selain itu, terdapat juga laman kerajinan yang berisi langkah-langkah yang lengkap dan menarik untuk diikuti.

Halaman Schedule berisi kegiatan terakhir Sabrina di situs DailyPedia yang dapat dilanjutkan kembali. Kemudian, terdapat laman profile berisi pengaturan akun dan juga daftar kegiatan yang telah diselesaikan.

Video Teaser
UI Interface
test-case test-case test-case test-case
UI Element
test-case test-case