top of page

seajar - bimbel online dengan metode vark

Apps Name

Seajar

Year

2022

Hai, semuanya! Di kesempatan kali ini aku bakal share process design timku saat final project di Binar Academy x Kampus Merdeka. 

Anchor 1

Disclaimer : Ini adalah hasil eksplorasiku untuk final project di Binar Academy. Here I share the process to complete this challenge. Final project ini dilakukan bersama tim Product Manager dengan metode scrum sebanyak 3 sprint selama masing-masing 2 minggu/sprint.

Roles and Responsibilities

Dalam pengerjaan final project ini, aku bertanggung jawab menangani seluruh UI yang ada pada aplikasi ini yang mana saya sebagai UI Designer dalam tim.

Challenges

Pada penyelesaian proses desain final project ini, menurut saya hal yang cukup baru bagi saya adalah bagaimana tim ui/ux bekerja bersama dengan tim PM dalam mengembangkan sebuah product based on kebutuhan user. Sangat menchallenge diriku karena dalam pegerjaannya menggunakan metode scrum, sehingga terus melakukan proses iteratif.

Background

Munif Chatib menyatakan bahwa banyaknya kegagalan siswa dalam menerima informasi disebabkan ketidaksesuaian antara metode mengajar guru dengan gaya belajar siswa. Hal ini sesuai dengan pendapat S. Nasution yang mengatakan bahwa setiap metode mengajar tergantung pada cara atau gaya belajar, pribadi, dan kesanggupannya. Oleh karena itu, guru dalam mengajar harus memperhatikan gaya belajar siswa. Masalahnya adalah fenomena yang terjadi di Indonesia memperlihatkan penggunaan teori gaya belajar di sekolah belum diterapkan. Sebagian besar guru masih menerapkan metode ceramah (konvensional) dalam kegiatan pembelajaran.

Processes

Untuk memvalidasi dan menyelesaikan masalah diatas, kami menggunakan metode design thinking sebagai metode penyelesaiannya.

​

Design thinking is creative and collaborative problem solving to produce more empathetic and innovative solutions. - By David Kelley and Tim Brown, IDEO founder

 . . .

Design Thinking

Step 1. Empathize

Pertama, untuk memvalidasi permasalahan, mencari pain point, what user needs and behaviour dari user. Di fase ini, tim meng conduct research dengan melakukan user interview kepada 5 orang responden.

Research Plan

User in-depth-interview dilakukan karena dapat menggali pertanyaan sedalam mungkin dan mendapatkan jawaban yang akan lebih detail ke masing-masing personal.

Research Plan

User In-depth-interview guide

Interview guide

User Interview

Sebelum menyusun research plan, secara kami sudah memikirkan hipotesis dari permasalahan yang ada. Lalu mulai menyusun stimulus riset untuk interview user. Interview user dilakukan untuk mencari tahu lebih lanjut mengenai behavior, pain points, dan kebutuhan user. Interview dilakukan kepada siswa SD/SMP/SMA yang pernah mengikuti pembelajaran di luar sekolah. Kami melakukan interview ke 5 responden.

Interview Result

  • Dari 5 user yang di interview, 4 diantaranya memiliki pola belajar sambil mendengarkan musik

  • Dari 5 user yang di interview, 4 diantaranya mengikuti les diluar jam sekolah

  • Dari 5 user yang di interview, 3 diantaranya lebih memahami materi dengan mendengarkan penjelasan dari guru, sedangkan 2 lainnya lebih suka melihat video pembelajaran

  • Dari 5 user yang di interview, 4 diantaranya pernah / sedang menggunakan aplikasi learning online

  • Dari 5 user yang interview, semua mengatakan mudah bosan belajar dikarenakan metode belajar yang monoton.

  • Dari 5 user yang interview, semua memiliki masalah ketika suasana belajar tidak menyenangkan

  • Dari 5 user yang interview, semua mengatakan, metode belajar siswa berbeda dengan cara guru mengajar. Dimana guru lebih sering meminta untuk membaca buku dan menjelaskan hanya sesuai yang ada di buku saja (terlalu textbook). Kasus ekstrim, guru lebih banyak cerita tentang kehidupan pribadi daripada menjelaskan materi.

  • Dari 5 user yang di interview, 4 diantaranya kesulitan memahami materi jika dalam keadaan berisik.

  • Dari 5 user yang interview, semua mengatakan, gaya belajar beda dengan cara guru mengajar dikelas.

  • Adapun masalah-masalah lainnya berupa : Guru gaptek, tidak bisa pakai tools, Jaringan yang tidak stabil, kurang memahami materi jika belajar online karena tidak ada live session.

Chart hasil interview

Empathy Map

Untuk membantu kami dalam mengartikan dan mengelompokkan pengguna, kami membuat empathy maps dengan mengelompokkan berdasarkan apa yang mereka rasakan, pikirkan, lakukan dan bicarakan. 

 . . .

Step 2. Define

Setelah mendapatkan insights dari user, mulai mendefinisikan seperti apa pengguna aplikasi kami. Lalu mulai mendefine masalah apa yang akan diselesaikan. Disini kami melakukan competitor analysis untuk membantu kami mengetahui SWOT dari aplikasi edutech sejenis. Lalu kami membuat user persona untuk membantu kami memahami seperti apa user aplikasi kami. Kami juga membuat user journey map untuk mengetahui dibagian mana kami bisa melakukan improvisasi desain.

Competitor Analysis

Kami melakukan competitor analysis dengan aplikasi di bidang edutech yang sejenis, untuk membantu kami dalam mencari peluang yang bisa kami gunakan saat melakukan ideate fitur.

Competitor analysis

User Persona

Berikut adalah user persona dari aplikasi kami. Untuk mengembangkan aplikasi ini, kami memakai user persona ini untuk membantu mendefine target user aplikasi ini. Kami membuat 4 user persona sesuai dengan gaya belajar mereka.

User persona - Visual

User persona - Auditori

User persona - Membaca dan menulis

User persona - Kinestetik

User Journey

User journey digunakan untuk membantu tracking di fase apa user merasa masih kurang bahagia atau bahkan kesal. Pada tahap awal ini, kami membuat user journey sebelum desain atau product dibuat. Sehingga skenarionya adalah saat siswa akan mengulas materi yang telah didapat di sekolah.

User journey - Sebelum desain

Pain Points

Dari user persona, user journey, dan juga competitor analysis setelah kami melakukan interview didapat beberapa pain points yang dirasakan oleh responden yaitu target user kami. Berikut adalah daftar pain points yang mereka rasakan:

  • Siswa cenderung mudah bosan belajar

  • Suasana belajar yang tidak menarik siswa

  • Siswa tidak menyukai belajar dalam keadaan sunyi

  • Metode belajar siswa berbeda dengan cara guru mengajar

  • Kesulitan memahami materi jika dalam keadaan berisik karena sulit dalam berkonsentrasi

  • Gaya belajar siswa berbeda dengan cara guru mengajar di kelas

  • Tidak suka belajar jika hanya menggunakan metode membaca teks saja

  • Ada beberapa guru yang gagap teknologi dan tidak bisa menggunakan tools

  • Jaringan guru dan siswa terkadang tidak stabil

  • Siswa cenderung mudah bosan belajar

  • Suasana belajar yang tidak menarik siswa

  • Siswa tidak menyukai belajar dalam keadaan sunyi

  • Metode belajar siswa berbeda dengan cara guru mengajar

  • Kesulitan memahami materi jika dalam keadaan berisik karena sulit dalam berkonsentrasi

  • Gaya belajar siswa berbeda dengan cara guru mengajar di kelas

  • Tidak suka belajar jika hanya menggunakan metode membaca teks saja

  • Ada beberapa guru yang gagap teknologi dan tidak bisa menggunakan tools

  • Jaringan guru dan siswa terkadang tidak stabil

Problem Statement

Setelah itu, kami membuat pernyataan masalah yang ingin kami selesaikan. Yaitu:

​

"Siswa merasa bahwa metode guru mengajar di sekolah membosankan, tidak efektif, dan metode yang diberikan tidak sesuai dengan kebutuhan mereka karena metode belajar mereka dirasa tidak cocok dengan metode guru dalam mengajar di kelas."

 . . .

Step 3. Ideate

Setelah mengetahui permasalahan apa yang akan diselesaikan, kami mulai membuat solusi dengan meng-ideate solusi seperti apa yang akan diberikan.

How-Might-We (HMW)

Untuk membantu menjawab dan memudahkan memikirkan solusi yang akan dibuat, kami membuat hmw terlebih dahulu. Yaitu:

​

"Bagaimana cara kita menyesuaikan metode pengajaran guru dengan gaya belajar siswa agar pembelajaran bisa berlangsung efektif dan sesuai dengan kebutuhan siswa?"

Alternative Solution

Lalu, kami membuat beberapa solusi dan mengelompokkannya sesuai dengan OK Idea, Best Idea, dan Moonshot Idea. Solusi yang dipakai adalah yang ada di bagian Best Idea.

Alternative Solution

Product - Seajar

Akhirnya kami memutuskan untuk membuat aplikasi "Seajar" untuk menjawab permasalahan di awal. Seajar adalah Seajar adalah aplikasi bimbingan belajar online berbasis website yang menggunakan metode VARK untuk mengetahui lebih jelas gaya belajar apa yang digunakan oleh user. Seajar adalah platform yang bergerak dibidang edukasi berbasis website dengan responsive website.

Logo Seajar

Product Color

Kami melakukan benchmarking dan voting branding warna aplikasi Seajar ini. Akhirnya kami memakai warna biru sebagai warna primary dan warna gold sebagai warna secondarynya. 

Warna biru, dapat menumbuhkan kepercayaan user kepada aplikasi, menumbuhkan rasa tenang dan nyaman di mata.

Dari harmonisasi warna, didapat warna yang cocok dengan warna biru adalah kuning. Selain itu, kuning dapat membuat kesan ceria.

Product Features

Setelah kami memutuskan aplikasi seperti apa yang ingin dibuat, tim UI/UX memberikan rekomendasi fitur apa saja yang akan dihadirkan di aplikasi ini. Lalu tim product manager melakukan prioritization dengan I.C.E framework dan juga Eisenhower metrics. Akhirnya didapat ditur dari aplikasi Seajar, yaitu:

​

  • Menyediakan fitur VARK Assesment

  • Menyediakan Live session dengan skema Focus Group Discussion

  • Menyediakan fitur Classroom + Reading Material

  • Menyediakan fitur Grup Diskusi by WA

  • Menyediakan kategorisasi Kelompok belajar sesuai hasil VARK

Sitemap

Setalah mengetahui seperti apa aplikasi yang akan dibuat dan fitur-fitur apa saja yang ada di aplikasi, kami tim UI/UX membuat sitemap untuk membantu kami dalam membuat page dan flow aplikasi.

Sitemap

User Flow

User flow berguna untuk tim UI/UX saat mendesain aplikasi dengan menggambarkan perjalanan atau tahap halaman mana saja yang dibuka ketika melakukan suatu proses.

User flow - Daftar

User flow - Masuk

User flow - Tes VARK

User flow - Beli Kelas

User flow - Gabung Kelas

User flow - Profil

 . . .

Step 4. Prototype

Step selanjutnya adalah prototyping, Setelah mengetahui aplikasi seperti apa yang ingin dibuat, lalu membuat low fidelity design atau biasa disebut wireframe dan mempercantik desain tersebut menjadi high-fidelity design.

Wireframe

Wireframe berguna untuk memberi gambaran kepada stakeholder seperti apa aplikasi yang akan dibuat. Agar tidak terlalu jauh apabila dirasa masih ada data atau bagian yang tidak dimunculkan diaplikasi.

Wireframe - Desktop

Wireframe - Mobile

Usability Testing - Low Fidelity Design

Setelah selesai membuat semua wireframe dari aplikasi, kami melakukan moderated usability testing via Zoom Meeting kepada user untuk beberapa objectives yaitu:

  • Untuk memvalidasi aplikasi terkait dengan flow apakah fit dengan user

  • Mengetahui feedback dari user terkait dengan flow

​

UT setelah wireframe dilakukan agar tidak terlalu jauh untuk melakukan improvement dari segi flow dan layout.

User Task

  1. Melakukan pendaftaran akun

  2. Melakukan tes VARK

  3. Melakukan enroll kelas

  4. Gabung kelas di google classroom

  5. Mengikuti live session

  6. Melakukan cek profil

  7. Keluar dari aplikasi

Usability Testing Result

Dari hasil usability testing didapatkan bahwa dari 7 task yang ada, user berhasil menyelesaikan semua task. Tetapi,

  • 1 user bingung apa yang harus dilakukan setelah melakukan tes VARK

  • 4 user merasa bingung ketika dialihkan ke tab lain dan tidak tahu mengenai link google classroom

  • 1 user bingung ketika pembuatan password harus kapital atau ada angkanya

  • 1 user merasa kebingungan ketika berhasil join google classroom bingung keluar dari tab google classroom

​

Dari hasil yang telah didapat, bisa dipakai perbaikan saat melakukan desain high fidelity.

User Journey - Setelah Desain Dibuat

User journey disini dilakukan untuk membantu tracking di fase apa user merasa masih kurang bahagia atau bahkan kesal. Setelah itu bisa dilakukan improvement saat membuat desain high fidelity.

User journey - Setelah desain dibuat

Room for Improvement

Dari usability testing dan user journey, didapat bahwa kita bisa melakukan beberapa improvement saat membuat desain high fidelity. Yaitu:

  1. Tidak ada keterangan syarat password yang harus dibuat

  2. Terlalu banyak berpindah ke tab lain, karena product masih product MVP sehingga kami masih memakai beberapa aplikasi pihak ketiga untuk kelancaran aplikasi

Moodboard

Setelah selesai mengetahui apa saja yang harus diperbaiki, mulai masuk ke tahap visualisasi. Moodboard digunakan untuk referensi desain aplikasi yang akan dibuat.

Moodboard

Tone of Voice

Tone of voice dibuat untuk keperluan UX Writing, digunakan untuk menyampaikan karakteristik aplikasi yang dilihat dari kata-kata dan gaya bahasa yang disampaikan dalam bentuk tulisan. Tone of voice dari aplikasi Seajar adalah sebagai berikut:

  1. Simple - Bahasa yang digunakan sangat sederhana sehingga dapat dimengerti oleh user dengan mudah

  2. Casual - Menggunakan bahasa sehari-hari dan tidak baku

  3. To the point - Makna yang dimiliki oleh setiap kata dalam desain ini dapat dengan mudah dipahami oleh user

Text Styles

Aplikasi ini memakai typeface "Poppins" yang dapat menciptakan playful, santai, tetapi tetap rapi. Setelah itu, aku membuat text styles untuk dipakai ke aplikasi agar konsisten.

Typeface

Text styles - Website

Text styles - Mobile

Color

Dalam menentukan warna primer aplikasi ini, kami memakai warna branding aplikasi. Lalu mencari-cari warna yang cocok untuk aplikasi ini lalu mencari warna turunannya dengan menggunakan plugin Tints and Shades yang ada di figma. Warna neutral digunakan untuk menyeimbangkan warna agar tidak terlalu colorful, warna primary adalah warna dari aplikasi sehingga warna tersebut akan sering digunakan, sedangkan warna secondary biasanya digunakan untuk aksen dengan penggunaan hanya kurang dari 30% dari keseluruhan aplikasi.

Primary Color

Secondary Color

Semantic Color - Success

Semantic Color - Danger/Error

Iconography

Pada aplikasi ini, icon yang dipakai adalah icon dengan styles outline yang santai dan tidak kaku. Karena target user adalah siswa yang bersekolah di bangku SD/SMP/SMA.

Iconography

High Fidelity Design

Setelah itu, kami membuat desain high-fidelity dengan member warna, text styles, komponen dan ilustrasi dengan melakukan beberapa improvement yang telah dibuat setelah melakukan usability testing di wireframe. Setelah jadi, mulai membuat prototyping agar user dapat menjalankan seperti layaknya aplikasi jadi dan user mendapatkan gambaran aplikasi ini.

High fidelity design - Desktop

High fidelity design - Mobile

Please click the italic link below to try the prototypes.

​

Prototype desktop version here!

​

Prototype mobile version here!

 . . .

Step 5. Test

Last but not least, kami melakukan testing dengan metode usability testing, heuristic evaluation dan system usability scale (SUS).

Usability Testing Final Design

Usability testing desain final dilakukan secara moderated via Zoom Meeting karena bisa mendapatkan feedback yang lebih dalam. Kami juga bisa mengetahui pergerakan, ekspresi, dan perkataan mereka. Final usability testing bertujuan untuk:

  1. Untuk memvalidasi aplikasi terkait dengan flow apakah fit dengan user

  2. Mengetahui feedback dari user terkait dengan desain high fidelity aplikasi

User Task

  1. Melakukan pendaftaran akun

  2. Melakukan tes VARK

  3. Melakukan enroll kelas

  4. Gabung kelas di google classroom

  5. Mengikuti live session

  6. Melakukan cek profil

  7. Keluar dari aplikasi

Usability Testing Result

Dari hasil usability testing didapatkan bahwa dari 7 task yang ada, user sudah dapat menyelesaikan task dengan mudah tanpa ada kendala ataupun hambatan.Tetapi,

  • 1 user merasa harga paket belajar kemahalan

Heuristic Evaluation

Tim UI/UX melakukan evaluasi terhadap desain yang telah dibuat. Dengan memberikan scoring pada masing-masing aspek usability heuristic. Diapatkan hasil scoring 2 pada bagian flexibility and efficiency to use. Karena dirasa mungkin user baru akan merasa kurang efisien terhadap flow yang ada.

System Usability Scale (SUS)

Pada perhitungan SUS Lo-Fi  didapat dengan skor sebesar 90,5 yang ada di grade "A", dengan adjective "Excellent", yang artinya dapat diterima dan juga layak untuk digunakan.

Need to be discuss/improve

Dari usability testing dan heuristic evaluationyang telah dilakukan, bisa didapat hasil yaitu:

  1. Mengubah dan mengatur ulang harga paket belajar

  2. Membenarkan UX writing agar lebih mudah dipahami oleh user

  3. Memberikan fitur filter pada halaman kelas yang tersedia

 . . .

Closing

That’s all the explanation of Binar academy's final project. Aku mendapatkan banyak insight dan wawasan baru terkait dengan design thinking dan juga pengembangan product dengan metode scrum, hope will be useful for me in the future. Feel free to comment, I am very open to receiving feedback and suggestions. Thank you for your time and attention to reading :)

​

Thanks to:

- Kak Korniawan Prabowo as a Fasilitator in UI/UX 10 Class 

- Kak Febryan Anugrah as a Fasilitator in PM 10 Class

- PM x UI/UX 10 Tim 1 karena telah memberikan effort terbaik mereka

- Binar Academy

bottom of page