Tugas SP User Experience Desain User

Interface Aplikasi E-Learning SMA

Nama Kelompok BA183:
1. I Gusti Ngurah Agung Gede Darmayuda Kusuma (190030133)
2. Pande Made Rama Maheswara Sudarmana (190030157)
3. I Gede Agus Adi Saputra (190030507)
4. Made Lesmana Dhananjaya (190030586)
 User Interface Aplikasi E-Learning SMA

1. Halaman Login
Halaman ini merupakan tampilan awal aplikasi
yang berisikan menu login agar pengguna
dapat masuk lebih lanjut untuk melihat isi
aplikasi.

Terdapat kolom ID, kolom Password,

Tombol Login, dan opsi pemulihan
akun.
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

Logo, Tombol pencarian, notifikasi, dan pesan

Riwayat Akses Materi terakhir

2. Halaman Utama
Halaman ini merupakan halaman kedua
Informasi jumlah pengguna
setelah halaman login. Pengguna dapat
yang sedang aktif dan tanggal
melihat fitur dan menu apa saja yang tersedia
pada aplikasi E-Learning SMA.

Terdapat infografis
pencapaian siswa

Tombol halaman utama, materi,

latihan, akun, dan logout
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

3. Halaman Materi 1
Halaman ini merupakan halaman ketiga
setelah halaman utama. Pengguna dapat
melihat kumpulan materi pembelajaran yang Menu-menu materi pembelajaran.

tersedia dan dapat dipilih oleh siswa. Pengguna dapat swipe untuk
melihat lebih banyak.
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

4. Halaman Materi 2 Materi pembelajaran

yang sedang diputar
Halaman ini merupakan halaman keempat
setelah halaman materi 1. Yang dimana
berisikan video pembelajaran yang diunggah
oleh guru mata pelajaran.
Opsi mendownload materi pembelajaran.

Kumpulan video lainnya yang tersedia.

Pengguna dapat swipe ke arah kiri.
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

5. Halaman Latihan 1
Halaman ini merupakan halaman kelima
setelah halaman materi 2. Pengguna dapat
melihat kumpulan materi pembelajaran yang
tersedia dan dapat dipilih oleh siswa.

Menu-menu latihan soal dari guru-guru.

Pengguna dapat swipe untuk melihat
lebih banyak.
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

6. Halaman Latihan 2 Informasi mengenai latihan soal

yang sedang dikerjakan, latihan soal
Halaman ini merupakan halaman keenam
lainnya, dan jumlah soal yang ada.
setelah halaman latihan 1. Pengguna dapat
mengerjakan dan menjawab latihan soal.

Pengerjaan latihan soal dan

mengirim jawaban latihan

Perhitungan waktu
pengerjaan yang tersisa
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

7. Menu Pencarian
Menu ini merupakan halamam pop up untuk Muncul hasil pencarian

mencari informasi yang relevan berdasarkan

kata kunci yang diketikkan pada kolom
pencarian.
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

Muncul notifikasi saat guru menggungah

materi baru ataupun latihan soal baru.

8. Menu Notifikasi
Menu ini merupakan halaman pop up yang
berisikan informasi pemberitahuan.
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

Muncul pesan, seorang guru yang memberikan

9. Menu Pesan pengumuman bertanya bagi siswa, kemudian

siswa dapat memberikan komentarnya.
Menu ini merupakan halaman pop up yang
berisi pesan disampaikan langsung oleh guru.
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

10. Halaman Akun

Halaman Akun ini merupakan halaman yang
berisikan informasi akun diantaranya yaitu
foto profil dan user ID.

Terdapat pilihan kolom yang dapat digunakan

pengguna untuk mengganti kata sandi lama
dengan kata sandi baru.
User Interface Aplikasi E-Learning SMA
 User Interface Aplikasi E-Learning SMA

11. Halaman Logout

Halaman Logout ini merupakan halaman pop
up persetujuan apakah akan keluar dari akun
ini.

Persetujuan ini untuk mencegah tombol logout

terpencet tidak sengaja
User Interface Aplikasi E-Learning SMA
 Job Desc Anggota Kelompok
1. I Gusti Ngurah Agung Gede Darmayuda Kusuma (190030133)
- Mengedit dan dan menyusun User Interface di Aplikasi Figma.
- Membuat slide presentasi & tampilan mockup perangkat.

2. Pande Made Rama Maheswara Sudarmana (190030157)

- Mengedit dan menyusun User Interface di Aplikasi Figma.
- Mencari Referensi User Interface.

3. I Gede Agus Adi Saputra (190030507)

- Mengedit dan menyusun User Interface di Aplikasi Figma.

4. Made Lesmana Dhananjaya (190030586)

- Mengedit dan menyusun User Interface di Aplikasi Figma.
Sekian dan Terimakasih