Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 2025, 237-245
Journal of Digital Business and Technology Innovation (DBESTI) https://journal.
id/index.
php/DBESTI P-ISSN: 3047-1028 E-ISSN: 3032-775X
IMPLEMENTASI UI/UX APLIKASI MOBILE TEEPTIES UNTUK
MONITORING PERKEMBANGAN SISWA SDIT BINA AULADI
MENGGUNAKAN METODE DESIGN THINKING
Nabilah Khariyyah1.
Krisna Panji2.
Shelly Pramudiawardani3 Sistem Informasi.
Sekolah Tinggi Teknologi Terpadu Nurul Fikri Bisnis Digital.
Sekolah Tinggi Teknologi Terpadu Nurul Fikri Jakarta Selatan.
DKI Jakarta.
Indonesia 12640 nabi21016si@student.
id, panji@nurulfikri.
id, shelly@nurulfikri.
Abstract This study aims to design the user interface and user experience (UI/UX) for a mobile application called TeepTies, which monitors student development at SDIT Bina Auladi.
The main problem identified at the school is the lack of structured communication between teachers and parents regarding studentsAo development, especially in non-academic aspects.
The Design Thinking method was chosen because it focuses on user needs and encourages innovative solutions through an iterative process that involves a deep understanding of the problem.
This study follows the five stages of Design Thinking: empathize, define, ideate, prototype, and test.
The design resulted in a mobile-based prototype application featuring academic and nonacademic development reports, attendance, direct messaging, and announcements.
Evaluation was conducted through usability testing and the System Usability Scale (SUS), with an average score of 72.
3, which falls into the "Acceptable" category, indicating that users will receive the application design.
TeepTies is expected to become an effective digital solution in enhancing collaboration between teachers and parents in monitoring students' development at school.
Keywords: Design Thinking.
Mobile Application.
Student Monitoring.
TeepTies.
UI/UX Abstrak Penelitian ini bertujuan untuk merancang user interface dan user experience (UI/UX) aplikasi mobile bernama TeepTies yang digunakan untuk memantau perkembangan siswa di SDIT Bina Auladi.
Permasalahan yang ditemukan di sekolah ini adalah kurangnya komunikasi terstruktur antara guru dan orang tua terkait perkembangan siswa, terutama dalam aspek non-akademik.
Metode Design Thinking dipilih karena pendekatan ini berfokus pada kebutuhan pengguna dan mendorong solusi inovatif melalui proses iteratif yang melibatkan pemahaman mendalam terhadap permasalahan.
Penelitian ini mengikuti lima tahapan Design Thinking, yaitu empathize, define, ideate, prototype, dan test.
Hasil perancangan menghasilkan prototype aplikasi berbasis mobile dengan berbagai fitur seperti laporan perkembangan akademik dan non-akademik, absensi, pesan langsung, dan pengumuman.
Evaluasi dilakukan melalui usability testing dan System Usability Scale (SUS), dengan nilai rata-rata SUS sebesar 72,3 yang termasuk dalam kategori "Acceptable", menunjukkan bahwa rancangan aplikasi dinilai baik oleh pengguna.
Aplikasi TeepTies diharapkan dapat menjadi solusi digital yang efektif dalam meningkatkan kolaborasi antara guru dan orang tua dalam memantau perkembangan anak di sekolah.
Kata kunci: Aplikasi Mobile.
Design Thinking.
Monitoring Siswa.
TeepTies.
UI/UX PENDAHULUAN Perkembangan teknologi digital telah membawa dampak signifikan dalam berbagai aspek kehidupan, termasuk dalam sektor pendidikan.
Salah satu dampaknya adalah meningkatnya kebutuhan akan sistem informasi yang mampu memfasilitasi komunikasi antara berbagai pemangku kepentingan di lingkungan sekolah.
Maka dari itu, penting bagi orang tua untuk terlibat dalam pendidikan anak mereka dan memiliki akses ke informasi yang relevan untuk mendukung perkembangan anak secara keseluruhan .
Di tingkat sekolah dasar, terutama sekolah berbasis nilai-nilai Islam seperti SDIT Bina Auladi, kolaborasi antara Diterima 10 Juli 2025.
Direvisi 11 Desember 2025.
Diterima untuk publikasi 11 Desember 2025 238 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 guru dan orang tua menjadi kunci penting dalam memastikan perkembangan siswa berjalan dengan baik, baik secara akademik maupun non-akademik.
Namun, berdasarkan observasi dan wawancara dengan pihak sekolah, proses pelaporan perkembangan siswa saat ini masih dilakukan secara manual melalui buku penghubung dan grup pesan instan seperti WhatsApp.
Sistem ini dinilai kurang efektif karena informasi yang disampaikan sering kali tercecer, tidak terdokumentasi dengan baik, dan sulit untuk diakses kembali.
Kendala komunikasi ini juga menyebabkan orang tua tidak mendapatkan gambaran menyeluruh mengenai kondisi anak selama di sekolah.
Informasi baru diterima ketika pembagian rapor atau jika orang tua secara aktif bertanya.
Hal ini tentu menjadi hambatan dalam membangun pemantauan perkembangan siswa yang berkelanjutan dan berorientasi pada kolaborasi.
Seiring dengan meningkatnya penggunaan smartphone oleh masyarakat, termasuk oleh guru dan orang tua siswa, pemanfaatan aplikasi mobile berbasis kebutuhan pengguna dinilai sebagai solusi yang potensial .
Aplikasi ini diharapkan dapat membantu guru dalam menyampaikan informasi perkembangan siswa secara lebih terstruktur dan membantu orang tua dalam mengakses informasi tersebut secara real-time, tanpa mengganggu proses belajar mengajar.
Sistem informasi yang baik dirancang tidak hanya untuk menyampaikan informasi, tetapi juga memperhatikan aspek pengalaman pengguna .
ser experience/UX) dan tampilan antarmuka pengguna .
ser interface/UI) agar sistem mudah dipahami, menarik, dan nyaman digunakan.
Oleh karena itu, metode yang digunakan dalam perancangan aplikasi ini adalah metode Design Thinking, yaitu pendekatan iteratif dan human-centered yang berfokus pada pemahaman kebutuhan pengguna, menghasilkan solusi desain yang inovatif melalui tahapan empathize, define, ideate, prototype, dan test .
, .
Berdasarkan latar belakang tersebut, maka penelitian ini bertujuan untuk merancang UI/UX dari aplikasi mobile bernama TeepTies yang digunakan oleh guru dan orang tua siswa SDIT Bina Auladi dalam memantau perkembangan Aplikasi ini mencakup fitur utama seperti laporan perkembangan akademik dan non-akademik, absensi, pengumuman sekolah, serta komunikasi langsung.
Penelitian juga melakukan evaluasi desain dengan usability testing dan pengukuran System Usability Scale (SUS) sebagai tolak ukur kelayakan rancangan dan mengukur tingkat kepuasan pengguna dengan cara memberikan kuesioner kepada pengguna setelah menggunakan aplikasi .
Diharapkan, hasil dari penelitian ini dapat memberikan kontribusi dalam pengembangan solusi digital pendidikan yang efektif, efisien, dan user-friendly, serta dapat diimplementasikan secara nyata di lingkungan sekolah dasar Islam terpadu.
User Interface (UI) adalah tampilan visual dari produk digital seperti aplikasi atau situs web, yang mencakup elemen-elemen seperti teks, ikon, tombol, layout, warna, dan tipografi untuk memfasilitasi interaksi pengguna dengan sistem .
Desain UI yang baik tidak hanya berfungsi secara estetika, tetapi juga meningkatkan kemudahan dan kepercayaan pengguna melalui tampilan yang informatif dan responsif .
, .
Sementara itu.
User Experience (UX) merujuk pada pengalaman keseluruhan yang dirasakan pengguna saat berinteraksi dengan sistem UX mencakup aspek kenyamanan, kepuasan, dan efektivitas penggunaan, serta melibatkan persepsi dan emosi pengguna terhadap kemudahan sistem .
, .
Keduanya saling melengkapi dalam menciptakan antarmuka yang tidak hanya menarik secara visual, tetapi juga menyenangkan dan efisien saat digunakan Design Thinking adalah suatu metode desain untuk mengatasi masalah perancangan prototype aplikasi dengan cara memahami kebutuhan pengguna yang terlibat dalam Terdapat lima proses tahapan dalam metode Design Thinking di antaranya adalah Emphatize.
Define.
Ideate.
Prototype, dan Test .
Menurut Madawara, pengerjaan rancangan desain menggunakan Design Thinking dilakukan secara terstruktur namun tetap fleksibel agar dapat menemukan strategi dan solusi alternatif yang tidak langsung terlihat pada pemahaman awal.
Dalam prosesnya terdiri beberapa tahapan penting seperti membuat sketsa atau wireframe, membangun prototype, melakukan pengujian, 8 serat mengevaluasi ide untuk memastikan solusi yang dihasilkan efektif dan sesuai dengan kebutuhan pengguna .
Tahapan design thinking dapat dilihat pada Gambar 1.
Gambar 1.
Tahapan Design Thinking Research and Development (R&D) merupakan salah satu metode penelitian untuk menghasilkan sebuah produk baru yang menggunakan pendekatan sistematik.
Produk yang dibuat akan diuji efektivitasnya dengan melalui serangkaian tahapan seperti analisis kebutuhan, design, uji coba lapangan, dan evaluasi .
Usability Testing merupakan teknik evaluasi yang melibatkan pengguna secara langsung untuk menilai kualitas dan kemudahan penggunaan suatu produk .
, .
Metode ini digunakan dalam penelitian untuk menguji prototype aplikasi TeepTies, dengan mengacu pada lima 239 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 aspek utama menurut Nielsen, yaitu: learnability, efficiency, memorability, errors, dan satisfaction .
System Usability Scale (SUS) merupakan metode evaluasi yang digunakan untuk mengukur kepuasan dan persepsi pengguna terhadap kegunaan suatu sistem melalui sepuluh pernyataan kuesioner yang dinilai setelah penggunaan aplikasi .
, .
Lima pernyataan bersifat positif dan lima negatif, sehingga memberikan penilaian yang seimbang dan cepat terhadap usability produk .
Berikut adalah daftar pertanyaan SUS menurut John Brooke pada Tabel 1.
Tabel 1.
Daftar Pernyataan SUS John Brooke Pernyataan Saya merasa akan sering menggunakan sistem ini.
Saya merasa sistem ini tidak perlu dukungan teknis untuk bisa Saya merasa sistem ini mudah digunakan.
Saya merasa perlu bantuan dari orang yang memiliki pengetahuan teknis untuk menggunakan sistem ini.
Saya merasa berbagai fungsi dalam sistem ini terintegrasi dengan baik.
Saya merasa ada terlalu banyak inkonsistensi dalam sistem ini.
Saya merasa kebanyakan orang akan cepat mempelajari cara menggunakan sistem ini.
Saya merasa sistem ini sangat rumit untuk digunakan.
Saya merasa percaya diri dalam menggunakan sistem ini.
Saya harus banyak belajar terlebih dahulu sebelum bisa menggunakan sistem ini.
Untuk mendapatkan kategori apakah sistem bernilai baik dan dinyatakan acceptable, maka diperlukan rumus untuk menghitung skor yang didapat.
Berikut adalah rumus yang ycu= Ocycu ycu Keterangan:
ycu = Skor rata-rata Ocycu = Jumlah skor SUS ycu = Jumlah responden Setelah mengetahui skor rata-rata yang dihasilkan, maka akan mengacu terhadap nilai penilaian skor SUS.
Acuan penilaian skor SUS yang didapat dapat dilihat pada Gambar Gambar 2.
Skor SUS
METODE PENELITIAN
Untuk mengetahui kebutuhan pengguna secara mendalam, 1 Metode pengumpulan data Dalam penelitian ini, metode pengumpulan data dilakukan secara tidak langsung dengan pendekatan kualitatif.
Peneliti menggunakan kuesioner terbuka yang disebarkan melalui Google Form sebagai alat untuk menggali kebutuhan pengguna, khususnya guru wali kelas dan orang tua siswa SDIT Bina Auladi.
Teknik ini dipilih karena dinilai efektif untuk mengumpulkan informasi secara fleksibel tanpa tatap muka, mengingat waktu pengguna yang terbatas.
2 Instrumen penelitian Instrumen utama dalam penelitian ini terdiri dari kuesioner terbuka yang digunakan untuk memperoleh data kebutuhan pengguna, serta prototipe aplikasi yang dirancang melalui platform Figma.
Prototipe ini digunakan dalam tahap pengujian guna melihat interaksi nyata dari pengguna.
3 Metode pengujian Pengujian dilakukan dengan metode usability testing yang berbasis skenario tugas.
Guru dan orang tua diminta menyelesaikan beberapa aktivitas penting dalam prototipe, seperti mengakses laporan perkembangan siswa, melihat pengumuman, dan mengirim pesan kepada guru atau orang Setelah menyelesaikan tugas tersebut, pengguna diminta mengisi kuesioner SUS untuk memberikan evaluasi terhadap pengalaman mereka saat menggunakan prototipe.
Hasil kuantitatif dari SUS dijadikan dasar untuk menilai tingkat keberterimaan dan efektivitas antarmuka pengguna yang telah dikembangkan.
240 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 4 Tahapan penelitian solusi terhadap masalah yang telah ditentukan.
Pada tahap ini, penting untuk menciptakan ide sebanyak-banyaknya tanpa batas sebelum memilih ide yang paling baik.
Prototyping Setelah mendapatkan ide, penulis mulai membuat rancangan aplikasi dari solusi yang diusulkan.
Prototype ini berawal dari beberapa tahapan bentuk, diantaranya adalah berbentuk wireframe.
Lo-Fi Design.
Hi-Fi Design, hingga tahapan terakhir yaitu prototyping.
Testing Prototype kemudian diuji oleh pengguna untuk mengevaluasi kegunaannya dan seberapa baik solusi memenuhi kebutuhan mereka.
Proses pengujian ini penting untuk mendapatkan umpan balik langsung dari pengguna tentang kelebihan dan kekurangan prototype.
Evaluasi Setelah proses pengujian, umpan balik yang dikumpulkan akan dianalisis dan digunakan untuk mengevaluasi efektivitas prototype.
Selama fase ini, penulis akan mengidentifikasi bagian yang perlu ditingkatkan.
Gambar 3.
Tahapan Penelitian Berdasarkan alur pada Gambar 3, berikut merupakan penjelasan mengenai tahapan penelitian yang dilakukan .
Analisis Permasalahan Pada tahap ini, masalah yang ingin dipecahkan teridentifikasi dengan jelas.
Hal ini mencakup pemahaman tujuan utama proyek serta tantangan dan kebutuhan Fase ini penting untuk memastikan bahwa penulis memahami lingkup masalah yang sedang HASIL DAN PEMBAHASAN 1 Empathy Map Empathy map dibuat untuk memahami kebutuhan, perilaku, sikap, dan emosi calon pengguna dengan detail yang lebih luas, eksploratif, dan sesuai dengan 4 hal yang ada pada empathy map, yaitu says, thinks, feel, dan do.
Gambar 4 menunjukkan empathy map guru wali kelas sedangkan Gambar 5 menunjukkan empathy map orang tua.
Empathize Fase ini dilakukan untuk memperoleh pemahaman yang mendalam mengenai permasalahan dan kebutuhan guru dan orang tua siswa dalam memberikan dan mendapatkan Tahapan ini dilakukan melalui wawancara langsung kepada guru serta penyebaran kuesioner melalui Google Form kepada orang tua siswa.
Define Merumuskan masalah dengan lebih jelas dan spesifik berdasarkan data yang dikumpulkan dan pemahaman dari tahap empati.
Tujuannya adalah untuk membuat pertanyaan yang disesuaikan dengan kebutuhan pengguna.
Hal ini menjadi dasar untuk mengembangkan solusi selanjutnya.
Ideate Pada fase ini, penulis melakukan Brainstorming untuk menghasilkan berbagai ide kreatif yang dapat memberikan Gambar 4.
Empathy Map Guru/Wali Kelas 241 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 lebih mudah dianalisis dan ditindaklanjuti dalam proses perancangan desainnya berdasarkan pola kebutuhan dan masalah yang serupa.
Affinity diagram membantu peneliti untuk memahami prioritas dan hubungan antar informasi dari hasil eksplorasi kuesioner sebelum masuk ke tahapan selanjutnya, yaitu Brainstorming, user flow, dan pembuatan design system.
Gambar 8 dan Gambar 9 adalah visualisasi affinity diagram berdasarkan dua pengguna utama, yaitu guru wali kelas dan orang tua siswa.
Gambar 5.
Empathy Map Orang Tua 2 User Persona User Persona dibuat untuk mengidentifikasi karakteristik, kebutuhan, tujuan, dan permasalahan utama dari pengguna target secara fiktif namun berdasarkan data nyata, sehingga membantu peneliti dalam memahami sudut pandang pengguna dan merancang solusi yang lebih tepat sasaran.
User persona guru wali kelas ditunjukkan oleh Gambar 6 dan user persona orang tua ditunjukkan oleh Gambar 7.
Gambar 8.
Affinity Diagram Guru Wali Kelas Gambar 6.
User Persona Guru Wali Kelas Gambar 9.
Affinity Diagram Orang Tua 4 Brainstorming Brainstorming dilakukan untuk menggali berbagai ide, permasalahan, dan kebutuhan pengguna.
Metode ini membantu mengidentifikasi masalah-masalah utama yang dihadapi oleh guru dan orang tua dalam komunikasi serta pelaporan perkembangan siswa.
Gambar 10 dan Gambar 11 adalah visualisasi Brainstorming berdasarkan dua pengguna utama, yaitu guru wali kelas dan orang tua siswa.
Gambar 7.
User Persona Orang Tua 3 Affinity Diagram Affinity diagram digunakan untuk mengelompokkan berbagai ide atau opini berdasarkan kesamaan makna agar 242 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 Gambar 10.
Brainstorming Guru Wali Kelas Gambar 12.
User Flow Guru Wali Kelas Gambar 11.
Brainstorming Orang Tua 5 User Flow User flow dilakukan untuk menggambarkan alur interaksi pengguna dalam menggunakan aplikasi, mulai dari proses login hingga mengakses berbagai fitur yang disediakan.
Diagram ini membantu memastikan bahwa setiap langkah penggunaan aplikasi berjalan logis, efisien, dan sesuai kebutuhan pengguna.
User flow pada Gambar 12 dan Gambar 13 berikut digunakan untuk memvisualisasikan alur tersebut dalam pengembangan aplikasi.
Gambar 13.
User Flow Orang Tua 6 Wireframe Sebelum melanjutkan ke tahap membuat prototype, maka penulis membuat tampilan kerangka awal terlebih dahulu untuk memberikan gambaran sebelum aplikasi dibuat.
Wireframe dapat dilihat pada Gambar 14 berikut.
Gambar 14.
Wireframe 243 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 7 Prototipe Setelah wireframe sudah selesai dirancang, tahap selanjutnya adalah menyusun high-fidelity design (Hi-fi Desain ini menampilkan versi visual yang lebih detail, termasuk elemen warna, ikon, tipografi, dan gaya UI lainnya sesuai dengan design system yang telah ditentukan.
Hi-fi design memungkinkan pengguna melihat gambaran akhir aplikasi dengan lebih jelas dan memberikan masukan sebelum masuk ke tahap implementasi teknis.
Desain yang ditampilkan pada tahap ini menjadi acuan dalam pengembangan aplikasi, serta digunakan dalam pengujian usability pada tahap selanjutnya.
Pada Gambar 15 terdapat tampilan dashboard untuk guru wali kelas yang memiliki fitur kalender, absensi, menambah daftar siswa serta memperbarui laporan perkembangan siswa.
Selanjutnya pada Gambar 16 terdapat tampilan dashboard orang tua siswa yang memiliki fitur kalender, report absensi, hingga perkembangan dan catatan akademik maupun non akademik.
Gambar 16.
Dashboard Orang Tua Siswa 8 Testing Pada tahap test, dilakukan evaluasi terhadap prototipe aplikasi TeepTies menggunakan metode usability testing dan System Usability Scale (SUS).
Pengujian dilakukan secara unmoderated, di mana partisipan menyelesaikan skenario tugas secara mandiri tanpa pendampingan langsung dari peneliti.
Sebanyak 24 partisipan terdiri dari 12 guru wali kelas dan 12 orang tua siswa, dipilih menggunakan teknik purposive sampling.
Seluruh partisipan menyelesaikan seluruh tugas dengan tingkat keberhasilan 100%.
Namun, ditemukan beberapa hambatan minor seperti tingginya misclick rate pada fitur input kode akses dan tambah siswa, serta waktu penyelesaian yang relatif lama pada fitur laporan non-akademik.
Setelah pengujian tugas, partisipan mengisi kuesioner SUS.
Adapun hasil dari SUS terdapat pada tabel 2 berikut.
Tabel 2.
Hasil SUS Gambar 15.
Dashboard Guru Wali Kelas Responden Total Hasil 244 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025
Responden
Total
Hasil
W10
W11
W12
O10
O11
O10
KESIMPULAN
Penelitian ini menghasilkan rancangan aplikasi TeepTies menggunakan pendekatan Design Thinking untuk memfasilitasi komunikasi antara guru dan orang tua di SDIT Bina Auladi.
Melalui tahapan empathize hingga test, ditemukan bahwa pengguna membutuhkan media pelaporan siswa yang lebih terstruktur dan terdokumentasi dibandingkan media konvensional seperti WhatsApp.
Prototipe dirancang dengan fitur utama seperti laporan perkembangan siswa, absensi, pengumuman, dan pesan Evaluasi dilakukan melalui usability testing dan System Usability Scale (SUS) dengan skor rata-rata 72,3, yang menunjukkan aplikasi berada dalam kategori AuAcceptableAy dan dinilai baik oleh pengguna.
Hasil ini membuktikan bahwa TeepTies mampu menjawab kebutuhan komunikasi digital yang efektif dan sesuai dengan konteks pengguna.
DAFTAR PUSTAKA