iuran-kelompok-keanggotaan adalah aplikasi Android untuk pencatatan iuran kelompok. Aplikasi ini dibangun untuk kelompok komunitas kecil di Indonesia — misalnya kelompok rukun tetangga, paguyuban, atau komunitas kegiatan — yang memerlukan pencatatan iuran yang rapi, transparan, dan dapat diperiksa kembali.
Produk ini menjawab tiga kebutuhan pokok kelompok:
Audiens produk adalah Pengurus Kelompok (Administrator Iuran) yang mengelola keanggotaan, menetapkan kegiatan, dan mencatat pembayaran; serta Anggota Kelompok yang melihat kegiatan berjalan, membayar iuran tetap Rp 20.000, dan memeriksa riwayat pembayarannya per kegiatan.
Aplikasi ini adalah aplikasi Android dengan antarmuka kustom milik aplikasi sendiri dan backend penyimpanan yang mempertahankan data keanggotaan, kegiatan, pembayaran Rp 20.000, dan status pembayaran. Identitas pengguna dimiliki oleh aplikasi: pengurus dan anggota mendaftar sendiri, kemudian memverifikasi kembali melalui Login sebelum mengakses data terlindungi.
Aktor:
Perilaku yang diterima (current):
Pengecualian sempit (narrow exclusions):
Kepemilikan pengiriman. Produk dikirim sebagai aplikasi Android dengan antarmuka kustom milik aplikasi. Seluruh permukaan kerja — penjelasan publik, pendaftaran, verifikasi, pengelolaan anggota, pengelolaan kegiatan, pencatatan pembayaran, dan tampilan pembayaran per kegiatan — dimiliki dan dijalankan oleh aplikasi sendiri, didukung backend penyimpanan milik aplikasi.
Kepemilikan akses. Identitas dimiliki aplikasi. Karena catatan keanggotaan, kegiatan, dan pembayaran harus tetap terikat pada peserta yang benar dan dapat dilanjutkan kembali, aplikasi menyediakan:
Batas current dan future. Semua perilaku yang tercantum dalam dokumen ini adalah lingkup saat ini. Tidak ada permintaan pengguna untuk fitur masa depan; tidak ada bagian future yang diaktifkan.
FR-01 — Melihat daftar anggota kelompok (explicit) As a Pengurus Kelompok (Administrator Iuran) I should melihat daftar seluruh anggota kelompok yang terdaftar, sehingga saya dapat memeriksa siapa saja yang tercatat dalam keanggotaan.
FR-02 — Menambah anggota kelompok (explicit) As a Pengurus Kelompok (Administrator Iuran) I should menambah data anggota baru ke dalam keanggotaan kelompok, sehingga anggota baru dapat dihubungkan dengan kewajiban iurannya.
FR-03 — Mengubah data anggota kelompok (explicit) As a Pengurus Kelompok (Administrator Iuran) I should mengubah data anggota yang sudah terdaftar, sehingga data keanggotaan tetap akurat.
FR-04 — Melihat daftar kegiatan kelompok (explicit) As a Pengurus Kelompok (Administrator Iuran) I should melihat daftar kegiatan kelompok beserta status pembayaran iurannya, sehingga saya dapat memantau kegiatan yang sedang berjalan.
FR-05 — Menambah kegiatan kelompok (explicit) As a Pengurus Kelompok (Administrator Iuran) I should menambah kegiatan kelompok baru, sehingga kegiatan dinamis dapat menjadi konteks pencatatan iuran.
FR-06 — Mengubah kegiatan kelompok (explicit) As a Pengurus Kelompok (Administrator Iuran) I should mengubah kegiatan kelompok yang sudah ada, sehingga kegiatan tetap sesuai dengan keadaan kelompok.
FR-07 — Melihat kegiatan berjalan sebagai anggota (explicit) As an Anggota Kelompok I should melihat kegiatan yang sedang berjalan beserta iuran tetap Rp 20.000 yang harus dibayarkan, sehingga saya tahu kewajiban iuran saya.
FR-08 — Mencatat pembayaran iuran tetap Rp 20.000 (explicit) As a Pengurus Kelompok (Administrator Iuran) I should mencatat pembayaran iuran tetap sebesar 20000 untuk seorang anggota pada kegiatan yang dipilih, sehingga kewajiban iuran anggota tercatat.
FR-09 — Melakukan pembayaran iuran tetap Rp 20.000 sebagai anggota (explicit) As an Anggota Kelompok I should melakukan pembayaran iuran tetap sebesar 20000 untuk kegiatan yang sedang berjalan, sehingga kewajiban iuran saya terpenuhi.
FR-10 — Menampilkan pembayaran iuran untuk setiap kegiatan (explicit) As a Pengurus Kelompok (Administrator Iuran) I should melihat pembayaran iuran dan statusnya untuk setiap kegiatan, sehingga laporan iuran kelompok tetap akurat.
FR-11 — Memeriksa riwayat pembayaran per kegiatan sebagai anggota (explicit) As an Anggota Kelompok I should memeriksa riwayat pembayaran saya per kegiatan sebagai bukti kewajiban yang sudah dipenuhi, sehingga saya yakin iuran saya tercatat.
FR-12 — Mendaftar mandiri sebagai pengurus atau anggota (required_inference) As a Pengurus Kelompok (Administrator Iuran) or Anggota Kelompok I should mendaftar sendiri sebelum penggunaan pertama dan menetapkan peran saya, sehingga akses dapat dibatasi sesuai tanggung jawab.
FR-13 — Verifikasi kembali melalui Login (required_inference) As a Pengurus Kelompok (Administrator Iuran) or Anggota Kelompok I should memverifikasi kembali melalui Login sebelum mengakses data terlindungi, sehingga catatan keanggotaan, kegiatan, dan pembayaran tetap terikat pada peserta yang benar.
FR-14 — Melihat ringkasan setelah autentikasi (required_inference) As a Pengurus Kelompok (Administrator Iuran) or Anggota Kelompok I should melihat ringkasan jumlah anggota, kegiatan berjalan, dan status pembayaran iuran Rp 20.000 setelah login, sehingga saya dapat melanjutkan pekerjaan saya.
FR-15 — Penyimpanan backend data iuran kelompok (required_inference) As the system I should menyimpan data keanggotaan, kegiatan, pembayaran 20000, dan status pembayaran di backend, sehingga data tetap tersedia saat pengguna kembali.
Konteks produk. Pengurus adalah orang yang memegang tanggung jawab pencatatan uang kelompok. Ia bekerja di antara anggota yang ia kenal secara pribadi, sering kali di sela-sela kegiatan lain, dan harus bisa mempertanggungjawabkan setiap angka yang tercatat. Ia bukan pengguna teknis; ia membutuhkan tampilan yang terbaca seperti buku kas atau papan pengumuman, bukan dasbor keuangan.
Tujuan utama. Menjaga agar catatan keanggotaan, kegiatan, dan iuran tetap Rp 20.000 selalu akurat dan dapat diperiksa kembali oleh kelompok.
Tanggung jawab yang diterima.
Input dan keputusan. Ia memasukkan data anggota, data kegiatan, dan pilihan anggota–kegiatan saat mencatat pembayaran. Keputusan pentingnya adalah menetapkan kegiatan mana yang menjadi konteks penagihan dan memastikan setiap pembayaran Rp 20.000 tercatat pada anggota dan kegiatan yang benar.
Interaksi dengan peserta lain. Ia adalah satu-satunya peran yang mengubah data keanggotaan dan kegiatan. Pekerjaannya menentukan apa yang dilihat Anggota Kelompok: kegiatan yang tampil, iuran Rp 20.000 yang harus dibayarkan, dan status pembayaran yang tercatat. Ketika ia mencatat pembayaran, status yang dilihat anggota berubah.
Keberhasilan yang dapat diamati. Daftar anggota dan kegiatan tampil lengkap dan benar; setiap pembayaran Rp 20.000 tercatat pada anggota dan kegiatan yang tepat; tampilan pembayaran per kegiatan menunjukkan status lunas/belum dengan jelas.
Konteks produk. Anggota adalah orang yang terdaftar dalam keanggotaan kelompok. Ia memakai aplikasi di ponsel Android kelas menengah, sering kali di siang hari, untuk memeriksa apa yang harus ia bayar dan apakah pembayarannya sudah tercatat. Ia tidak mengelola data kelompok dan tidak mengubah kegiatan.
Tujuan utama. Mengetahui iuran tetap Rp 20.000 yang harus dibayarkan untuk kegiatan yang sedang berjalan dan memiliki bukti bahwa kewajibannya sudah dipenuhi.
Tanggung jawab yang diterima.
Input dan keputusan. Ia memilih kegiatan yang ingin dibayar dan mencatatkan pembayaran iuran Rp 20.000. Keputusan pentingnya adalah memastikan kegiatan yang dipilih sudah benar sebelum mencatatkan pembayaran.
Interaksi dengan peserta lain. Ia bergantung pada pekerjaan Pengurus Kelompok: kegiatan dan keanggotaan yang ditetapkan pengurus adalah apa yang ia lihat dan bayar. Pembayaran yang ia catatkan muncul pada tampilan pembayaran per kegiatan yang juga diperiksa pengurus.
Keberhasilan yang dapat diamati. Kegiatan berjalan tampil dengan iuran Rp 20.000; pembayarannya tercatat; riwayat pembayarannya per kegiatan dapat ia buka kembali sebagai bukti.
Arah kreatif proyek ini adalah infrastruktur tipografis untuk kas kelompok: kertas hangat, warna bergaris sinyal, dan Fira Sans. Musenya adalah Erik Spiekermann — bahasa tipografi humanis, aturan penunjuk arah, dan warna sinyal yang dipakai seperti jalur transit, dengan kehangatan di dalam keteraturan. Headline arah ini: "Iuran kelompok, tercatat rapi."
Mode: light mode.
Warna (token peran):
| Peran | Hex | Penggunaan |
|---|---|---|
| Latar utama (kertas hangat) | #F4F1EA | Latar aplikasi dan landing |
| Permukaan | #FFFFFF | Baris ledger dan bidang input saja |
| Teks / tinta | #1C1B19 | Semua teks dan aturan |
| Primer (sinyal merah) | #B0121B | Iuran belum lunas, aksi destruktif, angka tetap Rp 20.000, garis nav aktif |
| Aksen (sinyal amber) | #F2A800 | Konteks kegiatan, status pending/sebagian |
| Muted | #6B6459 | Metadata, stempel waktu, label |
| Sinyal hijau (khusus lunas) | #1F7A4D | Hanya status "lunas"; tidak pernah dekoratif |
Rasio kira-kira 60% kertas, 25% permukaan putih, 10% aturan tinta, 5% warna sinyal. Warna sinyal tidak pernah mengisi lebih dari satu badge, satu aturan, atau satu angka.
Tipografi:
clamp(34px, 49px) untuk judul halaman dan clamp(40px, 72px) untuk baris hero landing. Angka uang selalu tabular, selalu satu langkah lebih besar dari labelnya.Bahasa bentuk: persegi panjang yang direkayasa, bukan kartu. Radius 4px pada input dan tombol, 0 pada baris tabel dan panel bagian agar ledger terbaca seperti kertas bergaris. Aturan tinta 1px (#1C1B19 pada 14% untuk pemisah internal, 100% untuk batas bagian). Aturan merah 3px di kiri menandai baris aktif atau kegiatan saat ini. Badge bulat hanya untuk chip status (lunas / belum / sebagian), diameter 20px, isian datar, label uppercase 11px di dalamnya. Ikon digambar sebagai piktogram garis 1.5px bergaya rambu transit, tidak pernah terisi, tidak pernah membulat-lucu.
Tata letak: grid 12 kolom yang terlihat dengan gutter 16px di mobile, 24px di 768px, 32px di 1280px, dan aturan baseline 1px di bawah setiap header bagian. Landing adalah kolom editorial rata kiri: baris hero, diagram "cara iuran bekerja" bergaris, lalu daftar fitur bernomor 01–04 dengan setiap nomor di margin seperti entri jadwal. Layar aplikasi memakai app bar atas dengan aturan rambut dan navigasi bawah empat tab bergaris (Beranda, Anggota, Kegiatan, Iuran) yang keadaan aktifnya adalah aturan merah 3px di atas dan label merah, bukan pill terisi. Members dan Payments adalah tabel sungguhan: kolom nama / kegiatan / jumlah / status sejajar tabular, mengalir di 375px menjadi baris bergaris dua baris (nama + jumlah pada baris pertama, kegiatan + chip status pada baris kedua) tanpa ada yang terpotong. Jumlah Rp 20.000 adalah bidang tetap yang tidak dapat diedit, dirender sebagai sel jadwal terkunci dengan glyph kunci kecil, tidak pernah sebagai input teks bebas.
Imagery: tidak ada fotografi dan tidak ada ilustrasi demi dirinya sendiri. Imageri bersifat diagramatis: diagram bergaya peta rute untuk satu kegiatan dengan simpul anggota dan segmen garis lunas/belum lunas; jadwal iuran bergaris yang menunjukkan Rp 20.000 tetap di sepanjang dua belas periode; piktogram 1.5px kecil untuk anggota, kegiatan, pembayaran, dan kuitansi. Bila elemen manusia diperlukan, gunakan foto dokumenter rapat komunitas yang dipotong rata ke grid dalam monokrom dengan satu warna sinyal dipertahankan.
Yang dihindari: primer biru–indigo atau aksen keluarga #2563EB di atas putih; kartu membulat 16–24px dengan bayangan lembut dan hover-lift; gradient blob, glassmorphism, atau panel backdrop buram; hero terpusat dengan tumpukan headline + subteks + tombol; Inter, Roboto, Poppins, atau system-ui sebagai keluarga judul atau body; stok foto orang tersenyum menunjuk ponsel; bidang jumlah teks bebas untuk iuran tetap Rp 20.000; gerakan dekoratif, parallax, atau mikro-interaksi memantul.
Konsep: "Papan Pengumuman yang Dapat Dihitung" — landing sebagai lembar cetak, bukan banner SaaS.
Landing adalah pemberitahuan tercetak. Latar kertas hangat #F4F1EA penuh, tanpa gambar. Di kiri, headline rata kiri selebar 9 kolom dalam Fira Sans SemiBold pada clamp(40px, 72px) — "Iuran kelompok, tercatat rapi." — dengan kata "Rp 20.000" diletakkan pada barisnya sendiri di bawahnya dalam Fira Sans Condensed 600 pada skala display yang sama, berwarna merah sinyal #B0121B, bertindak sebagai elemen grafis dominan hero. Di kanannya, kolom mini-ledger vertikal bergaris (tiga baris: Nama, Kegiatan, Status) dengan chip status amber dan hijau, digambar seolah bagian dari lembar cetak yang sama, tepi kirinya berupa aturan tinta 1px. Di bawah headline, satu tombol merah datar "Mulai catat iuran" setinggi 48px, dan aturan rambut yang membentang sepanjang viewport dengan empat label mikro uppercase (ANGGOTA · KEGIATAN · IURAN TETAP · REKAP) berjarak seperti legenda jalur transit. Tidak ada yang terpusat, tidak ada yang mengambang, tidak ada gradient, tidak ada mockup perangkat.
Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima: penjelasan aplikasi, tombol menuju Sign Up, tautan ke Login, dan representasi visual dari anggota, kegiatan, serta status pembayaran Rp 20.000.
Interaction Model: Static (direction) Motion Tempo: restrained Hero Dimensionality: flat
Landing Hero Motion Brief
NFR-01 — Platform Android (explicit) Aplikasi dibangun sebagai aplikasi Android. Rasional: batasan keras yang dinyatakan pengguna.
NFR-02 — Iuran tetap 20000 (explicit) Besaran iuran bersifat tetap, yaitu 20000, dan tidak dapat diubah menjadi nilai lain. Jumlah dirender sebagai sel jadwal terkunci dengan glyph kunci, bukan bidang teks bebas. Rasional: batasan keras yang dinyatakan pengguna.
NFR-03 — Ketahanan data (required_inference) Data keanggotaan, kegiatan, pembayaran 20000, dan status pembayaran harus disimpan di backend sehingga tetap tersedia saat pengguna kembali. Rasional: diperlukan agar alur yang diterima dapat dijalankan dan dilanjutkan.
NFR-04 — Keterbacaan di layar ponsel (required_inference)
Teks dan kontrol yang dapat dibaca harus tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat; tidak ada elemen lain yang menutupi bagian mana pun darinya. Rasional: audiens memakai ponsel Android kelas menengah, sering di siang hari.
NFR-05 — Aksesibilitas gerakan (required_inference)
Di bawah prefers-reduced-motion, bagian-bagian muncul seketika dan gulir angka digantikan oleh pergantian nilai langsung. Rasional: arah kreatif mensyaratkan keadaan statis yang dapat digunakan.
NFR-06 — Keamanan akses (required_inference) Data terlindungi hanya dapat diakses setelah Login; permukaan Members, Member Details, Activities, dan Activity Details dibatasi untuk peran pengurus. Rasional: diperlukan agar catatan keanggotaan, kegiatan, dan pembayaran tetap terikat pada peserta yang benar.
Asumsi:
Batasan:
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!