Hay, Nama saya Asep Saepudin. Saya seorang UI UX di gurungaji.com. Saya mempelajari UI UX design dengan mengikuti kursus yang diadakan oleh kominfo dan Digital Talent Scholarship yang bekerjasama dengan platfrom skilvul. Saya telah mempelajari Banyak hal seperti Design Thinking, Wireframing, UI High Fedelity, Prototyping, Usability Testing dan banyak lagi.
gurungaji.com adalah aplikasi mobile yang bertujuan sebagai platfrom belajar ngaji online dengan metode Al-Barqy dan menjadi aplikasi yang bisa membantu utnuk kebutuhan spritiual umat muslim seperti Arah Kiblat, Jadwal Sholat, Tuntunan Shalat, Video Kajian, Kisah Nabi, Tugas Malaikat, dan Kumpulan Do’a . Motode Al-Barqy adalah metode belajar ngaji dengan pendekatan Gesalt Psychology, dengan teknik Konsentrasi, Pengelompokan bunyi (transfer), Isyarat bunyi (morse), Pengelompokan bentuk, titian Unta (urutan mengarah) yang disusun oleh Drs. Muahdjir Sulthan.
Aplikasi mobile gurungaji.com bertujuan supaya semua kalangan dan semua penjuru/pelosok negeri bisa belajar ngaji dengan mudah, serta menjadi aplikasi yang bisa membantu untuk kebutuhan spiritual umat muslim.
Aplikasi gurungaji.com lahir dari keresahan Bapak Rahmat Alamsyah pengajar belajar ngaji menggunakan metode Al-Barqy untuk bisa menjangkau luas sampai pelosok daerah supaya bisa belajar ngaji dengan mudah dan cepat bisa mengaji ditambah pandemi COVID-19 yang membatasi interaksi tatap muka. Bapak Rahmat Alamsyah berdiskusi dengan kerabatnya Bapak Ade Herawan untuk membuat aplikasi gurungaji.com. Dari hasil diskusi Bapak Rahmat Alamsyah dan Bapak Ade Herawan mengajak GANESHLABS untuk bekerjasama untuk membuat aplikasi gurungaji.com. Dari kerjasama tersebut yang sepakat untuk ikut kerjasama Bapak M. Fiqri Ashiddiqi dan Bapak Laurensius Dede Sudirman membangun aplikasi gurungaji.com
Pada setiap acara TFT (Training For Teacher) Metode Al-Barqy yang diselengkarakan oleh bapak Rahmat Alamsyah di Masjid Agung Syi’arul Islam dan TK (Taman Kanak-Kanak) yang diadakan didaerah kabupaten kuningan saya mencoba meninterview dan survei beberapa siswa, Orang Tua dan orang dewas yang ingin belajar ngaji. Saya menemukan bahwa sebagian besar responden belum pernah menggunakan aplikasi belajar ngaji secara online ini menjadi tantang besar untuk gurungaji.com untuk bisa membuat anak atau orang dewasa untuk beralih dari belajar ngaji secara langsung tatap muka ke belajar ngaji secara online menggunakan aplikasi gurungaji.com. Saya mengumpulkan beberapa pain point atau poin maslah untuk mengetahui lebih dalam bagaimana prilaku atau kebiasaan pertisipan ketika melakukan belajar ngaji.
Semua hasil dari interview dan survei saya mencoba membuat asumsi yang berisi hal-hal yang user butuhkan atau user need serta asumsi produk owner. Berikut adalah asumsi yang saya temukan :
Owner ingin semua kalangan dan semua penjuru/pelosok bisa belajar ngaji dan menjadi aplikasi yang bisa membantu kebutuhan spritual umat muslim.
Anak lebih banyak menghabiskan waktu untuk bermain menggunakan smartphone dan ketika belajar ngaji cenderung cepat bosan.
Sebagai Anak, Saya ingin belajar ngaji yang mudah dan menyenangkan serta bisa bermain game.
Anak kesulitan untuk menulis, Menghafal dan mengucapkan huruf hijaiyah.
Sebagai Anak, Saya ingin bisa lebih capat untuk belajar menulis, mengahafal dan mengucapkan Huruf Hijaiyah.
Orang Dewasa cenderung malu ketika ingin belajar ngaji mulai dari awal.
Sebagai Orang Dewasa, Saya ingin belajar ngaji secara mandiri dan saya membutuhkan pengajar belajar ngaji untuk belajar secara privat.
Setelah mengidentiffikasi kebutuhan owner dan pengguna. Saya menetapkan Project Goal, User Benefit dan Business Outcome sebagai berikut :
supaya semua kalangan dan semua penjuru/pelosok negeri bisa belajar ngaji dengan mudah, serta menjadi aplikasi yang bisa membantu untuk kebutuhan spiritual umat muslim.
Temuan masalah yang ada kemudian saya rumuskan menjadi sebuah pertanyaan untuk menginisiasi solusi desain yang akan di buat. Metode ini dikenal dengan How Might We.
Setelah itu Owner, Team IT dan saya berdiskusi untuk mengimplementasikan belajar ngaji menggunakan metode Al-Barqy ke dalam layanan aplikasi gurungaji.com dan terciptalah alur belajar ngaji online menggunakan metode Al-Barqy sebagai berikut:
Setelah membedah metode Al-Barqy kami menyusun beberapa tahapan untuk belajar ngaji secara online dari setiap tahapannya terdiri dari Video Pembelajaran untuk Pengisian dan pembelajaran, Download Meteri untuk penguatan secara mendiri, Latihan Menulis untuk Penguatan dari menghafal Huruf Hijaiyah atau kalimat yang sudah di ajarkan serta pengutan untuk menulis selanjutnya Evaluasi untuk evaluasi dibagi menjadi dua kategori yaitu Anak dan Dewasa. Untuk Anak evalusi mengggunakan Game untuk evaluasi Pembelajaran dari setiap tahapan dan Dewasa menggunakan Quiz.
Setelah mengetahui kebutuhan aplikasi gurungaji.com, Saya kemudian membuat User Flow. Kali ini berfokus pada pembuatan flow pandaftaran, masuk akun, berlangganan layanan dan flow belajar ngaji di aplikasi gurungaji.com. Berikut user flow yang telah di rancang:
Langkah selanjutnya yang saya lakukan adalah membuat wireframe. Untuk pembuatan wireframe saya menggunakan tools whimsical. Wireframe ini membentuk flow yang telah dibuat.
Setelah membuat wireframe saya implementasikan ke High Fidelity Design atau User Interface. Karena belum mebuat design system untuk style guide saya menggunakan warna dari brand guidelines dari logo gurungaji.com. Berikut adalah hasil dari User Interface dari semua halaman yang ada di wireframe.
Halaman ini bertujuan untuk membantu untuk mengenal dan memahami informasi terkait tentang aplikasi gurungaji.com
Halaman Beranda ini adalah halaman beranda untuk pengguna yang belum memasukan akun dan mendaftarkan akun. Saya menambah tombol daftar/masuk pada beranda di atas supaya pengguna lebih cepat untuk melakukan proses masuk akun dan mendaftarkan akun.
Saya membuat beranda yang berbeda dikarenakan permintaan owner yang menginginkan pengguna bisa mengakses fitur gratis di aplikasi gurungaji.com tanpa harus masuk akun dan daftar akun. Ketika menjadi pengunjung tidak bisa mengakses semua fitur terutaman fitur Video Kajian dan fitur lainnya.
Halaman ini adalah halaman proses untuk masuk dan pendaftaran akun. Pada screen ketiga adalah sukses state dimana penggunaka di arahkan untuk ke inbox gmail dan melakukan verfikasi akun untuk bisa mengaktifkan akun.
Halaman Beranda ini adalah halaman untuk pengguna yang Sudah memasukan akun dan mendaftarkan akun. Menghilangkan tombol daftar/masuk dan menambahkan kalimat salam untuk mengurangi white space yang sebelumnnya tombol action serta membuka fitur yang tadinya tidak bisa di akses.
Untuk halaman pembaelajaran di bagi menjadi 2 kategori dikarenakan ingin menyesuaikan temapilan yang sesuai dengan 2 ketegori tersebut yaitu anak dan dewasa. Untuk banner belajar ngaji menggunakan karakter anak-anak yaitu Hukma dan sabya yang di buat saya sendiri. dan untuk banner dewasa menggunakan asset photo yang didownload di freepik karena gurungaji.com belum memiliki asset photo model untuk banner belajar ngaji dewasa ada beberapa asset dari gurungaji.com tetapi belum sesuai.
Halaman belajar ngaji anak atau dewasa terdiri dari video introduction yang menjelaskan singkat tentang tahapan belajar ngaji di gurungaji.com. selanjutnya item deskrpsi tentang layanan belajar ngaji anak atau dewasa deskripsi ini menjelaskan tentang layanan belajar ngaji anak dan proses tahapan belajar ngaji di gurungaji.com
Terdapat 2 tombol yaitu coba gratis dan berlangganan. Untuk coba gratis mengarahkan pengguna masuk ke tahapan belajar dan bisa mencobanya selama 2 menit dan setelah 2 menit ada pop up yang mengarahkan pengguna untuk melakukan pembayaran atau belangganan untuk mengakses belajar tersebut. dan tombol berlangganan mengarah pelanggan untuk melakukan pembayaran untuk bisa mengakses layanan belajar ngaji tersebut.
Halaman belajar ngaji anak atau dewasa komfirmasi state adalah untuk menanyakan kembali atau menegaskan kemabali untuk memasukan layanan kedalam keranjang untuk proses pembayaran.
Halaman belajar ngaji anak atau dewasa sukses state adalah untuk memudahkan pelanggan atau mempersingkat flow jika pelanggkan mengklik tombol ya maka langsung dipindahkan ke tampilan keranjang.
Halaman keranjang ini untuk memilih item atau layanan yang mau di proses pembayaran dan pemilihan promo untuk mendapatkan potongan harga pada saat checkout.
Halaman ini adalah proses checkout mulai dari pemilihan bank transfer, Sukses state. Pada sukses state ini terdapat 2 tombol untuk melewati flow supaya memprecepat dan mempermudah pengguna. Jika pengguna mengklik nanti maka akan di arakan ke halaman transaksi anda yang selesai dan jika mengklik tombol ya maka diarahkan ke halaman langganan saya.
Halaman ini adalah tahapan untuk belajar ngaji. Setiap tahapan terbuka ketika sudah menyelesaikan semua proses belajar yang ada di tahapan sebelumnya terbuka, dan sertifikat bisa diakses ketika semua tahapan selesai.
Pada halaman ini semua tahapan memiliki fase yang harus dilalui untuk belajar ngaji anak memiliki fase Video Pembelajaran, File Download, Latihan Menulis dan Game Evaluasi sedangkan untuk belajar ngaji dewasa berbeda di fase evaluasinya berupa Quiz Evaluasi.
Halaman ini adalah Video Pembelajaran di fase ini pengguna belajar ngaji dengan menonton video dengan video pembelajaran yang interaktif mengguanakan metode Al-Barqy. Pada fase ini pengguna harus menyelesaikan video pembelajaran sampai akhir dan video tersebut tidak bisa di lewati atau dilompati ke menit tertentu. Setiap fase video pembelajaran memiliki deskripsi tentang video pembelajaran yang muncul ketika menekan ikon arah panah ke bawah pada setiap fase video pembelajaran.
Komfirmasi state dimana pop up ini untuk menegaskan kembali kepada pengguna ketika ingin kluar dari fase Video pembelajaran. Sukses State dimana pop ini memberitahu kepada pengguna bahwa telah menyelesaikan semua fase video pembelajaran di tahap tersebut, dan ketika pengguna menekan tombol YA maka pengguna langsung diarahkan ke fase berikutnya yaitu file download untuk di pelajari kembali.
Halaman file download adalah halaman yang memuat materi dari setiap tahapan yang bisa di download dan di pelajari di rumah dalam bentuk PDF.
Halaman ini untuk belajar menulis huruf hijaiyah. Dalam atahap ini pegguana dapat belajar menulis dan mengenal bunyi pada setiap huruf dengan menekan tombol pojok kanan atas yang berbentuk speaker. pada tahapan ini pengguna dapa berkreasi dengan warna dan ketebalan pensil. Untuk hurufnya di sesuaikan dengan tehapan belajar.
Pada tahap evaluasi dewasa berbeda dengan tahapan evaluali anak. Pada tahap evaluasi dewasa berbentuk kuis yang bertujuan pengguna sudah paham dan hafal pengucapan huruf hijaiyah sesuai dengan tahapan yang sedang dipelajari. Halaman ini adalah halaman Intruksi untuk menuntun atau memberitahu cara pengisian soal. Pada section ini terdiri dari video intruksi dan deskripsi intruksi. Kami memudahkan pengguna jika tidak paham dalam video intruksi bisa melihat deskripsi intruksi dan sebaliknya jika pengguna tidak paham dengan membaca deskripsi intruksi bisa melihat video intruksi. Video intruksi cukup detail sehingga mungkin banyak yang paham setelah melihat video intruksi.
Halaman ini adalah soal untuk tahap evaluasi dewasa. Pada halaman ini soalnya berbentuk bunyi atau suara pengucapan huruf atau ayat al-qur’an dengan menekan tombol yang berada ditengah berbentuk speaker. Untuk pengisian cukup memilih huruf atau ayat yang benar ketika diucapkan pada soal.
Halaman daftar soal adalah halaman untuk membantu pengguna ketika ingin melihat soal yang belum di jawab dan sudah dijawab. Untuk soal yang berwarnn hijau menandakan bahwa soal tersebut sudah dijawab. Untuk warna biru memberitahu pengguna sedang mengerjakan daftar soal tersebut dan untuk warna biru muda menandakan soal belum di jawab.
Untuk tampilan sebelah kiri adalah tampilan ketika berada di soal terakhir yang berebeda dengan tampilan soal lainnya itu pada tombol kirim jawaban dan progres bar yanf full warna biru.
Pada tampilan sebelah kanan adalah komfirmasi state untuk meyakinkan kembali kepada pengguna sudah mengisi semua soal atau belum.
tampilan sebelah kiri ketika pengguna menyelesaikan soal evaluasi pada semua tahapan kecuali di akhir tahapan berbeda. tampilan ini ucapan selamat, Hasil nilai dan mengarahkan pengguna ketika berada ditahap 1 dan sudah menyelesaikan dan lolos maka tombol yang pertama mengarahkan pengguna ke tahap berikuitnya sedangkan untuk yang tahap terakhir mengarahkan pengguna ke sertifikat seperti pada tampilan sebelah kanan.
Tampilan ini adalah tampilan pengguna ketika tidak memenuhi nilai pada tahapan evaluasi dewasa.
Untuk Game Evaluasi menggunakan freelencer untuk membuat game evaluasi dan untuk alur evalusi sudah di diskusikan dan saya hanya membuat untuk asset huruf yang di butuhkan untuk kebutuhan game evaluasi belajar ngaji anak.
Prototype ini dibuat untuk menggambarkan konsep dan pengalaman pengguna yang direncanakan untuk Gurungaji. Dengan berfokus pada alur berlangganan dan belajar mengaji di gurungaji,com, prototipe ini bertujuan untuk memperjelas bagaimana pengguna akan berinteraksi dengan antarmuka dan fitur yang disediakan.
Setelah membuat High Fidelity Design dan Prototype, Saya mencoba mengaplikasikannya kedalam mockup untuk mengetahui tampilan di sudah didevelope oleh tim IT.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview. Setelah diriview dan disepakati mungkin langsung di develop tanpa harus Usability Testing di karenakan owner ingin cepat merilis aplikasi gurungaji.com. Selanjutnya saya membuat desain untuk fitur gurungaji.com
Selanjutnya adalah pembuatan fitur gurungaji.com, fitur ini terdiri dari Al-Qur’an, Kumpulan Do’a, Gerakan Sholat, Kiblat, Jadwal Sholat, Malaikat & Tugasnya, Kisah Nabi, dan Tuntunan Sholat. Fitur ini untuk membantu kebutuhan spiritual umat muslim.
Saya mencoba merangkum keinginan owner dan asumsi yang berisi hal-hal yang user butuhkan. Berikut rangkuman yang saya buat.
Setelah merangkum kebutuhan fitur, saya membuatnya satu satu terlebih dahulu untuk fitur gurungaji.com.
Selanjutnya saya membuat wireframe dan High Fidelity Design untuk fitur Al-Qur'an sesuai kebutuhan dan ada beberap tambahan yang menurut saya berguna untuk pengguna. Fitur ini bertujuan sebagai media pengguna untuk membaca Al-Quran hanya melalui smartphone dengan mendownload aplikasi gurungaji.com.
Pembuatan wireframe ini sekaligus membentuk wireflow dan menjelaskan fitur yang terdapat di fitur Al-qur'an gurungaji.com.
Setelah membuat wireframe selanjutnya saya membuat High Fidelity Design dan Mockup.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview. Setelah diriview dan disepakati mungkin beberapa fitur di dalam fitur Al-Qur'an ada yang tidak bisa di implementasikan. Selanjutnya saya membuat fitur Jadwal Shalat.
Selanjutnya saya membuat wireframe dan High Fidelity Design untuk fitur Jadwal Shalat sesuai kebutuhan dan ada beberapa tambahan yang menurut saya berguna untuk pengguna. Fitur ini bertujuan untuk memberikan jadwal shalat, pengingat shalat untuk pengguna.
Pembuatan wireframe ini sekaligus menjelaskan fitur yang terdapat di fitur Jadwal Shalat gurungaji.com.
Setelah membuat wireframe selanjutnya saya membuat High Fidelity Design dan Mockup.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview. Setelah diriview dan disepakati mungkin beberapa fitur di dalam fitur Jadwal Shalat ada yang tidak bisa di implementasikan dikarenakan timeline dan kurangnya Sumber Daya Manusia atau pekerja. Selanjutnya saya membuat fitur arah Kiblat.
Selanjutnya saya membuat wireframe dan High Fidelity Design untuk fitur Arah Kiblat sesuai kebutuhan dan ada beberapa tambahan yang menurut saya berguna untuk pengguna. Fitur ini bertujuan sebagai kompas atau arah kiblat yang akurat.
Pembuatan wireframe ini sekaligus menjelaskan fitur yang terdapat di fitur Arah Kiblat gurungaji.com.
Setelah membuat wireframe selanjutnya saya membuat High Fidelity Design dan Mockup.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview. Setelah diriview dan disepakati Selanjutnya saya membuat fitur Kumpulan Do'a.
Selanjutnya saya membuat wireframe dan High Fidelity Design untuk fitur Kumpulan Do'a. Dimana do'a di bagi menjadi 6 kategori. Fitur ini bertujuan sebagai informasi bacaan do'a untuk pengguna.
Pembuatan wireframe ini sekaligus membentuk wireflow dan menjelaskan fitur yang terdapat di fitur Kumpulan Do'a gurungaji.com.
Setelah membuat wireframe selanjutnya saya membuat High Fidelity Design dan Mockup.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview. Setelah diriview dan disepakati Selanjutnya saya membuat fitur Gerakan Shalat.
Selanjutnya saya membuat wireframe dan High Fidelity Design untuk fitur Gerakan Shalat. Gerakan shalat ini di ambil dari artikel kemudian di rangkum dan dan dibuat ilustrasi untuk gerakan shalat yang dikemas kedalam PDF yang bisa di download oleh pengguna. Fitur ini bertujuan sebagai informasi tentang gerakan shalat yang dapat didownload pengguna untuk dipelajari.
Pembuatan wireframe ini sekaligus menjelaskan fitur yang terdapat di fitur Gerakan Shalat gurungaji.com.
Setelah membuat wireframe selanjutnya saya membuat High Fidelity Design dan Mockup.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview. Setelah diriview dan disepakati Selanjutnya saya membuat fitur Malaikat dan Tugasnya.
Selanjutnya saya membuat wireframe dan High Fidelity Design untuk fitur Malaikat dan Tugasnya sesuai kebutuhan dan ada beberapa tambahan yang menurut saya berguna untuk pengguna. Fitur ini seperti ebook dan bertujuan sebagai media baca untuk menambah pengetahuan tentang nama malaikat dan tugasnya.
Pembuatan wireframe ini sekaligus membantuk wireflow dan menjelaskan fitur yang terdapat di fitur Malaikat dan Tugasnya gurungaji.com.
Setelah membuat wireframe selanjutnya saya membuat High Fidelity Design dan Mockup.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview. Setelah diriview dan disepakati Selanjutnya saya membuat fitur Kisah Nabi.
Selanjutnya saya membuat wireframe dan High Fidelity Design untuk fitur Kisah Nabi sesuai kebutuhan dan ada beberapa tambahan yang menurut saya berguna untuk pengguna. Fitur ini seperti ebook dan saya menambahkan fitur dimana bisa memutar audio yang berisi kisah nabi dimana pengguna bisa mendengar kisah nabi tanpa membaca. Fitur ini bertujuan sebagai media baca untuk menambah pengetahuan tentang kisah nabi untuk pengguna.
Pembuatan wireframe ini sekaligus membantuk wireflow dan menjelaskan fitur yang terdapat di fitur Kisah Nabi gurungaji.com.
Setelah membuat wireframe selanjutnya saya membuat High Fidelity Design dan Mockup.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview. Setelah diriview dan disepakati mungkin beberapa fitur di dalam fitur Tuntunan Shalat ada yang tidak bisa di implementasikan dikarenakan timeline dan kurangnya Sumber Daya Manusia atau pekerja. Selanjutnya saya membuat fitur Tuntunan Shalat.
Selanjutnya saya membuat wireframe dan High Fidelity Design untuk fitur Tuntunan Shalat sesuai kebutuhan dan ada beberapa tambahan yang menurut saya berguna untuk pengguna. Fitur ini seperti ebook dan bertujuan sebagai media baca untuk menambah pengetahuan tentang Tuntunan Shalat bagi pengguna.
Pembuatan wireframe ini sekaligus membantuk wireflow dan menjelaskan fitur yang terdapat di fitur Tuntunan Shalat gurungaji.com.
Setelah membuat wireframe selanjutnya saya membuat High Fidelity Design dan Mockup.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview. Setelah diriview dan disepakati Selanjutnya saya membuat fitur Video Kajian.
Selanjutnya saya membuat wireframe dan High Fidelity Design untuk fitur Video Kajian sesuai kebutuhan dan ada beberapa tambahan yang menurut saya berguna untuk pengguna. Fitur ini bertujuan sebagai media untuk menonton kajian tentang islam.
Pembuatan wireframe ini sekaligus membantuk wireflow dan menjelaskan fitur yang terdapat di fitur Video Kajian gurungaji.com.
Setelah membuat wireframe selanjutnya saya membuat High Fidelity Design dan Mockup.
Selanjutnya saya serahkan desain kepada owner dan tim IT untuk di riview.
Terima kasih sekian proses saya untuk pembuatan desain untuk aplikasi gurungaji.com.