fbpx

ONLINE CLASS PLATFORM - UI/UX CASE STUDY

Jenis :

MOBILE APP UI DESIGN

Teknik :

-

Software :

FIGMA

Kategori Kelas :

UI/UX DESIGN

Irfan Kurniawan, UI/UX Designer.

---

Deskripsi Karya :


Kampus adalah sebuah tempat menimba suatu ilmu untuk mewujudkan impian kita setelah lulus, selain gelar kita juga harus di memiliki suatu ke ahlian yang harus di miliki di era teknologi modern saat ini untuk bekerja di perusahaan yang mana bidang paling diminati anak muda sekarang adalah sektor Informasi Teknologi.

Karena mahasiswa karyawan orang yang cocok pada proses belajar dan sudah menentukan jalan karir nya. Dengan adanya suatu problem tersebut maka Online Class membuat suatu solusi untuk memfasilitasi para peminat untuk memperdalam suatu keahlian dalam bidang Informasi Teknologi dari pemula hingga ahli.

-----
Artikel Asli : https://medium.com/@irfanuriawan/ux-case-study-online-class-7c3e0ab8ce0a

PROJECT
OBJECTIVE

Online Class saat ini ingin menjangkau semua kalangan yang membutuhkan suatu keahlian khusus dalam bidang Informasi Teknologi. Adanya fasilitas Online di harapkan bisa menjadi solusi akan kesulitan waktu dan tempat untuk melakukan pembelajaran dan pastinya bisa belajar dimanapun dan kapan pun.

unsplash-image

EMPATHIZE

Pada tahapan empathize hal yang dilakukan adalah mengumpulkan data kepada customer sehingga menghasilkan insight yang dapat membantu untuk menentukan masalah yang akan dibuat solusinya. Pada awal tahapan ini yang saya lakukan adalah merencanakan riset, mengumpulkan data, dan mensintesis data hingga menghasilkan insight.

Tahapan pertama yaitu dengan metode empati untuk memahami lebih dalam lagi tentang kebutuhan pengguna dengan merencanakan riset, mengumpulkan data-data, dan mensitetis data hingga menghasilkan sebuah insight.

Riset ini bertujuan untuk mendeskripsikan bagaimana cara belajar yang mudah, menyenangkan, dengan waktu yang fleksibel. Objective ini mengarah kepada sebuah research question yaitu bagaimana mereka belajar dengan mudah, menyenangkan dan waktu yang fleksibel.

In-Depth Interview :


Saya menggunakan In-depth interview secara online melalui untuk mempermudah komunikasi jarak jauh pada riset ini, karena isu pandemi ini juga jadi ini salah satu solusi yang bisa saya lakukan. Dalam metode ini saya sudah menyiapkan persyaratan atau kriteria yang sudah siapkan sebagai berikut :

- Mahasiswa/karyawan
- Bekerja
- Berusia 17–23

1-QHnMZXvScolTsZ4Tko0oDA

Interview via Google Meet.

Setelah melakukan wawancara terhadap 5 partisipan, saya mendapatkan beberapa penjelasan dari aktifitas belajar mereka selama di kampus sebagai berikut :

a. Mahasiswa mengambil kelas karyawan karena harus membagi waktu dengan pekerjaan.

b. Mereka mengambil Prodi karena menyesuaikan dengan pekerjaan agar balance antara teori dan praktik dalam pekerejaanya.

c. Untuk kebutuhan belajar lebih mereka sering belajar melauli youtube, medium dan unutk perbayar mereka mengambil kelas-kelas online untuk mengasah kemampuan mereka seperti udemy.

Data Synthesize :


Setelah mengumpulkan dari beberapa data partisipan, kemudian menganalisis dan sintetis dengan mengkelompokkan data-data tersebut sampai membentuk sebuah pola yang mirip seperti Affinity Diagraming.

Partisipan@2xxx

Membuat Affinity Diagram di Whimsical.

Key Insight :


Terdapat beberapa key insight yang menarik setelah saya melakukan affinity diagraming. Insight ini memberikan pemahaman mendalam kepada saya terhadap kebiasaan yang dilakukan mahasiswa ketika belajar.

a. Mahasiswa dengan kelas karyawan merasa kurang optimal belajar di kampus karena materi yang disampaikan sangat singkat dan waktu yang kurang cukup.

b. Mereka lebih suka materi yang sesuai dan yang mereka anggap cocok dengan pribadi maupun pekerjaan sehingga mengabaikan materi-materi yang lainnya.

c. Karena di kampus di beberapa materi merasa kurang mahasiswa memilih untuk mengambil kelas online untuk kebutuhan upgrade skill dan knowledge

DEFINE

Setelah menemukan insight dari proses riset saatnya saya dan tim menentukan permasalahan utama apa yang akan kami buat solusinya. Kami menggunakan How Might We (HMW) untuk menentukan masalah apa yang akan kami selesaikan.

1CINE3nY3AECWYk86mMw7ag

Beberapa statement How Might We (HMW) yang sudah divote

Karena terdapat lebih dari satu statement how might we yang mendapatkan vote dalam jumlah sama kami mencoba mengerucutkan how might we tersebut dengan menggunakan Impact Effort Matrix.

1uk4kKaW02FmV9UJbpfG18g

Impact Effort Matrix.

Berdasarkan impact effort matrix diatas maka ditentukan sebuah statement berikut :

“(How Might We) Mengikuti kelas Online untuk tambahan, karena waktu yang sangat singkat di kampus.”

IDEATION

Lightning Demos :


Untuk mendapatkan inspirasi ketika melakukan ideation kami mengumpulkan beberapa referensi yang sesuai dengan masalah yang akan kami buat solusinya. Sebagai referensi kami mengumpulkan berbagai tampilan bertemakan website atau apps Online Course.

13A13GmMTsFjnN0HRtJa_lQ

Kumpulan referensi yang kami kumpulkan.

Crazy 8 :


Kami mencoba mengekplorasi banyak ide dengan melakukan crazy 8 kami membuat alternatif berbeda dari satu buah page dan kemudian vote ide yang menarik.

1LEydvTUmlM-jpByCjqR5iw

Kumpulan ide dalam Crazy 8.

Storyboard :


Kami melakukan visualisasi dalam bentuk cerita untuk membayangkan bagaimana solusi kami digunakan oleh user pada konteks sebenarnya.

Storyboard ini bercerita mulai dari seorang yang merasa waktu belajar di kampus dengan waktu yang cepat dan juga di bebani dengan banyak tugas oleh hampir semua dosen. Kemudian mahasiswa tersebut mengerjakan tugas-tugasnya di rumah, seketika itu mulailah ada beberapa materi yang mulai belum di mengerti dan akhirnya mulai mencari pengertian mendalam tentang soal-soal tersebut dan akhirnya muncullah sebuah kelas-kelas online yang di dalamnya berisi materi-materi dan pembahasan yang bagus.

Kemudian mahasiswa tersebut mengambil dan belajar hingga saat ujian mendapatkan nilai yang sesuai yang di harap kan nya yaitu mendapatkan nilai yang bagus.

1qzXn33Y8kMZ78clX3R5cMw

Storyboard untuk menceritakan bagaimana user menggunakan solusi yang kami buat dalam konteks sebenarnya.

Solution Sketching :


Kami membuat ide solusi yang sudah berbentuk alur kemudian melakukan vote terhadap solusi yang paling bagus.

1zqhIDnIifU7YWa6wgJUu7Q

Sketch solusi yang sudah lengkap dengan alur penggunaan.

PROTOTYPING

Setelah proses ideation selesai kemudian kami melanjutkan untuk membuat prototype agar bisa diujikan terhadap user. Kami membuat desain akhir menggunakan Figma kemudian membuat clickable prototype dengan bantuan marvel. Berikut desain akhir yang sudah kami hasilkan.

Splash Screen :


Kami menggunakan Splash Screens untuk mengenalkan kepada user dengan logo 3 orang yang melambangkan guru dan murid dan kalimat pejelasnya dibawah yaitu Online Course.

1Llt3ys4-rBTCUtvd1k25IA

Splash Screens

Registration :


Pada registrasi kami memudahkan user dengan menambahkan login with google agar user tidak repot harus menuliskan email dan password

1xzBQoxGVURAw_2YtX93z7Q

Halaman registrasi

Classroom :


Belajar dengan berbagai macam kelas adalah aktivitas utama di Online Class. Dari tahapan memilih Kategori, berbagai macam level class, ujian/latihan mencocokan class dengan memainkan game, belajar dan ujian hingga mendapatkan sertifikat online.

1mjjCBnlwvryIyp01zAwkCQ

Halaman pengambilan kelas

VALIDATION

Pada tahapan ini saya menguji prototype yang sudah dibuat untuk mengetahui kesulitan apa yang dihadapi oleh pengguna ketika melakukan peroses mengambil class. Pada tahap validasi ini saya menggunakan In-person Moderated Usability Testing dengan mewawancari 3 orang partisipan.

Berikut temuan dan insight yang saya dapatkan dari tahapan ini:

Findings-1

Halaman Home

Findings-2

Halaman Message

Findings-3

Halaman Message

Findings-4

Halaman Login

DESIGN ITERATION

Pada tahapan ini saya menguji prototype yang sudah dibuat untuk mengetahui kesulitan apa yang dihadapi oleh pengguna ketika melakukan peroses mengambil class. Pada tahap validasi ini saya menggunakan In-person Moderated Usability Testing dengan mewawancari 3 orang partisipan.

Berikut temuan dan insight yang saya dapatkan dari tahapan ini:

iterasi-1

Halaman Sign In

iterasi-2

Navigation Bar

iterasi-3

Halaman Challenge

iterasi-4

Konfirmasi Kelulusan

CONCLUSION

Terdapat banyak insight menarik dari riset ini yang sebelumnya saya tidak ketahui dari kebiasaan mahasiswa saat belajar.

Salah satunya kebiasaan mengambil kelas online karena merasa kurang akan ilmu yang diberikan kampus dan juga waktu yang sangat singkat hingga akhirnya mereka sadar untuk kebutuhan tersebut dan akhirnya memutuskan mengambil beberapa class online untuk menambah knowledge dan skill dengan praktik.

Iterasi-iterasi selanjutnya masih bisa dilakukan untuk membuat produk ini jadi lebih baik.

Disini adalah tempat yang cocok buat kamu belajar Graphic Design, UI/UX Design, Video Editing, 3D Design, dan Motion Graphic.

Cukup sekali bayar, kamu bisa akses materi selamanya.

Follow kami di Instagram, Facebook, dan Youtube.

Logo_Full_1_white

© 2018 - 2020, Pixel Ninja Indonesia. All Rights Reserved.