ELVAM - PORTOFOLIO

1. User Research dan Competitive Research Awal mula, kami melakukan user research terhadap beberapa siswa SMK jurusan Rekayasa Perangkat lunak yang pernah/sedang mengambil mata pelajaran Pemrograman Dasar, tujuan kami adalah untuk mengetahui permasalahan yang dihadapi oleh siswa dan menyesuaikan kembali dengan ide solusi yang akan kami berikan, dari hasil user research kami mendapat 7 responden dengan permasalahan yang cukup berbeda, sehingga bisa menjadi hasil user research yang baik bagi kami.

Gambar di atas merupakan hasil ss dari record data yang sudah kami kumpulkan yang berisi pertanyaan-pertanyaan mengenai masalah/topik yang ingin kami angkat yaitu Mata Pelajaran Pemrograman Dasar pada siswa SMK. Untuk pertanyaan yang kami berikan ada beberapa seperti; 1. Apakah kamu kesulitan dalam mempelajari materi pemrograman dasar ?

2. Sejauh mana pemahaman kamu dengan materi yang diajari ?

3. Bagaimana kamu bisa mengetahui materi pemrograman dasar ?

4. Apakah kamu berminat dalam mempelajari materi pemrograman dasar secara mendalam ?

Untuk Link lebih lengkap terdapat di : User Research - Kelompok 6 Setelah kami mendapat data yang dibutuhkan, seperti keresahan apa yang dialami, hal apa yang membuat materi Pemrograman Dasar menarik, dan sebagainya, kami melanjutkan untuk membuat Competitive Research dimana Competitive Research sendiri merupakan strategi marketing di mana kamu mengidentifikasi kompetitor dengan meneliti produk, penjualan, serta strategi pemasaran mereka.

Untuk Competitive Research yang kita ambil ada beberapa yaitu; Zenius, Ruang Guru, dan DuoLingo. Ketiga platform ini memiliki kesamaan yaitu suatu aplikasi untuk mempelajari suatu materi di bidang pendidikan seperti contoh; Matematika, Bahasa Inggris, hingga Materi SBMPTN atau untuk masuk ke perguruan tinggi. Akan tetapi, ada beberapa kekurangan juga yang terdapat pada beberapa platform di atas seperti; untuk mengakses beberapa materi yang lebih mendalam harus berbayar, saat kita pertama kali mempunyai aplikasi tersebut dan ingin membuat akun dibutuhkan email yang mungkin bagi beberapa orang adalah privasi tersendiri, dan lain sebagainya. Lalu untuk solusi yang diberikan atau perbedaan aplikasi kami dengan aplikasi kompetitor lainnya yaitu dimana kami memfokuskan satu target yaitu materi Pemrograman Dasar. Disaat kita sudah memfokuskan kepada 1 hal saja. Walaupun target audiens atau user bisa dikatakan tidak sebanyak kompetitor, tapi konsentrasi dari aplikasi tersebut jelas dan diharapkan dengan adanya aplikasi yang dibuat, bisa membantu siswa SMK, Mahasiswa, ataupun orang yang ingin belajar pemrograman dasar untuk bisa memahami, mengerti, serta bisa mengerjakan materi tersebut. tim melaporkan hasil validasi masalah kepada real user. Selanjutnya menyampaikan hasil kajian competitive research untuk menspesifikkan posisi dan keunggulan desain solusi yang diusulkan.

2. Synthesis and Personas Pada sintesis dan persona, kami melihat permasalahan utama yang dihadapi user adalah ketika mereka mulai mendalami materi-materi pada pemrograman dasar tersebut. Secara logis tentunya kita menyadari bahwa fundamental yang harus dimiliki pada mata pelajaran ini tentunya harus kuat. Karena tanpa adanya penguatan yang sistematis pada mata pelajaran ini, banyak siswa yang terkendala pada saat mereka melanjutkan pada mata pelajaran selanjutnya. Sehingga kami melihat urgensi akan pemahaman materi ini sangat krusial apabila siswa kurang mendalaminya.

Kemudian dari persona potensial user sebagai dasar untuk fokus pengembangan disini adalah dengan cara memberikan bentuk-bentuk latihan soal dan pemberian studi kasus yang relevan pada setiap sub materi yang diajarkan pada mata pelajaran pemrograman dasar. Disini pada saat user pertama akan membuat akun, kami akan memberikan pre test sebagai dasar yang akan menentukan sejauh mana kemampuan siswa. Setelah itu, nanti siswa akan mendapat penilaian sejauh apa kemampuan mereka dan akan diberikan saran-saran agar mereka dapat menguasai materi secara baik.

Sebagai bentuk uji pemahaman yang baik, tentunya siswa harus diberikan latihan-latihan soal pada setiap sub materi agar memastikan siswa dapat benar benar mengimplementasikan materi mereka. Tidak cukup sampai disitu saja, dalam hal ini tentunya siswa membutuhkan ujian agar memberikan evaluasi secara menyeluruh akan pemahaman mereka seutuhnya. Hal ini kami berikan agar siswa dapat benar-benar paham dan dapat menjawab permasalahan fundamental yang dialami siswa sejauh ini.

3. Instructional Design to User Mental Model

Mental Model Kami dapat diakses melalui : https://www.figma.com/file/bnCRwu2RQPaJrOGYoNAvOc/Mental-Models?node-i d=25%3A104 Mental models adalah apa yang user ketahui tentang cara menggunakan situs web, ponsel, atau produk digital lainnya.

Dengan mengacu pada apa yang sudah mereka ketahui dari interaksi mereka sebelumnya dengan aplikasi pembelajaran lain, misalnya duolingo, user dapat menyederhanakan interaksi mereka dengan aplikasi pembelajaran baru yang akan kami buat. Mereka akan memahami bagaimana proses aplikasi pembelajaran yang sudah dipahami dan hal apakah yang ingin mereka harapkan dari aplikasi pembelajaran yang sudah mereka ketahui sebelumnya.

4. Learning Journey Maps

Learning Experience Maps kami dapat diakses melalui link berikut : https://www.figma.com/file/6psc53K2GqjlxCUSQP9YsL/Template-Learning-Experien ce-Maps?node-id=0%3A1 Sebelum

kita

mengembangkan

sebuah

media

pembelajaran,

kita

perlu

mempertimbangkan berbagai aspek ,salah satunya adalah mempertimbangkan berbagai perjalanan pembelajaran yang berpotensi dilakukan oleh siswa. Dengan menggunakan wawasan itu, kita dapat mengidentifikasi pada titik manakah yang berpotensial atau masalah yang harus kita tangani, untuk mempertimbangkan dan mendapatkan wawasan, diperlukan lah yang namanya Learning Experience Maps.

Sehingga

kita

dapat

mempertimbangkan

bagaimana

proses

perjalanan

pembelajaran yang selama ini dilakukan oleh siswa, dan pada bagian mana/apa yang harus kita selesaikan.

5. Analisis Kompetitor

1. Arsitektur Informasi dan UX Writing

User Arsitektur kami dapat diakses melalui : https://www.figma.com/file/NG6tPtPesMcPimkyI0juwo/Arsitektur-Informasi?nod e-id=0%3A1&t=xFyzxNjR2bNziP8N-1 Arsitektur informasi adalah disiplin yang berfokus pada organisasi informasi pada bentuk digital. contohnya, saat desainer menghasilkan aplikasi serta situs web, mereka menata setiap layar individu sehingga pengguna bisa dengan mudah menemukan info yg mereka butuhkan. Mereka juga membuat alur yang memungkinkan pengguna menavigasi antar layar tanpa poly usaha. Arsitek UX

memilih organisasi dan alur yang tepat. Pada arsitektur sendiri memiliki beberapa komponen dimana komponen merupakan sistem yang menetapkan berbagai cara konten yang dapat diatur serta ditemukan oleh pengguna.

2. User Flow:

User Flow dapat diakses melalui link berikut : https://www.figma.com/file/yzNJin9DwgU6kT5lduoETb/User-Flow-(FIX)?nod e-id=0%3A1 Sebelumnya, user flow merupakan langkah-langkah yang sudah di visualisasikan dan dapat diikuti oleh pengguna melalui suatu aplikasi untuk menyelesaikan tugas tertentu. Langkah-langkah ini memberikan sebuah alur yang dapat membawa pengguna dari titik masuk hingga mencapai hasil akhir yang diinginkan. Pada user flow dalam desain aplikasi pendekatannya berfokus pada pengguna, pendekatan tersebut biasanya dapat menjadi tujuan utama menciptakan user flow yang efisien.

Untuk gambar di atas, flow dimulai dari user membuka aplikasi kami yaitu ELVAM dan akan diarahkan kepada apakah user ini sudah mempunyai akun atau belum. Jika belum, user akan diarahkan ke daftar dari nama, email,

nomor telepon, dan lain sebagainya, dilanjutkan ke verifikasi untuk menentukan apakah berhasil atau tidak. Jika sudah mempunyai akun, user akan diarahkan ke login dimana di login tersendiri mempunyai fitur forgot password jika user tidak mengingat password akun di aplikasi ELVAM. Setelah user sudah masuk di halaman home, user bisa memilih 3 fitur yang kami sediakan yaitu; materi, kuis, dan ujian. Untuk page materi, akan ada beberapa materi pembelajaran pemrograman dasar yang disediakan seperti tipe data, variabel, if else, flowchart, dan sebagainya. setelah user memilih dan membaca materi yang diinginkan, user akan diberikan pertanyaan apakah ingin melanjutkan materi atau kembali ke page home.

Page kedua yaitu kuis yang berisikan pilihan kuis/latihan soal dari materi yang ada di page pertama materi. Jika user sudah memilih salah satu kuis, user akan diarahkan untuk mengerjakan 5 soal tiap materi, jika user masih belum mengerti suatu hal yang ada di latihan soal, user bisa memakai fitur hint yang merupakan petunjuk untuk mengerjakan soal yang ada. Jika sudah selesai mengerjakan soal, user akan diberitahukan apakah jawaban tersebut benar/salah dan mendapatkan bintang yang sesuai dengan skor yang user dapatkan.

Page terakhir atau ketiga yaitu ujian. Yang membedakan ujian dengan kuis ada beberapa seperti; jumlah soal yang diberikan di page ujian adalah 15 soal berbentuk pilihan ganda. Kedua, tidak adanya hint yang merupakan bentuk petunjuk untuk membantu user dalam mengerjakan soal. Lalu terdapat penjelasan dari setiap soal, di page ujian saat user sudah menjawab suatu soal dan sudah men-submit, akan ada notifikasi apakah jawaban tersebut benar atau tidak serta penjelasannya. Terakhir, user akan mendapatkan nilai/skor yang menjadikan apakah user sudah paham akan materi tersebut atau tidak.

3. Design System:

Design System kami dapat diakses melalui link berikut : https://www.figma.com/file/DTwFzt7Ene1Wpjm7C4BAbB/Design-System?node-i d=0%3A1&t=wnjzLHA9TIqQMZeM-1 Design system adalah suatu kumpulan komponen UI dan kode yang saling berhubungan, kemudian dikategorikan dalam suatu sistem agar mudah digunakan ketika merancang desain aplikasi. Begitu juga dengan desain sistem yang kami buat, kami mengkategorikan beberapa kategori seperti typography, warna, komponen dan lain sebagainya, agar nantinya kami mudah dalam pembuatan prototype/desain aplikasi yang akan kami rancang.

4. Tampilan Produk Onboarding 1

Onboarding 2

Onboarding 3

Daftar

Verifikasi

Login

Materi

Materi 1

Latihan Soal

List Kuis

Mengerjakan kuis 1

Jawaban Benar

Jawaban Salah

List Puzzle

Mengerjakan Puzzle 1

Mendapatkan Bintang

Ujian

Mengerjakan Soal Ujian

Mendapatkan Nilai Ujian

Profil

Tampilan produk design UI/UX adalah proses yang mencakup tata letak, interaksi, dan visual desain produk. Ini mencakup bagaimana pengguna menavigasi produk dan apa yang mereka lihat. Ini juga merujuk pada bagaimana pengguna berinteraksi dengan produk dan bagaimana produk merespons. Desain UI/UX mencakup penggunaan warna dan font untuk membuat produk yang tampak lebih menarik dan mudah digunakan. Desain UI/UX juga mencakup bagaimana produk membuat pengguna tetap terlibat, serta meningkatkan pengalaman pengguna secara keseluruhan.

Tampilan produk kami cenderung menggunakan warna dark, karena menyesuaikan dengan tema codingan, dimana warna dark lebih populer , dan codingan juga lebih mudah dibaca apabila dalam warna dark. Dalam produk kami juga terdapat beberapa gambar agar user senang ketika menggunakan produk kami.

5. Scenario Testing Task

Skenario

Goal

Daftar

Pengguna ingin mendaftarkan akun

Pengguna berhasil mendaftarkan akun pada aplikasi

masuk

Pengguna ingin masuk pada akun yang telah dibuat

Pengguna berhasil masuk pada aplikasi dan bisa menggunakan fitur-fitur yang ada di aplikasi

belajar materi

Pengguna ingin belajar materi yang telah disediakan

Pengguna berhasil masuk pada menu materi dan mempelajari materi

latihan soal berbentuk puzzle

Pengguna ingin mengerjakan latihan soal berbentuk puzzle

Pengguna berhasil masuk pada menu latihan soal puzzle dan mengerjakan latihan soal yang ada

latihan soal berbentuk kuis

Pengguna ingin mengerjakan latihan soal berbentuk kuis

Pengguna berhasil masuk pada menu latihan soal kuis dan mengerjakan latihan soal yang ada

mendapatkan bintang

Pengguna ingin mendapatkan bintang

Pengguna berhasil masuk ke menu reward dan mengambil bintang

ujian

Pengguna ingin mengerjakan ujian

Pengguna berhasil masuk ke menu ujian dan mengerjakan soal ujian

mendapatkan nilai

Pengguna ingin mendapatkan nilai setelah ujian

Pengguna menyelesaikan soal ujian dan mendapatkan nilai.

Scenario testing merupakan sebuah dokumen yang berisi sekumpulan langkah-langkah sistematis yang disusun oleh seorang Quality Assurance / tester agar sistem yang akan dites dapat memenuhi ketentuan yang diinginkan oleh user, memenuhi standar tertentu, serta dapat berfungsi dengan baik.Tujuan dalam membuat skenario testing adalah untuk memudahkan developer dan tester untuk melakukan testing, menjadi dasar pengembangan bagi pengerjaan project, sebagai dasar client / product owner menyesuaikan dengan system requirement.

Dalam pembuatan Scenario Testing terdapat beberapa tahapan yang bisa dilakukan, yaitu diantaranya (1) Menentukan sasaran yang ingin dicapai, yaitu menentukan apakah untuk melakukan redesign untuk aplikasi yang sudah ada, atau aplikasi yang belum pernah ada sebelumnya, (2) Menyiapkan prototype paper ataupun prototype digital yang akan digunakan untuk diuji .

Dapat menggunakan prototype paper maupun prototype digital yang masih berupa wireframe. (3) Menentukan partisipan yang akan melakukan ujicoba, Partisipan yang dipilih untuk melakukan ujicoba disesuaikan dengan target user dari aplikasi tersebut. Jumlah partisipan yang dipilih tergantung dari jenis aplikasi, biaya dan waktu yang tersedia. (4) Membuat rancangan task ( aktivitas ) yang akan diuji. Aktivitas yang dirancang harus jelas dan singkat agar tidak membuat partisipan bingung. (5) Mengamati proses ujicoba yang berlangsung. Moderator diperlukan untuk melakukan pencatatan hal yang terjadi pada saat terjadi ujicoba. Jika dilakukan secara remote (online) maka dapat menggunakan aplikasi yang dapat merekam proses ujicoba yang berlangsung. (6) Membuat rangkuman hasil uji coba. Seluruh hasil uji coba yang telah dicatat dari pengamatan maupun proses perekaman dibuatkan dalam satu laporan yang kemudian dianalisis apa isu – isu yang timbul dari uji coba yang dilakukan para partisipan.

Dalam Skenario Usability Testing kami memiliki beberapa tahapan yang dapat dilakukan oleh user, yaitu : (1) daftar, (2) masuk, (3) belajar materi, (4) latihan soal berbentuk puzzle, (5) latihan soal berbentuk kuis, (6) mendapatkan bintang, (7) ujian dan (8) mendapatkan nilai.

6. Menyusun Instrumen Usability Testing atau Usability Inspection Usability Testing merupakan sebuah proses yang digunakan untuk menguji kemudahan penggunaan suatu produk. Usability Testing kami lakukan untuk mengetahui lebih dulu kemungkinan kendala penggunaan aplikasi yang akan dihadapi oleh pengguna.

Kami melakukan identifikasi dan memperbaiki

masalah yang mempengaruhi kualitas produk. Sehingga menurut kami perlu dilakukan uji coba terlebih dahulu pada user yang sesungguhnya untuk mendapatkan feedback. hal ini ditujukan kepada Tim kami agar mengetahui isu – isu yang kemungkinan akan timbul pada saat penggunaan aplikasi tersebut dan dapat segera memperbaikinya.

Tentu ini sangat berkaitan dengan usability inspection. Usability inspection biasanya ditujukan untuk menemukan masalah kegunaan dalam desain, meskipun beberapa metode juga mengatasi masalah seperti tingkat keparahan masalah kegunaan dan kegunaan keseluruhan dari keseluruhan sistem. Banyak metode inspeksi memungkinkan inspeksi spesifikasi antarmuka pengguna yang belum tentu diterapkan, artinya inspeksi dapat dilakukan di awal siklus hidup rekayasa kegunaan.

Berikut adalah penjelasan lebih lanjut terkait dengan usability testing dan usability inspection yang kami lakukan.

Instrumen Usability Testing dapat diakses melalui : Usability Testing

Instrumen Usability Inspection dapat diakses melalui ELVAM Heuristic Evaluation Checklist.docx

1. Menyusun Instrumen Pengujian Ahli Materi dan Ahli Media Tema

: Teknologi

Judul Media

: ELVAM - E-learning for Java Programming

Penulis

: Tim ELVAM

Evaluator

:

Instrumen uji ahli materi pembelajaran dapat dilihat pada tabel berikut ini.

Petunjuk pengisian Berilah tanda (✓) pada kolom hasil pengujian butir penilaian, dengan cara memilih salah satu skor penilaian sebagai berikut: Relevan Tidak Relevan Berikut merupakan contoh pemberian tanda centang

No. 1

Pernyataan Ukuran simbol (tombol,

Relevan

Tidak Relevan

Alasan

✓

frame) sudah sesuai

No. 1

Pernyataan Ukuran simbol (tombol, frame) sudah sesuai

2

Penempatan simbol

Relevan

Tidak Relevan

Alasan

(tombol, frame) sudah sesuai 3

Jenis dan Ukuran font pada media yang mudah dibaca

4

Warna teks yang digunakan pada media mudah dibaca

5

Komposisi gambar yang ada pada media sudah sesuai

6

Ukuran dan kualitas gambar yang ditampilkan pada media sudah sesuai

7

Ketetapan penempatan gambar pada media sudah sesuai

8

Kesesuaian animasi dengan materi

9

Pemilihan animasi sudah menarik

12

Cover dalam media pembelajaran sudah sesuai

13

Tampilan media pembelajaran dengan isi materi sudah sesuai

14

Fleksibilitas media pembelajaran (dapat digunakan mandiri dan terbimbing)

15

Petunjuk penggunaan

media pembelajaran sudah sesuai 16

Kemudahan pengoperasian media pembelajaran sudah sesuai

17

Penggunaan tombol navigasi pada media pembelajaran sudah sesuai.

18

Ketepatan kinerja interface link

19

Konsistensi bentuk dan letak navigasi dalam media sudah sesuai

20

Fungsionalitas media sudah sesuai Jumlah Total

Instrumen pengujian ahli materi (expert review) dan instrumen pengujian ahli media merupakan suatu metode yang digunakan untuk mengevaluasi kualitas dan kelayakan sebuah produk, terutama dari segi desain dan penggunaan (user experience atau UX). Dalam konteks UX design, instrumen pengujian ahli materi biasanya digunakan untuk mengevaluasi interface pengguna (UI) dan interaksi pengguna dengan produk tersebut.

Secara umum, instrumen pengujian ahli materi terdiri dari beberapa langkah sebagai berikut: 1. Identifikasi tujuan dan sasaran: Langkah pertama dalam proses pengujian ahli materi adalah menetapkan tujuan dan sasaran dari evaluasi yang akan dilakukan. Tujuan dari pengujian ahli materi adalah untuk mengidentifikasi

kelebihan dan kekurangan dari produk yang akan diuji, serta memberikan saran dan rekomendasi untuk peningkatan produk tersebut.

2. Pemilihan ahli materi: Langkah selanjutnya adalah menentukan siapa saja yang akan menjadi ahli materi dalam proses pengujian. Ahli materi biasanya merupakan orang yang memiliki pengetahuan dan pengalaman yang luas di bidang yang relevan dengan produk yang akan diuji. Ahli materi bisa berasal dari berbagai latar belakang, seperti designer UX, pengembang software, atau pengguna akhir.

3. Persiapan instrumen: Setelah ahli materi terpilih, langkah selanjutnya adalah menyiapkan instrumen yang akan digunakan dalam proses pengujian. Ini bisa berupa daftar pertanyaan atau skala penilaian yang akan digunakan untuk mengevaluasi produk.

4. Pelaksanaan pengujian: Setelah instrumen siap, langkah selanjutnya adalah melakukan pengujian dengan menggunakan instrumen yang telah disiapkan. Ahli materi akan mengevaluasi produk dan memberikan saran dan rekomendasi sesuai dengan penilaian mereka.

5. Analisis hasil: Setelah pengujian selesai, langkah terakhir adalah menganalisis hasil yang diperoleh dari pengujian ahli materi. Hasil analisis ini bisa digunakan sebagai masukan untuk peningkatan produk yang diuji.

Instrumen pengujian ahli materi merupakan metode yang efektif untuk mengevaluasi kualitas dan kelayakan sebuah produk, terutama dari segi desain dan penggunaan.

2. Knowledge Selama Pengembangan Ketika kami mencoba mencari ide dari sebuah masalah, kami mencoba memikirkan ide yang cukup menarik dan perlu untuk dilakukan realisasikan, disitu kami menemukan masalah yang perlu untuk diatasi, yaitu kejenuhan dalam belajar pemrograman dasar, kemudian ketika kami mendapatkan tugas

praktikum

pertama

(melakukan

user

research)

kami

mulai

melakukannya user research pada siswa SMKN Purwosari jurusan rekayasa perangkat lunak. Setelah melakukan user research, kami menemukan beberapa masalah dan kebutuhan tambahan yang belum terpikirkan sebelumnya, seperti materi pemrograman dasar dalam bahasa Indonesia dan latihan soal yang tidak membosankan. Kami kemudian mencari aplikasi yang relevan dan referensi latihan soal yang tidak membosankan. Akhirnya, kami memiliki ide untuk menciptakan aplikasi bernama ELVAM, yang memiliki keunggulan seperti materi pembelajaran dalam bahasa Indonesia, latihan soal berupa quiz dan puzzle, desain yang lebih modern, dan fitur ujian yang dapat membantu sekolah untuk mengevaluasi tingkat pemahaman siswa. dalam pengembangannya kami terkadang mengalami beberapa kesulitan seperti kesulitan dalam pemilihan warna, font, kemudian kesulitan dalam pembuatan alur user flow diagram, namun karena kami mencoba riset & diskusi, akhirnya semua itu dapat terselesaikan hingga prototype kami jadi.

Referensi: Neilson Norman Group. (2005). 10 Usability Heurisitic for User Interface Design. Retrieved from Neilson Norman Group: http://www.nngroup.com/articles/ten‐usability‐heuristics/ Nielsen, J. (1993). Usability Engineering. San Diego, California: Academic Press.

User Effect. (2009). 25‐point Website Usability Checklist. Retrieved from User Effect: http://www.usereffect.com/download/checklist.pdf