Final Report Weboo Project - Perancangan UX - PERMATA SAKTI 2020

Page 1


OUR TEAM

Nadifah Adya Iham

Nandha Mustika Sari

UX Researcher

UI Desainer

M. Firzon Ainur Roziqin

Khafit Badrus Zaman

UI Desainer

Developer

Mahisha Mutharrif Laila

Kartika Wahyuningsih

Public Relation

UX Researcher


PENDAHULUAN A. Latar Belakang Era revolusi industri 4.0 ini, berpengaruh besar kepada kebiasaan perilaku pemuda dalam belajar dan melakukan aktivitas. Karena pemuda lebih cenderung dekat dan menggunakan gadgetnya untuk melakukan sesuatu yang disukainya atau memanfaat teknologi demi kemudahan aktivitasnya sehari-hari. Dan mayoritas dari mereka telah menyentuh teknologi bernama internet di setiap harinya. Hal ini akan sangat terkait dengan masalah produktivitas relatif rendah. Di tahun 2020 ini, Indonesia sedang dilanda pandemi COVID-19. Selama pandemi, jumlah konsumsi internet di Indonesia meningkat secara signifikan sebanyak 40%, dan menurut survei dari media berita, yang mendominasi penggunaan internet ini adalah Generasi Z kelahiran 1995 – 2010 yakni pada rentang usia 10 – 25 tahun. Banyaknya webinar atau web seminar secara online juga meningkat drastis karena terbatasnya ruang dan waktu untuk bertemu. Semua orang dituntut untuk dapat beradaptasi dengan teknologi internet dan aplikasi baru yang dapat memudahkan event webinar online tersebut. Ini merupakan fenomena baru dimana masyarakat memiliki salah satu kebiasaan baru yakni melakukan kegiatan edukasi melalui webinar di berbagai platform aplikasi yang disediakan seperti zoom, google meet, live instagram dan live youtube. Hal tersebut membawa pada inovasi pembelajaran baru, dimana setiap orang dapat mendapatkan ilmu secara global tanpa ada batas tempat, waktu, dan bidang tertentu. Untuk itu webinar merupakan salah satu metode edukasi yang paling inovatif dan sangat berdampak positif dalam memberikan ilmu dan pengalaman dari seseorang dengan jangkauan masyarakat yang luas dan tidak terbatas ruang dan waktu.

B. Definisi Masalah 1. Saya percaya bahwa banyaknya webinar secara online meningkat drastis karena terbatasnya ruang untuk bertemu, namun platfrom khususnya untuk proses publikasi acara webinar belum ada dan belum tersistem dengan baik dan melakukan pendekatan terhadap peserta webinarnya. Padahal webinar merupakan salah satu metode edukasi paling inovatif dan mudah untuk didapatakan oleh segala lapisan masyarakat. 2. Saya percaya bahwa jumlah konsumsi internet di Indonesia meningkat secara signifikan sebanyak 40% dengan mayoritas adalah Generasi Z namun konsumsi positif terkait pengetahuan atau hal terkait konten edukasi positif masih rendah.


3. Saya percaya bahwa sesuai dengan perilaku atau habit masyarakat terutama pemuda yang sering menggunakan waktunya untuk mengakses internet terutama social media seperti Youtube yang mengandung konten video. Maka diperlukan inovasi agar tingkat konsumsi pengetahuan juga berkembang melalui metode atau cara yang dekat dengan mereka atau yang mereka sukai.

C. Profil Tim No

Peran – Nama

Kelebihan •

1

2

UX Researcher – Kartika Wahyuningsih

Development –

Menguasai html, css, php, mysql untuk pembuatan website

Kurang bisa berkomunikasi dengan baik

Merasa kesulitan dalam mengembangkan kemampuan

Dapat berkomunikasi dengan baik.

Kurang kritis dalam menanggapi suatu hal.

Ketika mendapatkan pertanyaan di luar materi kurang dapat mengolah kata - kata dengan baik.

Kreativitas dalam membuat desain kurang baik.

Kurang bisa berinisiatif dalam tim

Khafit Badrus Zaman

Mahisha Mutharrif L

Dapat melakukan negosiasi yang baik.

Design –

Menguasai tool pada Corel, Photoshop, dan Just in Mind

M. Firzon Ainur R •

5

UX Researcher –

Kurang berpikir kritis terhadap problem yang ada.

Suka dalam memecahkan masalah

PR –

4

3

Dapat mengerti dan memahami apa saja kebutuhan pengguna.

Kekurangan

Nadifah Adya Ilham •

Team Management Good at doing research by observation and analysis Tools : Adobe XD, Figma, Miro

Overthinking

Easy to concluding something

Don’t have good sense about color


Design – 6

Nandha Mustika Sari

Menguasai Adobe XD dan Photoshop

Membutuhkan waktu dalam memahami permasalahan

Kesulitan dalam menemukan sebuah ide

RENCANA PENGEMBANGAN APLIKASI D. Metode yang digunakan

1. Pada tahap pertama yaitu empathize, dengan melakukan personas, job stories, usability testing. Pada persona bertujuan untuk merepresentasikan tujuan yang didasarkan pada kebutuhan sekelompok user saat menggunakan produk. Job stories yakni menjelaskan sistem dapat bekerja untuk apa saja hingga awal sampai akhir dan usability testing digunakan untuk mengevaluasi user experience berdasarkan kebutuhan user 2. Kedua define, yaitu menjelaskan terkait identify needs dan prioritize needs 3. Ketiga ideate, yaitu membuat task flows dan Lo-Fi Sketches yang diimplementasikan dari kebutuhan user menjadi tampilan visual sebelum prototype 4. Keempat prototype, yaitu membuat Hi-Fi Mockups, clickable dan prototype. Pada prototype, dibuat dengan High Fidelity dan memiliki fungsi click antara masing-masing fitur 5. Terakhir yaitu validate, melakukan test prototype menggunakan evaluasi heuristic untuk mengetahui apakah sistem tersebut memenuhi kriteria yang dibutuhkan user


E. Rencana Kerja

F. Rencana Pembagian Tugas



IDEA GENERATION G. User Persona

H. Emphaty Map

Insight Statement • User merasa salah satu kendala bersar dalam mengikuti webinar adalah jaringan yang tidak stabil • User merasa sangat sulit mencari webinar yang sesuai karena harus mencari diberbagai platfrom social media dan situs pencarian • User merasa proses pendaftaran terlalu banyak data, padahal tidak semua dibutuhkan


• Kekurangan webinar dari segi stakeholder adalah interaksi peserta yang kurang dan management waktu yang sulit How Might We Bagaimana kita dapat mendesain sebuah platfrom untuk membantu para user agar dapat menemukan dan mengikuti webinar dengan mudah dan nyaman, sehingga dapat memberikan solusi dengan baik terhadap pain problem dari user?

DESAIN PRODUK I. User Journey Map


J. Storyboard



K. Information Architecture

K. Wireframe with User Flow




MINIMUM VIABLE PRODUK


Landing page merupakan halaman awal dari aplikasi Weboo. Pada halaman ini, terdapat tombol mulai yang harus diklik pengguna sehingga dapat menggunakan aplikasi. Terdapat lima boarding page yang berisi fungsi dan manfaat dari aplikasi Weboo. Pengguna hanya perlu menggeser layar untuk menyelesaikan boarding page dan melanjutkan ke halaman lain.

Pada halaman login, pengguna harus memasukan username dan password agar dapat menggunakan aplikasi. Namun pengguna juga dapat login menggunakan akun google atau facebook. Setelah masuk, akan menuju halaman kode OTP. Halaman ini menampilkan kotak input kode OTP. Kode tersebut dikirim melalui email. Jika kode belum didapat, pengguna dapat mengeklik tombol kirim ulang, agar sistem mengirimkan kode OTP baru.


Halaman menu utama berisisi ikon forum diskusi, slide informasi, kategori webinar yang dapat dicari, filter webinar, dan daftar poster webinar yang terdaftar. Ketika berada pada halaman menu utama, maka ikon rumah pada menu bar akan berubah warna. Halaman forum diskusi dapat diakses dengan mengeklik ikon pesan di bagian atas halaman menu utama. Dalam forum diskusi, pengguna dapat mengirim pesan kepada penyelengara webinar dan peserta webinar.

Halaman pencarian berisi daftar poster webinar yang terdaftar di weboo. Pengguna dapat mencari dengan menulis kata kunci di kotak pencarian. Ketika berada pada halaman menu pencarian, maka ikon lup pada menu bar akan berubah warna. Ketika suatu poster hasil pencarian diklik, maka halaman akan berpindah ke halaman detail seminar. Halaman detail seminar berisi poster, keterangan seminar, ikon bookmark, dan ikon garis hosrizontal. Apabila ikon garis horizontal diklik, maka akan muncul detail seminar berupa topik, deskripsi, jadwal pelaksanaan, informasi, penyelenggara dan tombol daftar.


Pop up konfirmasi akan muncul ketika pengguna mengeklik tombol daftar pada detail seminar. Jika tombol “Ya” diklik maka halaman akan perbindah ke pop up pendaftaran. Jika tombol “Tidak” diklik maka akan kembali ke detail seminar. Pop up pendaftaran hanya akan muncul sekali. Bila sudah pernah mengisi, setelah pop up konfirmasi akan langsung menuju halaman pembayaran. Pop up pendaftaran berisi nama, jenis kelamin, status, asal instansi, domisili dan poto profil. Pop up pendaftaran dapat diisi dan diubah di menu profil.

Pada halaman checkout pembayaran, pengguna dapat membeli lebih dari satu tiket. Ditampilkan juga harga per tiket dan total biaya yang harus dibayar. Terdapat tombol pilih metode dan batal, tombol “Pilih Metode” akan memindah halaman ini ke halaman metode pembayaran. Sedangkan tombol “Batal”akan membatalkan transaksi dan mengembalikan halaman ke detail seminar. Pada halaman metode pembayaran akan tampil aplikasi dompet elektronik yang dapat digunakan. Selain itu jika menu “Metode Lainnya” diklik, maka akan muncul pilihan transaksi melalui bank. Terdapat button “Pembayaran” yang berfungsi untuk melakukan proses pembayaran. Setelah pembayaran selesai, maka pop up bukti pembayaran akan tampil. Tombol “Batal” berfungsi seperti pada halaman checkout webinar.


Halaman menu live berisi daftar webinar gratis yang sedang berlangsung. Terdapat ikon bookmark yang digunakan untuk menyimpan webinar yang sedang live. Apabila poster atau judul webinar diklik, maka akan muncul detail live webinar. Setelah melihat detail, dan pengguna tertarik, maka pengguna dapat memasuki live webinar dan melakukan absen. Jika tombol “Batal” diklik, maka halaman akan kembali ke halaman menu live. Bila tombol “Hadir” diklik, halaman akan berpindah ke halaman pelaksanaan webinar.

Halaman pelaksanaan webinar berisi video yang menampilkan pemateri yang melakukan presentasi. Terdapat ikon kamera untuk menyalakan dan mematikan kamera, juga ikon mikrofon untuk mematikan dan menyalakan mikrofon dari pengguna. Ketika halaman pelaksanaan webinar di geser ke kiri, halaman Q&A akan muncul. Pada halaman Q&A berisis ikon “Chat” untuk berkomunikasi atau mengirim pesan dengan peserta dan penyelenggara. Terdapat juga ikon “Pertanyaan” untuk mengirim pesan pertanyaan kepada pemateri. Ketika halaman pelaksanaan webinar digeser ke kanan, maka akan tampil daftar peserta, yang berisi daftar pemateri dan peserta. Pada daftar peserta, terdapat ikon garis horizontal. Bila ikon tersebut diklik, maka akan muncul halaman feedback form. Pada halaman feedback form, peserta dapat mengirimkan masukan, berupa kritik dan saran pada penyelenggara.


Halaman menu profil berisis data diri dari pengguna, seperti poto profil, nama, gender, status, asal instansi, dan alamat. Selain itu jugta terdapat menu kalender, histori, sertifikat, materi, disimpan, pengaturan dan logout. Setiap menu akan menuju ke halaman masing-masing, sedangkan menu logout akan memindahkan halaman ke halaman login. Menu kalender berisi jadwal webinar yang diikuti. Tanggal pelaksanaan webinar akan diberi tanda unik, lalu daftar webinar terdekat akan muncul dibawah kalender. Menu histori berisi daftar webinar yang telah diikuti.

Menu sertifikat berisi daftar sertifikat yang diperoleh dari mengikuti webinar yang memiliki fasilitas sertifikat. Pada daftar tersebut, ditampilkan gambar setifikat, judul webinar, dan penyelenggara webinar. Ketika salah satu data (poster, judul) dari daftar diklik, maka akan berpindah ke halaman detail sertifikat. Pada halaman detail sertifikat berisi gambar sertifikat, judul, deskripsi singkat mengenai webinar, penyelenggara webinar, dan ikon download. Ikon downlod digunakan untuk mengunduh file sertifikat.


Menu materi webinar berisi daftar materi yang diberikan oleh penyelenggara webinar yang diikuti. Pada daftar tmateri ditampilkan poster, judul, dan penyelenggara webinar, juga format file materi. Ketika salah satu baris dari daftar diklik, maka akan muncul halaman detail materi webinar. Dalam halaman detail materi, pengguna dapat membuka file materi. Di halaman tersebut, terdapat keterangan seperti judul, deskripsi singkat, dan penyelnggara webinar.

Menu save webinar berisi daftar webinar yang telah disimpan atau diberi tanda bookmark. Pada halaman menu ini, ditampilkan poster dan judul dari webinar. Ketika salah satu poster atau judul diklik, maka halaman akan berpindah ke halaman detail save webinar. Halaman detail save webinar berisi informasi mengenai webinar yang telah disimpan, seperti poster, judul, deskripsi, dan penyelenggara webinar.

Halaman notifikasi berisi daftar informasi terkait pemberitahuan, seperti sertifikat telah dikirim, ajakan mengikuti webinar, dan lain-lain. Salah satu notifikasi ajakan webinar adalah pada gambar ikut webinar. Pada halaman tersebut, terdapat poster, judul, deskripsi singkat, dan penyelenggara webinar. Terdapat dua tombol, “Gabung” dan “Tidak”, bila tombol “Gabung” diklik, maka halaman akan berpindah ke halaman pembayaran. Sedangkan tombol “Tidak” akan menghapus notifikasi ini dari daftar notifikasi.


PENGUJIAN PRODUK L. Heuristic Evaluation Dari evaluasi heuristic yang telah dilakukan diinternal tim, maka berikut adalah problem desain yang diprioritaskan untuk diperbaiki kedepannya, Savery Rating Tingkat 4, Usability Catastrophic, harus dilakukan perbaikan sebelum produk tersebut rilis, yakni: No

Task

Isu

Rekomendasi

Ketika user melakukan login, kemudian jika ada kesalahan pengguna tidak mengetahui dikarenakan tidak ada fitur alert pada data yang salah ketika menginputkan

Dapat menambahkan alert untuk pada sistem : khususunya jika pengguna akan login kemudian terjadi kesalahan pada password (misalnya) karakter kurang, pengguna dapat memperbaiki atau menambahkannya Dapat menambahkan tutorial petunjuk penggunaan aplikasi di saat memasuki halaman utama atau diadakannya fitur help sehingga pengguna dapat dengan mudah mengetahui cara penggunaan aplikasi ini Meletakan form jumlah pesanan pada halaman pertama sebelum form pengisian identitas

1

Mengakses menu login

2

Mengakses halaman utama >> story board

Ketika user memasuki storyboard, tidak ada petunjuk atau pemandu kegiatan apa selanjutnya yang harus user lakukan sesuai dengan keinginan user

3

Mengakses menu pembayaran >> booking webinar

4

Mengakses menu detail pembayaran

Pemesanan jumlah booking berada setelah mengisi formulir. Hal ini akan bermasalah ketika si pendaftar memesan lebih dari 1 bookingan karena seharusnya 1 tiket 1 form identitas. Sehingga misal ada 2 tiket maka terdapat 2 data peserta yang dimasukan, bukan hanya 1. Ketika user ingin melakukan pembayaran identifikasi satuan nominal yang perlu dibayarkan seperti 10.000 rupiah

5

Mengakses menu dari satu ke yang lainnya

6

Menu list live yang dapat diikuti secara realtime

Ketika user ingin pindah menu maka harus back satu persatu atau beberapa ada yang belum terhubung

Dapat menambahkan keterangan nominal pada saat checkout pembayaran Melengkapi flow menu satu sama lainnya

Pada menu live, tidak tampak adanya urgensi untuk memilih Memperbaiki desain halaman list mengikuti suatu webinar. webinar supaya lebih menarik Sehingga kurang menarik perhatian user untuk ikut serta atau menyimpan live webinar tersebut. Padahal hal tersebut merupakan salah satu keunggulan dari sistem


7

Icon info pada forum diskusi

Pada menu forum diskusi terhadap icon info. Namun belum berfungsi padahal hal tersebut dibutuhkan untuk memberikan bantuan infromasi terhadap user tentang deskripsi dan info singkat terkait forum tersebut

Menambahkan page terkait info forum diskusi

8

Mengakses pada menu pendaftaran > pembayaran

Pada menu forum diskusi terhadap icon info. Namun belum berfungsi padahal hal tersebut dibutuhkan untuk memberikan bantuan infromasi terhadap user tentang deskripsi dan info singkat terkait forum tersebut

Menambahkan page terkait info forum diskusi

DESIGN REFINEMENT

Alert pada menu login Visibility if system state

Menu diskusi > diskusi

Mengakses halaman Utama >> StoryBoard Help and Documentation

Mengakses pada menu pendaftaran > pembayaran

Mengakses menu pembayaran Match Between System and the Real World

Menu list live yang dapat diikuti secara realtime Consistency and Standards


Before

After

Before

After


Before

After

M. Emotional Design Gamification Gamification sebagai salah satu interaksi pada user untuk memberikan feedback pada user ketika memakai aplikasi Weboo. Sebagai salah satu sarana agar User lebih produktif dan tetap bersemangat untuk memakai Weboo

Personalization Ada beberapa fitur unggulan Weboo yang mendukung personalization, yakni user dapat bookmars, menyimpan dan melakukan organize diaplikasi ini. Yakni seperti simpan webinar, materi webinar dan simpan sertifikat


PENUTUP Aplikasi ini diharapkan dapat menjadi solusi yang efektif untuk para pengguna dalam mengakses webinar dengan aman dan nyaman tanpa harus merasa khawatir akan tertinggalnya informasi penting mengenai seminar yang akan diadakan atau diikuti. Selain itu, diharapkan juga aplikasi ini dapat mewadahi kegiatan webinar kedepannya. Berikut adalah beberapa hal yang menjadi Rekomendasi Perbaikan dalam pengembangan rancangan aplikasi Weboo yakni : • Melakukan usability testing pada user • Melakukan dokumentasi untuk perbaikan terhadap desain dan usability dari masukan user • Melakukan perbaikan terhadap rancangan aplikasi untuk dikembangkan ke tahap berikutnya.


LAMPIRAN Dokumentasi Kerja Tim Beberapa tools yang digunakan untuk mengerjakan project selama SFH adalah • Google Drive dan Google Meet • Google Document dan Google Slide • Miro • Draw.io • Figma • Visio

Dokumentasi pengerjaan User Flow

Dokumentasi pengerjaan Emphaty Map


LAMPIRAN

Dokumentasi pengerjaan IA

Dokumentasi pengerjaan Wireframe

Dokumentasi pengerjaan Prototype


Dokumentasi pengerjaan User Journey

Dokumentasi pengerjaan Dokumen Project

Dokumentasi pengerjaan Presentasi


LAMPIRAN

Dokumentasi pengerjaan User Research

Poster Produk Link Publikasi Website : https://weboo-id.000webhostapp.com Final Presentation : https://issuu.com/nadifaadya/docs/ppt_ final_new.pptx


All Rights Reserved 2020


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.