study-for-future

byEmma

Build an interactive study app for high school students. Which include: try out, challenge questions, daily question, daily task, points, and rewards. Including physics, economy, English, math, etc. language is in bahasa Indonesia. Where the question is auto generated and having really various types of questions. Don't forget to build and create the key answer and explanations after every session (not every question). Make that app interesting.Berikan juga untuk latihan soal TKA. Dan materi mulai dari TKA, snbt, ujian sekolah, ujian semester, hingga olimpiade, dan ilts/toefl

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

Page 1 of 18

System Requirements Document for study-for-future

1. Introduction

study-for-future adalah aplikasi belajar interaktif untuk siswa SMA (Sekolah Menengah Atas) di Indonesia, berusia sekitar 15–18 tahun. Produk ini dirancang untuk mengubah latihan soal menjadi pengalaman yang terasa seperti poster konser — tegang, berani, dan menyenangkan — bukan spreadsheet atau LMS korporat.

Aplikasi ini menyatukan empat mode latihan yang diminta secara eksplisit:

  • Try out — sesi latihan lintas subjek dan lintas jenjang materi.
  • Challenge questions — pertanyaan tantangan yang harus dijawab siswa.
  • Daily question — pertanyaan harian sebagai aktivitas belajar berkala.
  • Daily task — tugas belajar harian yang menghasilkan kemajuan aktivitas.

Seluruh aktivitas menghasilkan poin, dan poin dapat ditukar dengan hadiah. Soal di-generate otomatis dengan beragam tipe soal, mencakup subjek Fisika, Ekonomi, Bahasa Inggris, Matematika, dan subjek lain. Materi mencakup jenjang TKA, SNBT, ujian sekolah, ujian semester, hingga olimpiade, dan ILTS/TOEFL, termasuk latihan soal TKA.

Setelah setiap sesi selesai — bukan setelah setiap pertanyaan — aplikasi menyajikan kunci jawaban dan penjelasan. Seluruh antarmuka pengguna berbahasa Bahasa Indonesia.

Audiens: siswa SMA yang mempersiapkan TKA, SNBT, ujian sekolah, ujian semester, olimpiade, dan ILTS/TOEFL.

Page 2 of 18

2. System Overview

study-for-future adalah aplikasi web first-party dengan identitas milik aplikasi. Siswa mendaftar sendiri (pendaftaran mandiri), masuk kembali untuk melanjutkan state aktivitas, hasil sesi, poin, dan hadiah. Backend menyimpan sesi, hasil, kunci jawaban, penjelasan, poin, dan penukaran hadiah.

Aktor manusia aktif (satu-satunya): Siswa SMA (High School Student).

Aktor non-persona: layanan backend aplikasi (penyimpanan sesi, hasil, poin, hadiah, dan generator soal otomatis) — bukan persona, tidak memiliki antarmuka pengguna sendiri.

Perilaku yang diterima saat ini:

  • Empat mode latihan: try out, challenge questions, daily question, daily task.
  • Poin yang diperoleh dari aktivitas belajar dan hadiah yang dapat ditukar.
  • Soal auto-generated dengan beragam tipe soal.
  • Kunci jawaban dan penjelasan setelah setiap sesi (bukan setelah setiap soal).
  • Cakupan subjek: Fisika, Ekonomi, Bahasa Inggris, Matematika, dan subjek lain.
  • Cakupan jenjang materi: TKA, SNBT, ujian sekolah, ujian semester, olimpiade, ILTS/TOEFL.
  • Latihan soal TKA.
  • Bahasa antarmuka: Bahasa Indonesia.

Pengecualian sempit: tidak ada mode latihan di luar empat mode yang disebutkan; tidak ada jenjang materi di luar TKA, SNBT, ujian sekolah, ujian semester, olimpiade, dan ILTS/TOEFL; kunci jawaban dan penjelasan tidak ditampilkan per pertanyaan.

Page 3 of 18

2a. Product Interpretation and Delivery Boundary

Aplikasi ini dimiliki dan dioperasikan sebagai produk first-party dengan antarmuka kustom. Identitas dimiliki aplikasi: siswa membuat akun sendiri melalui Sign Up dan memverifikasi identitas melalui Login untuk melanjutkan aktivitas belajar, poin, dan hadiah miliknya. Halaman Landing dapat diakses tanpa identitas sebagai titik masuk anonim yang menjelaskan aplikasi, sasaran siswa SMA, materi, dan aktivitas belajar dalam Bahasa Indonesia.

Seluruh destinasi beraktivitas (Dashboard, Study Materials, Study Session, Try Out, Challenges, Daily Question, Daily Task, Session Results, Rewards) berada di balik identitas yang sudah terverifikasi, karena state aktivitas, hasil sesi, poin, dan hadiah harus terikat pada siswa yang benar dan dapat dilanjutkan.

Batas saat ini vs masa depan: semua perilaku yang dijelaskan dalam dokumen ini adalah lingkup saat ini. Tidak ada fitur masa depan yang dinyatakan secara eksplisit oleh pengguna; tidak ada bagian masa depan yang ditambahkan.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source yang diberikan untuk proyek ini, sehingga tidak ada Source Content Inventory.

2c. Page Content and Component Coverage

Page 4 of 18

Landing

  • Informasi/state: penjelasan aplikasi belajar interaktif untuk siswa SMA, sasaran audiens, cakupan subjek (Fisika, Ekonomi, Bahasa Inggris, Matematika, dan subjek lain), cakupan jenjang materi (TKA, SNBT, ujian sekolah, ujian semester, olimpiade, ILTS/TOEFL), empat mode latihan (try out, challenge questions, daily question, daily task), sistem poin dan hadiah, serta penjelasan bahwa kunci jawaban dan penjelasan diberikan setelah setiap sesi. Semua teks Bahasa Indonesia.
  • Aksi utama: "Mulai Belajar" menuju Sign Up (pendaftaran mandiri).
  • Aksi pendukung: tautan ke Login untuk siswa yang sudah punya akun.
  • Entitas domain: subjek, jenjang materi, mode latihan.
  • Tanggung jawab komponen: hero tipografi bertumpuk tiga baris (STUDY / FOR / FUTURE) dengan satu baris terbalik di dalam blok merah; kolom sempit berisi subjudul Bahasa Indonesia, tombol "Mulai Belajar", dan ticker vertikal label jenjang (TKA, SNBT, UJIAN SEKOLAH, OLIMPIADE, TOEFL); bilah horizontal penuh lebar berisi empat blok warna subjek yang saling menempel tanpa celah (Fisika merah, Ekonomi kuning, Bahasa Inggris hitam, Matematika putih ber-border); ticker horizontal atas berisi teks berjalan.
  • State: loading (kerangka blok warna), empty (tidak berlaku — konten statis), success (poster tampil penuh), error (fallback teks tanpa animasi), recovery (muat ulang konten statis).

Sign Up

  • Informasi/state: formulir pendaftaran mandiri siswa; penjelasan singkat bahwa akun menyimpan aktivitas belajar, poin, dan hadiah.
  • Aksi utama: membuat akun dan melanjutkan ke Dashboard.
  • Aksi pendukung: pindah ke Login bila sudah punya akun.
  • Entitas domain: identitas siswa (kredensial), state aktivitas awal.
  • Tanggung jawab komponen: bidang input kredensial, tombol kirim persegi panjang tebal dengan border 2px hitam dan shadow offset, pesan validasi Bahasa Indonesia.
  • State: loading (tombol nonaktif saat mengirim), empty (formulir kosong), success (akun dibuat, diarahkan ke Dashboard), error (kredensial tidak valid atau sudah dipakai, dengan pesan Bahasa Indonesia), recovery (perbaiki input dan kirim ulang).

Login

  • Informasi/state: formulir verifikasi identitas untuk siswa yang kembali; penjelasan bahwa login melanjutkan aktivitas belajar, hasil sesi, poin, dan hadiah.
  • Aksi utama: masuk dan melanjutkan ke Dashboard.
  • Aksi pendukung: pindah ke Sign Up bila belum punya akun.
  • Entitas domain: identitas siswa, state aktivitas tersimpan.
  • Tanggung jawab komponen: bidang input kredensial, tombol kirim, pesan galat Bahasa Indonesia.
  • State: loading (tombol nonaktif saat memverifikasi), empty (formulir kosong), success (diarahkan ke Dashboard dengan state dipulihkan), error (kredensial salah, dengan pesan Bahasa Indonesia), recovery (coba lagi atau pindah ke Sign Up).
Page 5 of 18

Dashboard

  • Informasi/state: ringkasan kemajuan belajar, poin saat ini, status daily question dan daily task hari ini, serta titik masuk ke aktivitas belajar.
  • Aksi utama: memulai aktivitas belajar (menuju Study Materials, Try Out, Challenges, Daily Question, Daily Task, atau Rewards).
  • Aksi pendukung: melihat poin dan hadiah.
  • Entitas domain: poin, kemajuan aktivitas, status harian, hasil sesi terakhir.
  • Tanggung jawab komponen: angka poin besar dalam Anton, blok warna sebagai pintu masuk aktivitas, label kecil metadata, garis pemisah tebal 3px hitam.
  • State: loading (kerangka ringkasan), empty (siswa baru tanpa aktivitas — ajakan memulai aktivitas pertama), success (ringkasan tampil), error (gagal memuat ringkasan, dengan tombol coba lagi), recovery (muat ulang ringkasan).

Study Materials

  • Informasi/state: daftar subjek (Fisika, Ekonomi, Bahasa Inggris, Matematika, dan subjek lain) dan jenjang materi (TKA, SNBT, ujian sekolah, ujian semester, olimpiade, ILTS/TOEFL), termasuk latihan soal TKA.
  • Aksi utama: memilih subjek dan jenjang materi, lalu memulai Study Session.
  • Aksi pendukung: kembali ke Dashboard.
  • Entitas domain: subjek, jenjang materi, sesi latihan.
  • Tanggung jawab komponen: blok warna subjek tanpa celah, label jenjang sebagai wayfinding, hover yang membalik warna dalam 120ms.
  • State: loading (kerangka blok), empty (tidak ada materi yang cocok dengan pilihan — pesan Bahasa Indonesia dan saran pilihan lain), success (pilihan tersedia dan sesi dapat dimulai), error (gagal memuat daftar materi, dengan tombol coba lagi), recovery (muat ulang daftar).

Study Session

  • Informasi/state: soal auto-generated dengan beragam tipe soal, nomor soal, timer, dan progres sesi; kunci jawaban dan penjelasan tidak ditampilkan di sini.
  • Aksi utama: menjawab soal dan melanjutkan ke soal berikutnya, lalu menyelesaikan sesi.
  • Aksi pendukung: menandai soal, meninjau jawaban sebelum menyelesaikan sesi.
  • Entitas domain: soal, tipe soal, jawaban siswa, sesi, subjek, jenjang materi.
  • Tanggung jawab komponen: nomor soal Anton raksasa di margin kiri, kartu soal putih dengan sudut tajam dan border 2px hitam, kontrol jawaban sesuai tipe soal, transisi slide horizontal 180ms antar soal.
  • State: loading (soal sedang di-generate), empty (soal gagal di-generate — pesan Bahasa Indonesia dan tombol coba lagi), success (jawaban tersimpan dan sesi berlanjut), error (jawaban gagal tersimpan — pesan dan opsi coba lagi), recovery (ulangi pengiriman jawaban atau muat ulang soal).
Page 6 of 18

Try Out

  • Informasi/state: konfigurasi sesi try out lintas subjek dan lintas jenjang materi, serta status sesi try out.
  • Aksi utama: memulai sesi try out dan menyelesaikannya.
  • Aksi pendukung: kembali ke Dashboard.
  • Entitas domain: sesi try out, subjek, jenjang materi, hasil sesi.
  • Tanggung jawab komponen: blok warna konfigurasi, label jenjang, tombol persegi panjang tebal.
  • State: loading (menyiapkan sesi), empty (belum ada konfigurasi try out yang dipilih), success (sesi try out berjalan), error (gagal memulai sesi, dengan tombol coba lagi), recovery (muat ulang konfigurasi).

Challenges

  • Informasi/state: daftar pertanyaan tantangan yang tersedia dan status penyelesaiannya.
  • Aksi utama: menjawab pertanyaan tantangan dan menyelesaikan sesi tantangan.
  • Aksi pendukung: kembali ke Dashboard.
  • Entitas domain: pertanyaan tantangan, jawaban siswa, sesi tantangan, poin.
  • Tanggung jawab komponen: blok warna tantangan, nomor soal Anton, kontrol jawaban.
  • State: loading (memuat tantangan), empty (tidak ada tantangan tersedia saat ini — pesan Bahasa Indonesia), success (tantangan selesai dan poin diperbarui), error (gagal memuat atau menyimpan, dengan tombol coba lagi), recovery (muat ulang tantangan).

Daily Question

  • Informasi/state: pertanyaan harian hari ini dan status apakah sudah dikerjakan.
  • Aksi utama: menjawab pertanyaan harian dan menyelesaikan sesi harian.
  • Aksi pendukung: kembali ke Dashboard.
  • Entitas domain: pertanyaan harian, jawaban siswa, poin, tanggal.
  • Tanggung jawab komponen: kartu soal putih, nomor soal Anton, penanda status harian.
  • State: loading (memuat pertanyaan harian), empty (pertanyaan harian belum tersedia — pesan Bahasa Indonesia), success (pertanyaan harian selesai dan poin diperbarui), error (gagal memuat atau menyimpan, dengan tombol coba lagi), recovery (muat ulang pertanyaan harian).
Page 7 of 18

Daily Task

  • Informasi/state: tugas belajar harian dan status penyelesaiannya.
  • Aksi utama: menyelesaikan tugas belajar harian.
  • Aksi pendukung: kembali ke Dashboard.
  • Entitas domain: tugas harian, kemajuan aktivitas, poin, tanggal.
  • Tanggung jawab komponen: blok warna tugas, penanda status harian, garis pemisah tebal.
  • State: loading (memuat tugas harian), empty (tidak ada tugas harian — pesan Bahasa Indonesia), success (tugas selesai dan kemajuan diperbarui), error (gagal memuat atau menyimpan, dengan tombol coba lagi), recovery (muat ulang tugas harian).

Session Results

  • Informasi/state: skor sesi, kunci jawaban, dan penjelasan untuk seluruh soal dalam sesi yang baru selesai — disajikan setelah sesi selesai, bukan setelah setiap soal.
  • Aksi utama: meninjau kunci jawaban dan penjelasan, lalu melanjutkan ke aktivitas berikutnya.
  • Aksi pendukung: kembali ke Dashboard atau memulai sesi baru.
  • Entitas domain: hasil sesi, skor, kunci jawaban, penjelasan, poin yang diperoleh.
  • Tanggung jawab komponen: angka skor Anton 160px di tengah dengan cincin progres lingkaran tebal, daftar bernomor kunci jawaban dan penjelasan dengan garis pemisah 3px hitam.
  • State: loading (menyusun hasil sesi), empty (tidak ada hasil — pesan Bahasa Indonesia), success (skor, kunci jawaban, dan penjelasan tampil), error (gagal memuat hasil, dengan tombol coba lagi), recovery (muat ulang hasil sesi).

Rewards

  • Informasi/state: poin yang diperoleh dari aktivitas belajar dan daftar hadiah yang dapat ditukar.
  • Aksi utama: menukar poin dengan hadiah.
  • Aksi pendukung: kembali ke Dashboard.
  • Entitas domain: poin, hadiah, penukaran hadiah.
  • Tanggung jawab komponen: angka poin besar dalam Anton, blok warna hadiah, tombol tukar persegi panjang tebal dengan border 2px hitam dan shadow offset.
  • State: loading (memuat poin dan daftar hadiah), empty (poin belum cukup atau belum ada hadiah tersedia — pesan Bahasa Indonesia), success (penukaran berhasil dan poin diperbarui), error (penukaran gagal, dengan pesan Bahasa Indonesia dan tombol coba lagi), recovery (muat ulang daftar hadiah atau ulangi penukaran).
Page 8 of 18

3. Functional Requirements

FR-01 — Bahasa Indonesia di seluruh antarmuka As a Siswa SMA, I should melihat seluruh teks antarmuka dalam Bahasa Indonesia, sehingga saya dapat memahami aplikasi tanpa hambatan bahasa.

  • Provenance: explicit
  • Lifecycle: dipicu saat halaman dimuat; hasil yang dapat diamati adalah seluruh label, tombol, pesan, soal, kunci jawaban, dan penjelasan berbahasa Indonesia; kegagalan material adalah teks tampil dalam bahasa lain; pemulihan adalah memuat ulang konten; kelanjutan adalah siswa melanjutkan aktivitas.
  • Acceptance: setiap halaman menampilkan teks Bahasa Indonesia.

FR-02 — Cakupan subjek As a Siswa SMA, I should memilih subjek Fisika, Ekonomi, Bahasa Inggris, Matematika, dan subjek lain, sehingga saya dapat berlatih sesuai kebutuhan.

  • Provenance: explicit
  • Lifecycle: dipicu saat siswa membuka Study Materials; hasil yang dapat diamati adalah daftar subjek tampil; kegagalan material adalah daftar gagal dimuat; pemulihan adalah memuat ulang; kelanjutan adalah memilih subjek dan memulai sesi.
  • Acceptance: daftar subjek memuat Fisika, Ekonomi, Bahasa Inggris, Matematika, dan subjek lain.

FR-03 — Cakupan jenjang materi As a Siswa SMA, I should memilih jenjang materi TKA, SNBT, ujian sekolah, ujian semester, olimpiade, dan ILTS/TOEFL, sehingga saya dapat berlatih pada level yang saya butuhkan.

  • Provenance: explicit
  • Lifecycle: dipicu saat siswa membuka Study Materials; hasil yang dapat diamati adalah daftar jenjang tampil; kegagalan material adalah daftar gagal dimuat; pemulihan adalah memuat ulang; kelanjutan adalah memilih jenjang dan memulai sesi.
  • Acceptance: daftar jenjang memuat TKA, SNBT, ujian sekolah, ujian semester, olimpiade, dan ILTS/TOEFL.

FR-04 — Latihan soal TKA As a Siswa SMA, I should mengerjakan latihan soal TKA, sehingga saya dapat mempersiapkan TKA.

  • Provenance: explicit
  • Lifecycle: dipicu saat siswa memilih jenjang TKA; hasil yang dapat diamati adalah sesi latihan soal TKA berjalan; kegagalan material adalah soal gagal di-generate; pemulihan adalah memuat ulang soal; kelanjutan adalah menyelesaikan sesi dan meninjau hasil.
  • Acceptance: sesi latihan soal TKA dapat dimulai dan diselesaikan.

FR-05 — Mode try out As a Siswa SMA, I should menjalankan sesi try out lintas subjek dan jenjang materi, sehingga saya dapat mengukur kesiapan saya.

  • Provenance: explicit
  • Lifecycle: dipicu saat siswa memulai Try Out; hasil yang dapat diamati adalah sesi try out berjalan dan selesai; kegagalan material adalah sesi gagal dimulai; pemulihan adalah memuat ulang konfigurasi; kelanjutan adalah meninjau Session Results.
  • Acceptance: sesi try out dapat dimulai, dijawab, dan diselesaikan.

FR-06 — Challenge questions As a Siswa SMA, I should menjawab pertanyaan tantangan dan menyelesaikan sesi tantangan, sehingga saya dapat menguji kemampuan saya.

  • Provenance: explicit
  • Lifecycle: dipicu saat siswa membuka Challenges; hasil yang dapat diamati adalah tantangan selesai dan poin diperbarui; kegagalan material adalah tantangan gagal dimuat atau jawaban gagal tersimpan; pemulihan adalah memuat ulang atau mengirim ulang; kelanjutan adalah meninjau Session Results.
  • Acceptance: sesi tantangan dapat diselesaikan dan poin bertambah.

FR-07 — Daily question As a Siswa SMA, I should mengerjakan pertanyaan harian, sehingga saya dapat belajar secara berkala setiap hari.

  • Provenance: explicit
  • Lifecycle: dipicu saat siswa membuka Daily Question; hasil yang dapat diamati adalah pertanyaan harian selesai dan poin diperbarui; kegagalan material adalah pertanyaan harian gagal dimuat; pemulihan adalah memuat ulang; kelanjutan adalah meninjau Session Results.
  • Acceptance: pertanyaan harian dapat dijawab dan diselesaikan.

FR-08 — Daily task As a Siswa SMA, I should menyelesaikan tugas belajar harian, sehingga saya dapat menjaga kemajuan aktivitas.

  • Provenance: explicit
  • Lifecycle: dipicu saat siswa membuka Daily Task; hasil yang dapat diamati adalah tugas harian selesai dan kemajuan diperbarui; kegagalan material adalah tugas gagal dimuat atau gagal disimpan; pemulihan adalah memuat ulang atau mengirim ulang; kelanjutan adalah meninjau Session Results.
  • Acceptance: tugas harian dapat diselesaikan dan kemajuan diperbarui.

FR-09 — Soal auto-generated As a Siswa SMA, I should mengerjakan soal yang di-generate otomatis, sehingga saya selalu mendapat soal baru tanpa penulisan manual per item.

  • Provenance: explicit
  • Lifecycle: dipicu saat sesi dimulai; hasil yang dapat diamati adalah soal tampil; kegagalan material adalah soal gagal di-generate; pemulihan adalah memuat ulang soal; kelanjutan adalah menjawab soal.
  • Acceptance: soal yang tampil dihasilkan secara otomatis.

FR-10 — Beragam tipe soal As a Siswa SMA, I should menghadapi beragam tipe soal dalam satu sesi, sehingga latihan terasa bervariasi.

  • Provenance: explicit
  • Lifecycle: dipicu saat sesi dimulai; hasil yang dapat diamati adalah soal dengan tipe yang berbeda-beda tampil; kegagalan material adalah hanya satu tipe soal muncul; pemulihan adalah memuat ulang sesi; kelanjutan adalah menjawab soal.
  • Acceptance: sesi memuat lebih dari satu tipe soal.

FR-11 — Poin As a Siswa SMA, I should memperoleh poin dari aktivitas belajar, sehingga saya dapat melihat kemajuan saya.

  • Provenance: explicit
  • Lifecycle: dipicu saat sesi atau tugas selesai; hasil yang dapat diamati adalah poin bertambah dan tampil di Dashboard serta Rewards; kegagalan material adalah poin gagal diperbarui; pemulihan adalah memuat ulang ringkasan; kelanjutan adalah menukar poin dengan hadiah.
  • Acceptance: poin bertambah setelah aktivitas belajar selesai.

FR-12 — Hadiah As a Siswa SMA, I should menukar poin dengan hadiah, sehingga saya mendapat imbalan atas aktivitas belajar.

  • Provenance: explicit
  • Lifecycle: dipicu saat siswa membuka Rewards dan memilih hadiah; hasil yang dapat diamati adalah penukaran berhasil dan poin berkurang; kegagalan material adalah penukaran gagal; pemulihan adalah memuat ulang daftar hadiah atau mengulangi penukaran; kelanjutan adalah kembali ke Dashboard.
  • Acceptance: penukaran hadiah berhasil dan poin diperbarui.

FR-13 — Kunci jawaban dan penjelasan setelah sesi As a Siswa SMA, I should melihat kunci jawaban dan penjelasan setelah setiap sesi selesai, bukan setelah setiap pertanyaan, sehingga saya dapat memahami hasil saya secara utuh.

  • Provenance: explicit
  • Lifecycle: dipicu saat sesi selesai; hasil yang dapat diamati adalah Session Results menampilkan skor, kunci jawaban, dan penjelasan; kegagalan material adalah hasil gagal dimuat; pemulihan adalah memuat ulang hasil; kelanjutan adalah memulai sesi baru atau kembali ke Dashboard.
  • Acceptance: kunci jawaban dan penjelasan tampil setelah sesi selesai dan tidak tampil per pertanyaan.

FR-14 — Aplikasi yang menarik As a Siswa SMA, I should merasakan aplikasi yang menarik dan berenergi, sehingga saya termotivasi untuk terus belajar.

  • Provenance: explicit
  • Lifecycle: dipicu saat siswa membuka halaman; hasil yang dapat diamati adalah tampilan poster tipografi, blok warna, dan gerakan sesuai arah kreatif; kegagalan material adalah tampilan generik; pemulihan adalah memuat ulang; kelanjutan adalah siswa melanjutkan aktivitas.
  • Acceptance: tampilan mengikuti arah kreatif dan tidak menggunakan template SaaS biru-indigo.

FR-15 — Pendaftaran mandiri siswa As a Siswa SMA, I should mendaftar sendiri sebelum aktivitas belajar terlindungi, sehingga saya memiliki identitas aplikasi untuk menyimpan aktivitas, poin, dan hadiah.

  • Provenance: required_inference
  • Lifecycle: dipicu saat siswa memilih "Mulai Belajar" di Landing; hasil yang dapat diamati adalah akun dibuat dan siswa diarahkan ke Dashboard; kegagalan material adalah kredensial tidak valid atau sudah dipakai; pemulihan adalah memperbaiki input dan mengirim ulang; kelanjutan adalah memulai aktivitas belajar.
  • Acceptance: akun baru dapat dibuat dan siswa masuk ke Dashboard.

FR-16 — Login kembali As a Siswa SMA, I should masuk kembali untuk melanjutkan state aktivitas, hasil sesi, poin, dan hadiah, sehingga saya tidak kehilangan kemajuan.

  • Provenance: required_inference
  • Lifecycle: dipicu saat siswa membuka Login; hasil yang dapat diamati adalah state dipulihkan dan siswa diarahkan ke Dashboard; kegagalan material adalah kredensial salah; pemulihan adalah mencoba lagi atau pindah ke Sign Up; kelanjutan adalah melanjutkan aktivitas.
  • Acceptance: login berhasil memulihkan state aktivitas, hasil sesi, poin, dan hadiah.

FR-17 — Penyimpanan backend As a Siswa SMA, I should memiliki sesi, hasil, kunci jawaban, penjelasan, poin, dan penukaran hadiah yang tersimpan, sehingga kemajuan saya bertahan antar sesi.

  • Provenance: required_inference
  • Lifecycle: dipicu saat aktivitas belajar selesai; hasil yang dapat diamati adalah data tersimpan dan tersedia kembali saat login; kegagalan material adalah penyimpanan gagal; pemulihan adalah mengirim ulang atau memuat ulang; kelanjutan adalah melanjutkan aktivitas.
  • Acceptance: data aktivitas tersimpan dan dapat dipulihkan setelah login.

FR-18 — Kunci jawaban dan penjelasan tidak per pertanyaan As a Siswa SMA, I should tidak melihat kunci jawaban atau penjelasan selama sesi berlangsung, sehingga saya menjawab tanpa bocoran.

  • Provenance: required_inference
  • Lifecycle: dipicu selama sesi berlangsung; hasil yang dapat diamati adalah kunci jawaban dan penjelasan tidak tampil sampai sesi selesai; kegagalan material adalah kunci jawaban bocor di tengah sesi; pemulihan adalah menyembunyikan kembali dan melanjutkan sesi; kelanjutan adalah menyelesaikan sesi.
  • Acceptance: selama sesi, tidak ada kunci jawaban atau penjelasan yang tampil.
Page 9 of 18

4. User Personas

Page 10 of 18

Siswa SMA (High School Student)

Konteks produk: Siswa SMA di Indonesia, berusia sekitar 15–18 tahun, yang sedang mempersiapkan TKA, SNBT, ujian sekolah, ujian semester, olimpiade, dan ILTS/TOEFL. Ia menggunakan aplikasi dalam Bahasa Indonesia dan menghadapi tekanan waktu serta kebutuhan latihan yang bervariasi.

Tujuan utama: berlatih soal secara konsisten, mengukur kesiapan, memahami kesalahan melalui kunci jawaban dan penjelasan, serta merasakan kemajuan melalui poin dan hadiah.

Tanggung jawab yang diterima:

  • Menjalankan sesi try out lintas subjek dan jenjang materi.
  • Menjawab pertanyaan tantangan dan menyelesaikan sesi tantangan.
  • Mengerjakan pertanyaan harian.
  • Menyelesaikan tugas belajar harian.
  • Memilih subjek (Fisika, Ekonomi, Bahasa Inggris, Matematika, dan subjek lain) serta jenjang materi (TKA, SNBT, ujian sekolah, ujian semester, olimpiade, ILTS/TOEFL), termasuk latihan soal TKA.
  • Meninjau kunci jawaban dan penjelasan setelah setiap sesi selesai.
  • Mengumpulkan poin dan menukarnya dengan hadiah.

Input dan keputusan: memilih subjek dan jenjang materi; menjawab soal auto-generated dengan beragam tipe; memutuskan kapan menyelesaikan sesi; memutuskan hadiah yang ditukar.

Interaksi dengan peserta lain: tidak ada peserta manusia lain dalam lingkup saat ini. Siswa berinteraksi dengan layanan backend aplikasi yang menyimpan sesi, hasil, kunci jawaban, penjelasan, poin, dan penukaran hadiah, serta menghasilkan soal secara otomatis.

Keberhasilan yang dapat diamati: sesi selesai, skor tampil, kunci jawaban dan penjelasan terbaca, poin bertambah, dan hadiah berhasil ditukar.

Yang membedakan perannya: ia adalah satu-satunya aktor manusia; seluruh alur produk berpusat pada tindakan belajarnya, dan setiap state produk (aktivitas, hasil, poin, hadiah) terikat pada identitasnya sendiri.

Page 11 of 18

5. Core User Flows

Alur 1 — Pendaftaran mandiri dan masuk pertama

  1. Siswa membuka Landing tanpa identitas dan membaca penjelasan aplikasi, cakupan subjek, jenjang materi, empat mode latihan, poin, hadiah, serta aturan kunci jawaban setelah sesi — semuanya dalam Bahasa Indonesia.
  2. Siswa menekan "Mulai Belajar" dan diarahkan ke Sign Up.
  3. Siswa mengisi kredensial dan mengirim formulir. Jika kredensial tidak valid atau sudah dipakai, ia melihat pesan Bahasa Indonesia dan memperbaiki input.
  4. Setelah akun dibuat, siswa diarahkan ke Dashboard dengan state aktivitas awal.
  5. Siswa melihat ringkasan kosong dan ajakan memulai aktivitas pertama.

Alur 2 — Login kembali dan melanjutkan kemajuan

  1. Siswa yang kembali membuka Login.
  2. Siswa memasukkan kredensial. Jika salah, ia melihat pesan Bahasa Indonesia dan dapat mencoba lagi atau pindah ke Sign Up.
  3. Setelah verifikasi berhasil, siswa diarahkan ke Dashboard dengan state aktivitas, hasil sesi, poin, dan hadiah dipulihkan.
  4. Siswa melanjutkan aktivitas belajar dari titik terakhirnya.

Alur 3 — Latihan materi per subjek dan jenjang

  1. Dari Dashboard, siswa membuka Study Materials.
  2. Siswa memilih subjek (misalnya Fisika, Ekonomi, Bahasa Inggris, Matematika, atau subjek lain) dan jenjang materi (TKA, SNBT, ujian sekolah, ujian semester, olimpiade, atau ILTS/TOEFL), termasuk opsi latihan soal TKA.
  3. Siswa memulai Study Session. Soal auto-generated dengan beragam tipe dimuat; jika gagal, ia melihat pesan Bahasa Indonesia dan memuat ulang.
  4. Siswa menjawab soal satu per satu. Nomor soal tampil sebagai angka Anton raksasa di margin kiri; transisi antar soal adalah slide horizontal cepat. Kunci jawaban dan penjelasan tidak tampil selama sesi.
  5. Siswa menyelesaikan sesi dan diarahkan ke Session Results.
  6. Di Session Results, siswa melihat skor sebagai poster angka besar dengan cincin progres, lalu membaca kunci jawaban dan penjelasan sebagai daftar bernomor dengan garis pemisah tebal.
  7. Siswa melanjutkan ke aktivitas berikutnya atau kembali ke Dashboard.
Page 12 of 18

Alur 4 — Try out lintas subjek dan jenjang

  1. Dari Dashboard, siswa membuka Try Out.
  2. Siswa menyiapkan sesi try out lintas subjek dan jenjang materi. Jika sesi gagal dimulai, ia memuat ulang konfigurasi.
  3. Siswa menjalankan sesi try out dan menjawab soal auto-generated.
  4. Siswa menyelesaikan sesi dan diarahkan ke Session Results untuk melihat skor, kunci jawaban, dan penjelasan.
  5. Siswa kembali ke Dashboard dengan poin yang diperbarui.

Alur 5 — Pertanyaan tantangan

  1. Dari Dashboard, siswa membuka Challenges.
  2. Siswa melihat daftar pertanyaan tantangan. Jika tidak ada tantangan tersedia, ia melihat pesan Bahasa Indonesia.
  3. Siswa menjawab pertanyaan tantangan dan menyelesaikan sesi tantangan. Jika jawaban gagal tersimpan, ia mengirim ulang.
  4. Siswa diarahkan ke Session Results untuk meninjau skor, kunci jawaban, dan penjelasan.
  5. Poin siswa bertambah dan tampil di Dashboard.

Alur 6 — Pertanyaan harian

  1. Dari Dashboard, siswa membuka Daily Question.
  2. Siswa melihat pertanyaan harian hari ini dan status pengerjaannya. Jika pertanyaan belum tersedia, ia melihat pesan Bahasa Indonesia.
  3. Siswa menjawab pertanyaan harian dan menyelesaikan sesi harian.
  4. Siswa diarahkan ke Session Results untuk meninjau skor, kunci jawaban, dan penjelasan.
  5. Poin siswa bertambah dan status harian diperbarui di Dashboard.

Alur 7 — Tugas belajar harian

  1. Dari Dashboard, siswa membuka Daily Task.
  2. Siswa melihat tugas belajar harian dan status penyelesaiannya. Jika tidak ada tugas, ia melihat pesan Bahasa Indonesia.
  3. Siswa menyelesaikan tugas harian. Jika penyimpanan gagal, ia memuat ulang atau mengirim ulang.
  4. Siswa diarahkan ke Session Results untuk meninjau hasil.
  5. Kemajuan aktivitas dan poin diperbarui di Dashboard.
Page 13 of 18

Alur 8 — Menukar poin dengan hadiah

  1. Dari Dashboard, siswa membuka Rewards.
  2. Siswa melihat poin yang diperoleh dari aktivitas belajar dan daftar hadiah. Jika poin belum cukup atau belum ada hadiah tersedia, ia melihat pesan Bahasa Indonesia.
  3. Siswa memilih hadiah dan menekan tombol tukar.
  4. Jika penukaran gagal, siswa melihat pesan Bahasa Indonesia dan dapat memuat ulang daftar hadiah atau mengulangi penukaran.
  5. Setelah penukaran berhasil, poin berkurang dan siswa kembali ke Dashboard.
Page 14 of 18

6. Visuals Colors and Theme

Arah kreatif ini mengikuti Paula Scher: tipografi sebagai arsitektur — kata-kata memenuhi layar, warna blok bertumbukan, energi mengalahkan kerapian. Headline: belajar bisa terasa seperti poster konser, bukan spreadsheet.

Mode terang (light mode):

PeranNilai
Background#F4F1E8
Surface#FFFFFF
Text#111111
Primary#E8341C
Accent#F5C400
Muted#6B6B6B

Rasio kira-kira 60% latar kertas, 20% hitam/putih untuk tipografi dan kartu, 12% merah, 8% kuning. Tidak ada gradasi lembut, tidak ada biru-indigo.

Tipografi:

  • Heading: Anton, huruf kapital, tracking rapat (-0.02em), bobot regular 400, ukuran sangat besar dan padat.
  • Body: Archivo, bobot 400–600, ukuran 16–18px, line-height 1.6.
  • Label kecil: Archivo 700 huruf kapital dengan tracking lebar (0.12em).

Skala modular 1.333: display 56px mobile → 128px desktop (clamp); h1 40→72px; h2 28→44px; h3 22→28px; body 16→18px; label 12→13px; angka skor 64→160px. Judul sesi memakai clamp(2.5rem, 8vw, 8rem) agar tidak meluber di 375px.

Bahasa bentuk: sudut tajam 0px di semua elemen utama. Blok warna persegi panjang dengan tepi keras. Tombol adalah persegi panjang tebal dengan border 2px hitam dan bayangan offset keras 4px 4px 0 #111111. Garis pemisah horizontal tebal 3px hitam. Tidak ada radius besar, tidak ada pill, tidak ada blob. Satu-satunya lengkungan adalah lingkaran timer dan cincin progres.

Layout: grid poster asimetris 12 kolom dengan margin lebar 24px mobile / 64px desktop. Hero adalah komposisi tipografi penuh. Setiap subjek adalah blok warna dengan nama subjek dalam Anton kapital. Halaman sesi soal memakai satu kolom fokus dengan nomor soal raksasa di margin kiri. Halaman hasil adalah poster skor.

Imagery: tipografi adalah gambarnya — tidak ada foto stok, tidak ada ilustrasi 3D. Elemen grafis hanya bentuk geometris datar (lingkaran, persegi panjang, garis diagonal). Ikon subjek digambar sebagai pictogram tebal 2px hitam. Latar belakang boleh memiliki pola titik halftone hitam 8% sebagai tekstur kertas cetak, tetapi tidak pernah menutupi teks.

Page 15 of 18

7. Signature Design Concept

"Poster yang hidup" — layar pertama Landing adalah poster, bukan hero SaaS.

  • Latar #F4F1E8.
  • Di kiri, judul bertumpuk dalam Anton kapital setinggi hampir seluruh viewport: STUDY di baris pertama hitam, FOR di baris kedua dengan huruf terbalik di dalam blok merah #E8341C yang membentang dari tepi kiri ke kolom ke-8, FUTURE di baris ketiga kuning #F5C400 dengan outline hitam.
  • Di kanan, satu kolom sempit berisi subjudul Bahasa Indonesia 18px, tombol "Mulai Belajar" persegi panjang merah dengan border hitam dan shadow offset, serta ticker vertikal berisi label jenjang (TKA, SNBT, UJIAN SEKOLAH, OLIMPIADE, TOEFL) yang bergerak lambat ke atas.
  • Di bagian bawah, bilah horizontal penuh lebar berisi empat blok warna subjek yang saling menempel tanpa celah, masing-masing dengan nama subjek dalam Anton.
  • Tidak ada tombol biru, tidak ada gradasi, tidak ada gambar orang.

Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima — tidak menambah perilaku, halaman, atau destinasi baru.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief

  • Focal subject: judul bertumpuk tiga baris dalam Anton kapital yang membentang 7–9 kolom, dengan satu baris terbalik di dalam blok warna merah penuh.
  • Input → transformation → outcome: saat halaman dimuat, kata-kata judul muncul satu per satu dengan stagger 40ms; saat siswa menggulir atau berpindah bagian, blok warna menyapu dari kiri ke kanan (240ms, ease-out); hasilnya adalah poster yang terasa dicetak dan hidup, tanpa menambah perilaku produk.
  • Motion vocabulary: wipe blok warna dari kiri ke kanan (240ms, ease-out); reveal kata per kata untuk judul besar dengan stagger 40ms; marquee teks untuk ticker "SOAL BARU SETIAP HARI • +50 POIN • STREAK 7 HARI" dalam Archivo 700 kapital dengan tracking lebar; transisi antar soal adalah slide horizontal cepat 180ms dengan nomor soal berganti seperti mekanisme jam; hover pada blok subjek membalik warna (merah menjadi hitam, teks menjadi kuning) dalam 120ms. Tidak ada bounce, tidak ada partikel.
  • Composed first frame: latar #F4F1E8; judul tiga baris sudah terbaca penuh; blok merah dan kuning sebagai penyeimbang di sisi kanan; bilah empat blok subjek menempel di bawah; ticker horizontal berjalan lambat di atas.
  • Reduced-motion state: semua gerakan berhenti total dan diganti dengan kemunculan instan; ticker berhenti dan menampilkan item secara utuh (membungkus ke baris atau dapat digulir horizontal dengan overflow-x: auto).
Page 16 of 18

9. Non-Functional Requirements

  • NFR-01 — Bahasa: seluruh teks antarmuka pengguna berbahasa Indonesia. (explicit)
  • NFR-02 — Aturan penyajian kunci jawaban: kunci jawaban dan penjelasan hanya disajikan setelah sesi selesai, tidak per pertanyaan. (explicit)
  • NFR-03 — Generasi soal: soal di-generate otomatis, bukan ditulis manual per item. (explicit)
  • NFR-04 — Cakupan materi: materi terbatas pada TKA, SNBT, ujian sekolah, ujian semester, olimpiade, dan ILTS/TOEFL. (explicit)
  • NFR-05 — Audiens: aplikasi ditargetkan untuk siswa SMA. (explicit)
  • NFR-06 — Keterbacaan di semua viewport: judul, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px; teks membungkus atau menskalakan dengan clamp(...); tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. (explicit — arah kreatif)
  • NFR-07 — Konten bergerak: marquee, ticker, carousel, dan baris yang dapat digulir horizontal boleh melewati tepi viewport atau kontainer; setiap item harus sepenuhnya terbaca saat melewatinya; dengan prefers-reduced-motion, gerakan berhenti dan item ditampilkan utuh (membungkus ke baris atau baris yang dapat digulir horizontal). (explicit — arah kreatif)
  • NFR-08 — Larangan template generik: template SaaS indigo/biru-di-atas-putih dilarang untuk proyek ini. (explicit — arah kreatif)
  • NFR-09 — Penyimpanan backend: sesi, hasil, kunci jawaban, penjelasan, poin, dan penukaran hadiah disimpan di backend agar dapat dipulihkan saat login. (required_inference)

10. Tech Stack

  • Frontend: React (aplikasi web first-party dengan antarmuka kustom).
  • Backend: Python/FastAPI untuk menyimpan sesi, hasil, kunci jawaban, penjelasan, poin, dan penukaran hadiah, serta melayani generasi soal otomatis.
  • Penyimpanan: basis data relasional untuk identitas siswa, sesi, hasil, poin, dan penukaran hadiah.
  • Kontainerisasi: Docker dan docker-compose untuk pengembangan dan penyebaran.
  • Font: Anton (heading) dan Archivo (body) — sesuai arah kreatif.

Tidak ada pilihan teknologi lain yang dinyatakan secara eksplisit oleh pengguna.

Page 17 of 18

11. Assumptions and Constraints

Asumsi:

  • A-01 — Siswa SMA diasumsikan memiliki akses ke perangkat dengan peramban web modern. [Default — not specified by user]
  • A-02 — Identitas dimiliki aplikasi dengan pendaftaran mandiri dan login kembali, karena state aktivitas, hasil sesi, poin, dan hadiah harus terikat pada siswa yang benar dan dapat dilanjutkan. (required_inference)
  • A-03 — Soal auto-generated dihasilkan oleh layanan backend aplikasi. (required_inference)
  • A-04 — Tidak ada peserta manusia lain selain siswa SMA dalam lingkup saat ini. (explicit)

Batasan:

  • C-01 — Bahasa antarmuka pengguna adalah Bahasa Indonesia. (explicit)
  • C-02 — Kunci jawaban dan penjelasan diberikan setelah setiap sesi, bukan setelah setiap pertanyaan. (explicit)
  • C-03 — Soal di-generate otomatis. (explicit)
  • C-04 — Cakupan materi terbatas pada TKA, SNBT, ujian sekolah, ujian semester, olimpiade, dan ILTS/TOEFL. (explicit)
  • C-05 — Target audiens adalah siswa SMA. (explicit)
  • C-06 — Mode latihan terbatas pada try out, challenge questions, daily question, dan daily task. (explicit)
  • C-07 — Template SaaS indigo/biru-di-atas-putih dilarang. (explicit — arah kreatif)
Page 18 of 18

12. Glossary

  • TKA — Tes Kemampuan Akademik; jenjang materi dan latihan soal yang disertakan dalam aplikasi.
  • SNBT — Seleksi Nasional Berdasarkan Tes; jenjang materi yang disertakan.
  • Ujian sekolah — Ujian yang diselenggarakan sekolah; jenjang materi yang disertakan.
  • Ujian semester — Ujian akhir semester; jenjang materi yang disertakan.
  • Olimpiade — Kompetisi akademik tingkat lanjut; jenjang materi yang disertakan.
  • ILTS/TOEFL — Jenjang materi bahasa Inggris yang disertakan.
  • Try out — Mode latihan lintas subjek dan jenjang materi.
  • Challenge questions — Pertanyaan tantangan yang harus dijawab siswa.
  • Daily question — Pertanyaan harian sebagai aktivitas belajar berkala.
  • Daily task — Tugas belajar harian yang menghasilkan kemajuan aktivitas.
  • Poin — Nilai yang diperoleh dari aktivitas belajar dan dapat ditukar dengan hadiah.
  • Hadiah — Imbalan yang dapat ditukar dengan poin.
  • Sesi — Satu rangkaian pengerjaan soal yang diakhiri dengan penyajian kunci jawaban dan penjelasan.
  • Kunci jawaban — Jawaban benar untuk soal dalam satu sesi, disajikan setelah sesi selesai.
  • Penjelasan — Uraian yang menyertai kunci jawaban setelah sesi selesai.
  • Soal auto-generated — Soal yang dihasilkan secara otomatis oleh layanan backend, bukan ditulis manual per item.
  • Siswa SMA — Aktor manusia aktif satu-satunya dalam aplikasi ini.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Baca penjelasan aplikasi
Sign Up: 1. Isi kredensial pendaftaran
Sign Up: 2. Perbaiki input lalu kirim ulang
Login: 1. Masukkan kredensial
Login: 2. Coba lagi atau pindah Sign Up
Dashboard: 1. Lihat ringkasan dan poin
Dashboard: 2. Muat ulang ringkasan
Study Materials: 3. Pilih subjek dan jenjang
Study Materials: 4. Muat ulang daftar materi
Study Session: 5. Jawab soal dan lanjut
Study Session: 6. Tinjau jawaban sebelum selesai
Study Session: 7. Muat ulang soal yang gagal
Try Out: 8. Siapkan sesi lintas jenjang
Try Out: 9. Jalankan dan selesaikan sesi
Try Out: 10. Muat ulang konfigurasi
Challenges: 11. Lihat daftar tantangan
Challenges: 12. Jawab dan selesaikan tantangan
Challenges: 13. Kirim ulang jawaban gagal
Daily Question: 14. Lihat pertanyaan harian
Daily Question: 15. Jawab dan selesaikan harian
Daily Task: 16. Lihat tugas harian
Daily Task: 17. Selesaikan tugas harian
Session Results: 18. Lihat skor dan kunci
Session Results: 19. Baca penjelasan jawaban
Session Results: 20. Muat ulang hasil sesi
Rewards: 21. Lihat poin dan hadiah
Rewards: 22. Tukar poin dengan hadiah
Rewards: 23. Ulangi penukaran gagal

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Baca penjelasan aplikasi
Sign Up: 1. Isi kredensial pendaftaran
Sign Up: 2. Perbaiki input lalu kirim ulang
Login: 1. Masukkan kredensial
Login: 2. Coba lagi atau pindah Sign Up
Dashboard: 1. Lihat ringkasan dan poin
Dashboard: 2. Muat ulang ringkasan
Study Materials: 3. Pilih subjek dan jenjang
Study Materials: 4. Muat ulang daftar materi
Study Session: 5. Jawab soal dan lanjut
Study Session: 6. Tinjau jawaban sebelum selesai
Study Session: 7. Muat ulang soal yang gagal
Try Out: 8. Siapkan sesi lintas jenjang
Try Out: 9. Jalankan dan selesaikan sesi
Try Out: 10. Muat ulang konfigurasi
Challenges: 11. Lihat daftar tantangan
Challenges: 12. Jawab dan selesaikan tantangan
Challenges: 13. Kirim ulang jawaban gagal
Daily Question: 14. Lihat pertanyaan harian
Daily Question: 15. Jawab dan selesaikan harian
Daily Task: 16. Lihat tugas harian
Daily Task: 17. Selesaikan tugas harian
Session Results: 18. Lihat skor dan kunci
Session Results: 19. Baca penjelasan jawaban
Session Results: 20. Muat ulang hasil sesi
Rewards: 21. Lihat poin dan hadiah
Rewards: 22. Tukar poin dengan hadiah
Rewards: 23. Ulangi penukaran gagal