System Requirements Document for red-umkm

1. Introduction

red-umkm adalah platform web untuk UMKM (usaha mikro, kecil, dan menengah) di Indonesia. Produk ini memberi setiap pemilik usaha sebuah kehadiran web sendiri yang disajikan pada subdomain umkm, sehingga calon pelanggan dapat menemukan usaha, melihat produk atau layanan, dan menghubungi pemiliknya.

Inti produk adalah dua sisi dari satu hubungan yang sama:

• Pemilik UMKM menyiapkan dan mengelola informasi usahanya — profil usaha, daftar produk atau layanan, dan informasi kontak — melalui area kerja miliknya sendiri.
• Pengunjung / Calon Pelanggan membaca halaman publik tersebut, menelusuri produk atau layanan, dan menemukan saluran kontak yang tersedia.

Audiensnya adalah pemilik warung, katering rumahan, perajin, dan penyedia jasa lokal yang membutuhkan kehadiran web yang layak dipercaya tanpa harus mengerti teknologi, serta pengunjung yang sebagian besar membuka halaman dari ponsel.

2. System Overview

red-umkm adalah aplikasi web dengan dua muka yang berbagi satu sumber data:

1. Halaman publik pada subdomain umkm — permukaan anonim yang menampilkan profil usaha, produk atau layanan, dan informasi kontak. Halaman ini adalah hasil akhir yang dapat dibaca siapa saja.
2. Area kerja Pemilik UMKM — permukaan terbatas yang memerlukan identitas milik aplikasi, tempat pemilik usaha mendaftar, masuk kembali, dan mengelola konten yang tampil di halaman publik.

Konten yang dikelola pemilik usaha bersifat durable: profil usaha, produk atau layanan, dan informasi kontak tersimpan dan tetap terikat pada usaha yang benar, sehingga pemilik dapat kembali kapan saja untuk melanjutkan pengelolaan, dan pengunjung selalu melihat versi yang dipublikasikan.

Aktor saat ini

• Pemilik UMKM (manusia, aktif) — menyiapkan dan mengelola konten web usahanya.
• Pengunjung / Calon Pelanggan (manusia, aktif) — membaca dan menelusuri halaman publik.
• Aplikasi red-umkm (sistem) — menyimpan konten durable, menyajikan halaman publik pada subdomain umkm, dan menegakkan batas akses area kerja.

Batasan yang dikecualikan dari lingkup saat ini

• Tidak ada katalog produk lintas-UMKM, direktori usaha, atau pencarian antar-usaha.
• Tidak ada transaksi, keranjang, pembayaran, atau pengiriman di dalam produk; kontak diarahkan ke saluran milik pemilik usaha.
• Tidak ada peran staf, undangan, atau provisioning; pendaftaran bersifat mandiri.
• Tidak ada domain kustom di luar subdomain umkm.

2a. Product Interpretation and Delivery Boundary

Kepemilikan penyajian. Halaman publik UMKM disajikan oleh aplikasi red-umkm pada subdomain umkm. Ini adalah permukaan milik aplikasi sendiri, bukan halaman pihak ketiga, dan bukan hasil ekspor statis yang dikelola di luar produk.

Kepemilikan akses. Area kerja pengelolaan memerlukan identitas milik aplikasi. Identitas ini diperlukan karena konten yang dikelola bersifat durable dan harus tetap terikat pada pemilik usaha yang benar: hanya pemilik yang boleh mengubah profil, produk atau layanan, dan kontak miliknya, dan ia harus dapat kembali melanjutkan pekerjaannya. Karena itu:

• Landing dan halaman publik lainnya dapat dibuka tanpa identitas — pengunjung tidak perlu akun untuk membaca.
• Sign Up dan Login adalah permukaan masuk yang anonim: keduanya harus dapat dibuka sebelum identitas terbentuk, karena keduanya justru tempat identitas itu dibentuk atau diverifikasi.
• Dashboard, Business Profile, Products, dan Product Editor hanya dapat dibuka setelah identitas pemilik usaha terverifikasi.

Identitas di sini berfungsi untuk kontinuitas kepemilikan, bukan untuk membedakan tingkat izin antar-peran. Tidak ada peran berbeda, tidak ada kontrol visibilitas berbasis peran, dan tidak ada pembagian state produk antar-aktor.

Batas saat ini dan masa depan. Seluruh perilaku yang dijelaskan dalam dokumen ini adalah lingkup saat ini. Tidak ada kemampuan yang ditunda ke horizon masa depan dalam sumber yang diterima.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source dalam sumber, sehingga tidak ada inventaris konten yang disertakan.

2c. Page Content and Component Coverage

Landing

Halaman publik anonim pada subdomain umkm; kesan pertama dan hasil akhir yang dapat dibaca siapa saja.

• Informasi dan state: nama usaha, deskripsi profil usaha, daftar produk atau layanan yang dipublikasikan (nama, deskripsi, harga bila diisi, foto bila diunggah), dan informasi kontak (saluran kontak yang diisi pemilik). State yang mungkin: konten lengkap, konten sebagian (misalnya profil terisi tetapi belum ada produk), dan konten kosong (usaha belum mempublikasikan apa pun).
• Aksi utama: membaca profil usaha; menelusuri produk atau layanan; membuka detail produk; menggunakan saluran kontak yang tersedia.
• Aksi pendukung: berpindah antar-bagian halaman melalui indeks bernomor (01 Profil, 02 Produk, 03 Kontak); menyaring atau menelusuri deretan kategori produk; menuju Sign Up atau Login bila pengunjung adalah pemilik usaha.
• Entitas domain: Usaha (profil), Produk/Layanan, Informasi Kontak, Kategori Produk.
• Tanggung jawab komponen: hero band dengan headline besar dan blok merah berisi nama usaha serta CTA; indeks bagian bernomor dengan garis tinta penuh lebar; deretan kapsul kategori yang bergerak lambat; dinding produk dua kolom yang runtuh menjadi satu kolom di bawah 768px; panel kontak; panel foto produk berbingkai tinta dengan mat krem.
• State: loading — kerangka panel dengan tinggi tetap agar tata letak tidak melompat; empty — pesan jujur bahwa usaha belum mempublikasikan konten, tanpa data contoh yang menyesatkan; success — konten tampil lengkap dan dapat dibaca; error — bila konten gagal dimuat, tampilkan pesan dan tombol coba lagi tanpa menghapus kerangka halaman; recovery — memuat ulang bagian yang gagal tanpa memuat ulang seluruh halaman.

Dashboard

Titik lanjut terverifikasi bagi Pemilik UMKM setelah masuk.

• Informasi dan state: ringkasan status konten usaha — apakah profil usaha sudah terisi, berapa produk atau layanan yang dipublikasikan, apakah informasi kontak sudah lengkap; penanda 'published' bergaya starburst untuk konten yang sudah tampil publik.
• Aksi utama: menuju Business Profile; menuju Products; menuju Product Editor untuk menambah produk baru; membuka halaman publik pada subdomain umkm untuk melihat hasilnya.
• Aksi pendukung: keluar dari sesi.
• Entitas domain: Usaha, Produk/Layanan, Informasi Kontak, Status Publikasi.
• Tanggung jawab komponen: rail navigasi kiri (ikon + label) yang runtuh menjadi bottom tab bar pada 375px; panel ringkasan berisi baris label/nilai dengan angka tabular; penanda starburst untuk state 'published'.
• State: loading — baris label/nilai dalam keadaan skeleton; empty — usaha baru tanpa konten menampilkan ajakan mengisi profil terlebih dahulu; success — ringkasan akurat sesuai konten tersimpan; error — pesan gagal memuat ringkasan dengan tombol coba lagi; recovery — kembali ke Dashboard setelah pemuatan ulang berhasil.

Business Profile

Area pengelolaan profil usaha dan informasi kontak.

• Informasi dan state: nama usaha, deskripsi usaha, dan saluran kontak yang diisi pemilik; nilai tersimpan saat ini; status apakah perubahan sudah dipublikasikan.
• Aksi utama: mengisi atau memperbarui nama usaha; mengisi atau memperbarui deskripsi usaha; mengisi atau memperbarui informasi kontak; menyimpan perubahan sehingga tampil di halaman publik.
• Aksi pendukung: membatalkan perubahan yang belum disimpan; melihat pratinjau hasil di halaman publik.
• Entitas domain: Usaha (profil), Informasi Kontak, Status Publikasi.
• Tanggung jawab komponen: panel bertumpuk berisi baris label/nilai; bidang teks untuk nama dan deskripsi; bidang kontak; tombol simpan berbentuk pil; penanda state 'published'.
• State: loading — bidang dalam keadaan skeleton sebelum nilai tersimpan tiba; empty — usaha baru menampilkan bidang kosong dengan label yang jelas; success — konfirmasi bahwa perubahan tersimpan dan tampil publik; error — pesan validasi pada bidang yang bermasalah dan pesan kegagalan penyimpanan; recovery — perubahan yang gagal simpan tetap ada di layar agar pemilik dapat memperbaiki dan mencoba lagi.

Products

Daftar produk atau layanan yang dapat ditinjau dan dikelola Pemilik UMKM.

• Informasi dan state: daftar produk atau layanan milik usaha ini beserta nama, harga, dan status publikasinya; state kosong bila belum ada produk.
• Aksi utama: meninjau daftar; membuka Product Editor untuk menambah produk baru; membuka Product Editor untuk memperbarui produk yang ada; menghapus produk dari daftar.
• Aksi pendukung: menelusuri daftar bila panjang; kembali ke Dashboard.
• Entitas domain: Produk/Layanan, Harga, Status Publikasi.
• Tanggung jawab komponen: daftar panel produk berbingkai tinta dengan mat krem dan bayangan hangat pendek; angka tabular untuk harga; tombol pil untuk aksi utama; konfirmasi sebelum menghapus.
• State: loading — daftar skeleton dengan tinggi baris tetap; empty — pesan bahwa belum ada produk atau layanan, dengan ajakan menambah yang pertama; success — daftar akurat sesuai konten tersimpan; error — pesan gagal memuat daftar dengan tombol coba lagi; recovery — setelah penghapusan gagal, produk tetap ada di daftar dan pesan kesalahan ditampilkan.

Product Editor

Ruang fokus untuk membuat atau memperbarui satu produk atau layanan.

• Informasi dan state: mode buat atau mode perbarui; nilai bidang produk saat ini; status publikasi produk.
• Aksi utama: mengisi atau memperbarui nama produk atau layanan; mengisi atau memperbarui deskripsi; mengisi atau memperbarui harga; mengunggah atau mengganti foto produk; menyimpan sehingga produk tampil di halaman publik.
• Aksi pendukung: membatalkan dan kembali ke Products tanpa menyimpan; melihat pratinjau foto dalam bingkai berbingkai tinta dengan mat krem.
• Entitas domain: Produk/Layanan, Harga, Foto Produk, Status Publikasi.
• Tanggung jawab komponen: panel formulir berisi baris label/nilai; bidang teks dan bidang harga dengan angka tabular; area unggah foto dengan pratinjau berbingkai; tombol simpan berbentuk pil.
• State: loading — bidang terisi setelah nilai produk tiba pada mode perbarui; empty — mode buat menampilkan bidang kosong dengan label yang jelas; success — konfirmasi bahwa produk tersimpan dan tampil publik; error — pesan validasi pada bidang yang bermasalah, pesan kegagalan unggah foto, dan pesan kegagalan penyimpanan; recovery — isian yang gagal simpan tetap ada di layar agar pemilik dapat memperbaiki dan mencoba lagi.

Sign Up

Permukaan anonim tempat Pemilik UMKM mendaftar sendiri untuk mulai mengelola konten usahanya.

• Informasi dan state: penjelasan singkat bahwa pendaftaran membuka area kerja pengelolaan; bidang identitas pendaftaran; state kosong sebelum diisi.
• Aksi utama: mengisi identitas pendaftaran; mengirim pendaftaran; setelah berhasil, masuk ke area kerja untuk mulai mengisi profil usaha.
• Aksi pendukung: berpindah ke Login bila sudah punya identitas.
• Entitas domain: Identitas Pemilik UMKM, Usaha.
• Tanggung jawab komponen: panel formulir berbingkai tinta; bidang identitas; tombol pil utama; tautan ke Login.
• State: loading — tombol mengirim menampilkan keadaan menunggu; empty — bidang kosong dengan label yang jelas; success — pendaftaran diterima dan pemilik diarahkan ke area kerja; error — pesan bila identitas sudah terdaftar atau bidang tidak valid; recovery — isian tetap ada di layar agar pemilik dapat memperbaiki dan mengirim ulang.

Login

Permukaan anonim tempat Pemilik UMKM memverifikasi kembali identitasnya untuk melanjutkan pengelolaan.

• Informasi dan state: bidang verifikasi identitas; state kosong sebelum diisi.
• Aksi utama: mengisi identitas; mengirim verifikasi; setelah berhasil, melanjutkan ke Dashboard.
• Aksi pendukung: berpindah ke Sign Up bila belum punya identitas.
• Entitas domain: Identitas Pemilik UMKM.
• Tanggung jawab komponen: panel formulir berbingkai tinta; bidang identitas; tombol pil utama; tautan ke Sign Up.
• State: loading — tombol mengirim menampilkan keadaan menunggu; empty — bidang kosong dengan label yang jelas; success — verifikasi diterima dan pemilik diarahkan ke Dashboard; error — pesan bila identitas tidak cocok, tanpa mengungkap data usaha; recovery — isian tetap ada di layar agar pemilik dapat memperbaiki dan mengirim ulang.

3. Functional Requirements

FR-01 — Membuat web untuk UMKM As a Pemilik UMKM, I should memiliki halaman web usaha sendiri untuk usaha mikro, kecil, atau menengah yang saya jalankan, so that usaha saya punya kehadiran web yang dapat ditemukan calon pelanggan.

• Provenance: explicit
• Trigger/input: pemilik usaha memulai penggunaan red-umkm untuk usahanya.
• Observable result: sebuah halaman web usaha yang merepresentasikan usaha tersebut.
• Access state: hasil akhirnya dapat dibaca publik; pengelolaannya memerlukan identitas pemilik.
• Failure/recovery: bila konten belum lengkap, halaman tetap ada dan menampilkan apa yang sudah dipublikasikan.
• Continuation: pemilik melanjutkan dengan mengisi profil usaha, produk atau layanan, dan kontak.

FR-02 — Penyajian pada subdomain umkm As a Pengunjung / Calon Pelanggan, I should membuka halaman web UMKM pada subdomain umkm, so that saya menemukan usaha tersebut di alamat yang konsisten.

• Provenance: explicit
• Trigger/input: pengunjung membuka alamat pada subdomain umkm.
• Observable result: halaman web UMKM tersaji pada subdomain umkm.
• Access state: anonim; tidak memerlukan identitas.
• Failure/recovery: bila konten gagal dimuat, halaman menampilkan pesan dan tombol coba lagi.
• Continuation: pengunjung membaca profil, menelusuri produk atau layanan, dan menggunakan kontak.

FR-03 — Self-service enrollment Pemilik UMKM As a Pemilik UMKM, I should mendaftar sendiri sebelum pertama kali mengelola konten, so that saya dapat mulai mengelola konten durable web usaha saya tanpa menunggu undangan atau provisioning.

• Provenance: required_inference
• Trigger/input: pemilik usaha membuka Sign Up dan mengisi identitas pendaftaran.
• Observable result: identitas pemilik terbentuk dan terhubung ke usahanya; area kerja pengelolaan dapat diakses.
• Access state: Sign Up anonim; area kerja setelahnya terbatas pada pemilik terverifikasi.
• Failure/recovery: bila identitas sudah terdaftar atau bidang tidak valid, pesan kesalahan ditampilkan dan isian tetap ada untuk diperbaiki.
• Continuation: pemilik diarahkan ke area kerja untuk mulai mengisi profil usaha.

FR-04 — Returning verification Pemilik UMKM As a Pemilik UMKM, I should memverifikasi kembali identitas saya saat kembali, so that saya dapat melanjutkan mengelola konten yang tersimpan.

• Provenance: required_inference
• Trigger/input: pemilik usaha membuka Login dan mengisi identitasnya.
• Observable result: sesi pemilik terverifikasi dan konten usahanya yang tersimpan dapat diakses kembali.
• Access state: Login anonim; Dashboard dan area pengelolaan setelahnya terbatas pada pemilik terverifikasi.
• Failure/recovery: bila identitas tidak cocok, pesan kesalahan ditampilkan tanpa mengungkap data usaha, dan isian tetap ada untuk diperbaiki.
• Continuation: pemilik melanjutkan ke Dashboard dan area kerja yang relevan.

FR-05 — Publikasi konten ke subdomain umkm As a Pemilik UMKM, I should mempublikasikan konten yang saya kelola agar tersedia melalui subdomain umkm, so that pengunjung dapat membacanya.

• Provenance: required_inference
• Trigger/input: pemilik menyimpan perubahan pada profil usaha, produk atau layanan, atau informasi kontak.
• Observable result: konten yang disimpan tampil pada halaman publik di subdomain umkm dan ditandai 'published' di area kerja.
• Access state: pengelolaan memerlukan identitas pemilik; hasilnya dapat dibaca anonim.
• Failure/recovery: bila penyimpanan gagal, perubahan tetap ada di layar, pesan kesalahan ditampilkan, dan konten publik tidak berubah.
• Continuation: pemilik dapat kembali meninjau atau memperbarui konten kapan saja.

FR-06 — Mengelola profil usaha As a Pemilik UMKM, I should mengisi dan memperbarui profil usaha saya, so that pengunjung memahami usaha saya.

• Provenance: required_inference
• Trigger/input: pemilik membuka Business Profile dan mengubah nama usaha atau deskripsi usaha.
• Observable result: profil usaha tersimpan dan tampil pada halaman publik.
• Access state: terbatas pada pemilik terverifikasi.
• Failure/recovery: bidang yang tidak valid ditandai; perubahan yang gagal simpan tetap ada di layar.
• Continuation: pemilik melanjutkan ke produk atau kontak.

FR-07 — Mengelola informasi kontak As a Pemilik UMKM, I should mengisi dan memperbarui informasi kontak usaha saya, so that calon pelanggan dapat menghubungi saya.

• Provenance: required_inference
• Trigger/input: pemilik membuka Business Profile dan mengubah saluran kontak.
• Observable result: informasi kontak tersimpan dan tampil pada halaman publik.
• Access state: terbatas pada pemilik terverifikasi.
• Failure/recovery: bidang yang tidak valid ditandai; perubahan yang gagal simpan tetap ada di layar.
• Continuation: pengunjung dapat menggunakan saluran kontak tersebut.

FR-08 — Meninjau daftar produk atau layanan As a Pemilik UMKM, I should meninjau daftar produk atau layanan yang saya tampilkan, so that saya tahu apa yang sudah terlihat pengunjung.

• Provenance: required_inference
• Trigger/input: pemilik membuka Products.
• Observable result: daftar produk atau layanan milik usaha ini tampil beserta harga dan status publikasinya.
• Access state: terbatas pada pemilik terverifikasi.
• Failure/recovery: bila daftar gagal dimuat, pesan dan tombol coba lagi ditampilkan.
• Continuation: pemilik membuka Product Editor untuk menambah atau memperbarui.

FR-09 — Membuat produk atau layanan baru As a Pemilik UMKM, I should membuat entri produk atau layanan baru, so that penawaran saya tampil di halaman publik.

• Provenance: required_inference
• Trigger/input: pemilik membuka Product Editor dalam mode buat dan mengisi nama, deskripsi, harga, serta foto.
• Observable result: produk atau layanan baru tersimpan dan tampil pada halaman publik.
• Access state: terbatas pada pemilik terverifikasi.
• Failure/recovery: bidang yang tidak valid ditandai; kegagalan unggah foto atau penyimpanan ditampilkan dan isian tetap ada.
• Continuation: pemilik kembali ke Products dan melihat entri baru di daftar.

FR-10 — Memperbarui produk atau layanan As a Pemilik UMKM, I should memperbarui detail produk atau layanan yang sudah ada, so that informasi yang dilihat pengunjung tetap benar.

• Provenance: required_inference
• Trigger/input: pemilik membuka Product Editor dalam mode perbarui dari Products dan mengubah detailnya.
• Observable result: perubahan tersimpan dan halaman publik menampilkan versi terbaru.
• Access state: terbatas pada pemilik terverifikasi.
• Failure/recovery: bidang yang tidak valid ditandai; perubahan yang gagal simpan tetap ada di layar.
• Continuation: pemilik kembali ke Products.

FR-11 — Menghapus produk atau layanan As a Pemilik UMKM, I should menghapus produk atau layanan yang tidak lagi ditawarkan, so that halaman publik tidak menampilkan penawaran yang keliru.

• Provenance: required_inference
• Trigger/input: pemilik memilih hapus pada entri di Products dan mengonfirmasi.
• Observable result: entri hilang dari daftar dan dari halaman publik.
• Access state: terbatas pada pemilik terverifikasi.
• Failure/recovery: bila penghapusan gagal, entri tetap ada di daftar dan pesan kesalahan ditampilkan.
• Continuation: pemilik dapat mencoba lagi atau melanjutkan mengelola entri lain.

FR-12 — Membaca profil usaha dan produk atau layanan As a Pengunjung / Calon Pelanggan, I should membaca profil usaha dan menelusuri produk atau layanan yang ditampilkan, so that saya memahami apa yang ditawarkan.

• Provenance: required_inference
• Trigger/input: pengunjung membuka halaman publik pada subdomain umkm dan menelusuri bagian Profil dan Produk.
• Observable result: profil usaha dan daftar produk atau layanan terbaca, termasuk nama, deskripsi, harga, dan foto yang diunggah.
• Access state: anonim; tidak memerlukan identitas.
• Failure/recovery: bila konten gagal dimuat, pesan dan tombol coba lagi ditampilkan.
• Continuation: pengunjung melanjutkan ke bagian Kontak.

FR-13 — Menemukan saluran kontak usaha As a Pengunjung / Calon Pelanggan, I should menemukan cara menghubungi pemilik usaha, so that saya dapat menghubungi atau bertanya langsung.

• Provenance: required_inference
• Trigger/input: pengunjung membuka bagian Kontak pada halaman publik.
• Observable result: informasi kontak yang diisi pemilik tampil dan dapat digunakan.
• Access state: anonim; tidak memerlukan identitas.
• Failure/recovery: bila pemilik belum mengisi kontak, bagian tersebut menyatakan belum tersedia alih-alih menampilkan saluran palsu.
• Continuation: pengunjung menghubungi pemilik melalui saluran tersebut.

4. User Personas

Pemilik UMKM

Konteks produk. Ia menjalankan usaha mikro, kecil, atau menengah — warung, katering rumahan, kerajinan, atau jasa lokal — dan ingin usahanya punya halaman web sendiri di bawah subdomain umkm. Ia biasanya bekerja dari ponsel, sambil menjalankan usahanya, dan tidak ingin berurusan dengan hal teknis.

Tujuan utama. Menyiapkan dan mengelola informasi usahanya — profil, produk atau layanan, dan kontak — agar calon pelanggan dapat menemukan dan menghubunginya, dengan hasil akhir berupa halaman web usaha yang dapat diakses publik.

Tanggung jawab yang diterima. Mendaftar sendiri untuk membuka area kerja; memverifikasi kembali identitas saat kembali; mengisi dan memperbarui profil usaha; mengisi dan memperbarui informasi kontak; meninjau daftar produk atau layanan; membuat, memperbarui, dan menghapus entri produk atau layanan; mempublikasikan konten sehingga tampil di subdomain umkm.

Input dan keputusan. Nama dan deskripsi usaha; saluran kontak yang ingin ditampilkan; nama, deskripsi, harga, dan foto setiap produk atau layanan; keputusan kapan sebuah entri dihapus dari penawaran.

Interaksi dengan peserta lain. Ia adalah satu-satunya pihak yang mengubah konten. Pekerjaannya berujung langsung pada pengalaman Pengunjung / Calon Pelanggan: apa yang ia simpan dan publikasikan adalah apa yang dibaca pengunjung, dan informasi kontak yang ia isi adalah saluran yang dipakai pengunjung untuk menghubunginya.

Keberhasilan yang terlihat. Kontennya tampil pada halaman publik di subdomain umkm, ditandai 'published' di area kerjanya, dan ia dapat kembali kapan saja untuk melanjutkan karena kontennya tersimpan terikat pada usahanya.

Yang membedakan perannya. Ia adalah pemilik state: satu-satunya aktor yang menciptakan dan mengubah konten durable, dan satu-satunya yang memerlukan identitas agar perubahan itu tetap terikat pada usaha yang benar.

Pengunjung / Calon Pelanggan

Konteks produk. Ia menemukan atau membuka halaman web UMKM pada subdomain umkm, biasanya dari ponsel, untuk menilai apakah usaha tersebut menawarkan apa yang ia cari.

Tujuan utama. Memahami usaha tersebut dan menemukan cara menghubungi pemiliknya.

Tanggung jawab yang diterima. Membaca profil usaha; menelusuri produk atau layanan yang ditampilkan; menemukan dan menggunakan saluran kontak yang tersedia. Ia tidak mengubah apa pun.

Input dan keputusan. Bagian mana yang ia baca lebih dulu; produk mana yang ia telusuri; apakah ia memutuskan untuk menghubungi pemilik usaha.

Interaksi dengan peserta lain. Ia adalah penerima hasil kerja Pemilik UMKM. Ia hanya melihat konten yang sudah dipublikasikan, dan pengalamannya sepenuhnya ditentukan oleh kelengkapan konten yang diisi pemilik.

Keberhasilan yang terlihat. Ia memahami usaha tersebut dan memiliki saluran kontak yang dapat ia gunakan.

Yang membedakan perannya. Ia tidak memiliki identitas, tidak memiliki state yang harus dipertahankan, dan tidak dapat mengubah konten; perannya murni membaca dan menghubungi.

5. Core User Flows

Alur A — Pemilik UMKM mendaftar dan mulai mengelola (Pemilik UMKM)

1. Pemilik usaha membuka halaman publik pada subdomain umkm dan melihat halaman Landing usaha yang belum terisi.
2. Ia memilih untuk mulai mengelola dan membuka Sign Up.
3. Ia mengisi identitas pendaftaran dan mengirimkannya.
4. Hasil yang terlihat: pendaftaran diterima, identitas pemilik terbentuk dan terhubung ke usahanya, dan ia diarahkan ke area kerja.
5. Kegagalan dan pemulihan: bila identitas sudah terdaftar atau bidang tidak valid, pesan kesalahan tampil dan isian tetap ada sehingga ia dapat memperbaiki dan mengirim ulang.
6. Lanjutan: ia tiba di Dashboard dan melanjutkan ke Alur B.

Alur B — Pemilik UMKM mengisi profil usaha dan kontak (Pemilik UMKM)

1. Dari Dashboard, pemilik usaha melihat bahwa profil usaha belum terisi dan membuka Business Profile.
2. Ia mengisi nama usaha dan deskripsi usaha.
3. Ia mengisi informasi kontak yang ingin ditampilkan kepada calon pelanggan.
4. Ia menyimpan perubahan.
5. Hasil yang terlihat: profil usaha dan informasi kontak tersimpan, ditandai 'published', dan tampil pada halaman publik di subdomain umkm.
6. Kegagalan dan pemulihan: bila ada bidang yang tidak valid atau penyimpanan gagal, bidang bermasalah ditandai, pesan kesalahan tampil, dan perubahan tetap ada di layar agar ia dapat memperbaiki dan mencoba lagi; konten publik tidak berubah sampai penyimpanan berhasil.
7. Lanjutan: ia kembali ke Dashboard dan melanjutkan ke Alur C.

Alur C — Pemilik UMKM menambah produk atau layanan (Pemilik UMKM)

1. Dari Dashboard, pemilik usaha membuka Products dan melihat daftar yang masih kosong.
2. Ia memilih untuk menambah produk atau layanan baru dan membuka Product Editor dalam mode buat.
3. Ia mengisi nama produk atau layanan, deskripsi, dan harga.
4. Ia mengunggah foto produk dan melihat pratinjaunya dalam bingkai berbingkai tinta dengan mat krem.
5. Ia menyimpan.
6. Hasil yang terlihat: produk atau layanan baru tersimpan, tampil pada halaman publik, dan muncul di daftar Products dengan harga berangka tabular dan status publikasinya.
7. Kegagalan dan pemulihan: bila bidang tidak valid atau unggahan foto gagal, pesan kesalahan tampil dan isian tetap ada sehingga ia dapat memperbaiki dan menyimpan ulang.
8. Lanjutan: ia dapat mengulang langkah 2–5 untuk produk berikutnya, atau kembali ke Dashboard.

Alur D — Pemilik UMKM memperbarui atau menghapus produk atau layanan (Pemilik UMKM)

1. Pemilik usaha membuka Products dan meninjau daftar produk atau layanannya.
2. Untuk memperbarui, ia membuka Product Editor dalam mode perbarui, mengubah detail yang perlu, dan menyimpan.
3. Hasil yang terlihat: halaman publik menampilkan versi terbaru produk atau layanan tersebut.
4. Untuk menghapus, ia memilih hapus pada entri di Products dan mengonfirmasi.
5. Hasil yang terlihat: entri hilang dari daftar dan dari halaman publik.
6. Kegagalan dan pemulihan: bila penyimpanan atau penghapusan gagal, pesan kesalahan tampil; pada kegagalan penghapusan entri tetap ada di daftar, dan pada kegagalan penyimpanan perubahan tetap ada di layar.
7. Lanjutan: ia kembali ke Products atau Dashboard.

Alur E — Pemilik UMKM kembali dan melanjutkan pengelolaan (Pemilik UMKM)

1. Pemilik usaha membuka Login.
2. Ia mengisi identitasnya dan mengirim verifikasi.
3. Hasil yang terlihat: sesinya terverifikasi dan konten usahanya yang tersimpan dapat diakses kembali.
4. Kegagalan dan pemulihan: bila identitas tidak cocok, pesan kesalahan tampil tanpa mengungkap data usaha, dan isian tetap ada agar ia dapat memperbaiki dan mengirim ulang.
5. Lanjutan: ia tiba di Dashboard, melihat ringkasan status kontennya, dan melanjutkan ke Business Profile, Products, atau Product Editor sesuai pekerjaan yang tersisa.

Alur F — Pengunjung / Calon Pelanggan membaca usaha dan menghubungi pemilik (Pengunjung / Calon Pelanggan)

1. Pengunjung membuka halaman publik UMKM pada subdomain umkm dan tiba di Landing tanpa perlu identitas.
2. Ia membaca headline dan nama usaha pada hero band, lalu mengikuti indeks bagian bernomor (01 Profil, 02 Produk, 03 Kontak).
3. Pada bagian Profil, ia membaca deskripsi usaha.
4. Pada bagian Produk, ia menelusuri deretan kapsul kategori dan dinding produk dua kolom (satu kolom di ponsel), lalu membuka detail produk yang menarik baginya untuk melihat deskripsi, harga, dan foto.
5. Pada bagian Kontak, ia menemukan saluran kontak yang diisi pemilik usaha.
6. Hasil yang terlihat: ia memahami usaha tersebut dan memiliki saluran kontak yang dapat digunakan.
7. Kegagalan dan pemulihan: bila konten gagal dimuat, pesan dan tombol coba lagi ditampilkan dan ia dapat memuat ulang bagian tersebut; bila pemilik belum mengisi kontak, bagian tersebut menyatakan belum tersedia alih-alih menampilkan saluran palsu.
8. Lanjutan: ia menghubungi pemilik usaha melalui saluran tersebut.

6. Visuals Colors and Theme

Muse dan headline arah kreatif: Warm modernist marketplace after Charles & Ray Eames — "honest materials, joyful colour held inside strict order, gallery-like sequencing, and craft over gloss." Register emosionalnya hopeful, human, dan hands-on: pemilik usaha kecil yang membangun sesuatu dengan tangannya sendiri dan ingin ditemukan. Bukan korporat, bukan hype-tech, bukan template SaaS generik.

Palet (light mode) — token peran

Tidak ada biru di mana pun; tidak ada gradien; blok warna datar dan full-bleed.

Tipografi

• Heading: Fraunces, weight 600–700, optical size tinggi (SOFT 40, WONK 0), leading rapat 1.02–1.08, tracking -0.01em, sentence case — tidak pernah all-caps untuk headline. Sesekali satu kata dalam Fraunces italic untuk penekanan editorial.
• Body: Work Sans.
• Label kecil: Work Sans 600, 12px, tracking 0.14em, uppercase.
• Skala 1.333 modular, mobile→desktop: h1 clamp(40px, 9vw, 112px); h2 clamp(30px, 5vw, 60px); h3 clamp(22px, 3vw, 32px); body 17px/1.6 mobile → 18px/1.65 desktop; label 12px; caption 14px.
• Angka tabular untuk harga dan statistik.

Bahasa bentuk. Organic-modern: tombol pil dan kapsul radius 999px; kartu radius 20–28px; sesekali panel 'pebble' asimetris dengan satu sudut 0px sebagai tanda handmade. Rule keras 2px berwarna ink membagi bagian seperti dinding galeri. Lingkaran dipakai sebagai medali kategori. Tanpa glow, tanpa blur, tanpa glass. Bayangan hangat dan pendek: 0 6px 0 rgba(42,38,32,0.08) plus border ink 1px, sehingga panel terbaca sebagai kartu tercetak, bukan UI yang melayang.

Layout. Panel modular bergaya galeri pada grid 12 kolom yang terlihat, gutter 24px, max measure 1200px. Storefront publik: hero band full-bleed, lalu dinding produk dua kolom yang runtuh menjadi satu kolom di bawah 768px. Area kerja pemilik: rail navigasi kiri (ikon + label) yang runtuh menjadi bottom tab bar pada 375px, dengan konten dalam panel bertumpuk berisi baris label/nilai. Transisi antar-bagian memakai rule ink penuh lebar dengan indeks bernomor (01 Profil, 02 Produk, 03 Kontak) ala pameran Eames. Kartu produk tidak pernah berupa grid seragam ubin identik dengan hover-lift — kartu bervariasi ukuran dan bergantian isian warna hangat.

Imagery. Fotografi dokumenter hangat: tangan yang bekerja, produk di atas ground krem polos, cahaya alami, sedikit grain film, grading warna mid-century (walnut, mustard, teal). Ditambah tanda aksen bergaya Eames yang digambar tangan — panah melengkung kecil, starburst, rule bertitik — sebagai penanda bagian. Foto produk yang diunggah pemilik dibingkai dalam panel berbingkai ink dengan mat krem lembut, sehingga foto amatir tetap terlihat terkonsep. Tanpa stok orang tersenyum di depan laptop, tanpa blob 3D, tanpa gradien.

Aksesibilitas visual. Teks dan kontrol yang dapat dibaca tetap utuh pada 375px, 768px, dan 1280px: headline, wordmark, label, angka, teks kartu, dan kontrol tetap berada di dalam viewport dan kontainernya, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya), dan tidak ada elemen lain yang menutupinya. Gambar, dekorasi, dan gerak boleh terpotong, bleed, diputar, atau ditumpuk sesuai arah; teks dan kontrol tidak.

7. Signature Design Concept

"Etalase yang Dipajang, Bukan Template."

Halaman publik pada subdomain umkm dibuka sebagai sebuah pameran kecil milik satu usaha.

• Hero band full-bleed setinggi 92vh di desktop dan auto-height di mobile, dengan ground krem hangat #F4EDE1. Di atasnya, sebuah hairline ink tipis membentang penuh lebar, dengan indeks bernomor 01/02/03 di sudutnya.
• Dua per tiga kiri: headline Fraunces oversized berwarna ink, flush-left, hingga 112px di desktop dan 40px pada 375px, ditumpuk di atas blok tomato-red #C6472B solid yang memuat nama usaha, dengan CTA pil tertambat di bawahnya. Tidak ada yang di tengah; tidak ada tumpukan subteks-dan-tombol; tidak ada gradien.
• Satu per tiga kanan: foto dokumenter portrait tinggi dari produk pemilik, bleed keluar dari tepi kanan dan bawah, dibingkai rule ink 2px.
• Di bawah hero: rule ink penuh lebar dengan indeks bernomor — 01 Profil, 02 Produk, 03 Kontak — dalam Work Sans uppercase 12px tracking 0.14em, sehingga halaman publik terbaca sebagai urutan pameran.
• Dinding produk: deretan kapsul kategori yang bergerak lambat di atasnya, lalu kartu produk sebagai panel tercetak berbingkai ink dengan mat krem dan bayangan hangat offset pendek, bergantian isian tomato, teal, dan mustard — bukan grid putih seragam.
• Panel kontak: baris label/nilai dengan angka tabular, ditutup tanda starburst kecil yang digambar tangan.

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

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: foto dokumenter portrait produk pemilik yang bleed keluar dari tepi kanan dan bawah hero band, dibingkai rule ink 2px, dengan blok tomato-red dan headline Fraunces sebagai massa statis di kiri.
• Input → transformation → outcome: saat halaman publik dimuat, panel dan gambarnya naik 12px sambil memudar masuk secara berurutan (400–600ms ease-out), dan hero image band bergerak dalam pan horizontal yang lambat; hasilnya adalah halaman yang terasa seperti pameran yang dibuka perlahan, bukan UI yang muncul sekaligus.
• Motion vocabulary: reveal panel 400–600ms ease-out dengan pergeseran 12px dan fade berurutan; pan horizontal lambat pada hero image band; crossfade 300ms saat hover menukar foto produk dengan foto detailnya; marquee kapsul kategori melayang pada 40s linear. Tanpa bounce, tanpa spring, tanpa parallax depth.
• Composed first frame: hairline ink penuh lebar dengan indeks 01/02/03 di sudut; headline Fraunces flush-left yang sudah terbaca penuh; blok tomato-red dengan nama usaha dan CTA pil di bawahnya; foto produk sudah berada di posisinya, bleed ke tepi kanan dan bawah.
• Reduced-motion state: semua reveal menjadi perubahan state instan tanpa pergeseran atau fade; pan hero berhenti pada frame pertama yang sudah terkomposisi; crossfade hover menjadi pertukaran gambar instan; marquee kategori berhenti dan kapsulnya membungkus menjadi baris statis yang dapat digulir horizontal sehingga setiap kategori dapat dibawa sepenuhnya ke dalam tampilan.

9. Non-Functional Requirements

NFR-01 — Penyajian pada subdomain umkm (explicit) Halaman web UMKM harus disajikan pada subdomain umkm. Ini adalah batasan keras dari sumber dan tidak dapat digantikan oleh domain lain. Rasional: alamat yang konsisten adalah inti dari janji produk.

NFR-02 — Konten durable dan terikat pada usaha yang benar (required_inference) Profil usaha, produk atau layanan, dan informasi kontak harus tersimpan secara durable dan tetap terikat pada usaha pemiliknya, sehingga pemilik dapat kembali melanjutkan pengelolaan dan pengunjung selalu melihat versi yang dipublikasikan. Rasional: tanpa ini, alur kembali (Alur E) dan publikasi (FR-05) tidak dapat berjalan.

NFR-03 — Batas akses area kerja (required_inference) Dashboard, Business Profile, Products, dan Product Editor hanya dapat diakses setelah identitas pemilik usaha terverifikasi; Landing, Sign Up, dan Login harus dapat dibuka tanpa identitas. Rasional: konten durable harus tetap terikat pada pemilik yang benar, sementara pengunjung tidak boleh dihalangi untuk membaca.

NFR-04 — Keterbacaan dan kontrol utuh di setiap viewport (explicit, dari arah kreatif) Teks dan kontrol yang dapat dibaca harus tetap utuh dan berada di dalam viewport serta kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan sesuai kebutuhan; tidak ada elemen lain yang boleh menutupinya. Konten yang bergerak atau dapat digulir boleh melewati tepi viewport atau kontainer sesuai desain, dan pada prefers-reduced-motion harus tersedia susunan statis yang dapat digunakan. Rasional: pengunjung sebagian besar membuka halaman dari ponsel.

NFR-05 — Kinerja pemuatan halaman publik (required_inference) Halaman publik pada subdomain umkm harus menampilkan kerangka tata letak yang stabil selama pemuatan konten, sehingga tata letak tidak melompat saat konten tiba. Rasional: halaman ini adalah kesan pertama dan dibuka pada koneksi seluler.

NFR-06 — Kejelasan kegagalan dan pemulihan (required_inference) Setiap kegagalan pemuatan atau penyimpanan harus menampilkan pesan yang jelas dan menyediakan cara mencoba lagi, tanpa menghapus isian yang belum tersimpan atau mengubah konten publik yang sudah ada. Rasional: pemilik usaha tidak boleh kehilangan pekerjaannya karena kegagalan sementara.

10. Tech Stack

• Frontend: React — antarmuka storefront publik dan area kerja pemilik usaha, dengan token warna, tipografi, dan bentuk dari Bagian 6.
• Backend: Python / FastAPI — satu layanan backend bersama yang menangani identitas pemilik usaha, penyimpanan profil usaha, produk atau layanan, dan informasi kontak, serta penyajian konten publik untuk subdomain umkm.
• Storage: basis data relasional untuk state durable — usaha, identitas pemilik, produk atau layanan, dan informasi kontak — beserta penyimpanan objek untuk foto produk yang diunggah.
• Deployment: Docker dan docker-compose untuk menjalankan frontend, backend, dan basis data sebagai satu set layanan; routing subdomain umkm diarahkan ke penyajian halaman publik.

11. Assumptions and Constraints

Batasan keras

• Web UMKM harus disajikan pada subdomain umkm. (explicit)

Asumsi

• A-01 — Identitas pemilik usaha dimiliki oleh aplikasi red-umkm, dengan pendaftaran mandiri dan verifikasi kembali saat masuk; tidak ada batas undangan atau provisioning yang ditetapkan sumber. (required_inference)
• A-02 — Satu identitas pemilik usaha terhubung ke satu usaha. (required_inference)
• A-03 — Identitas berfungsi untuk kontinuitas kepemilikan konten, bukan untuk membedakan tingkat izin; tidak ada peran berbeda atau kontrol visibilitas berbasis peran. (required_inference)
• A-04 — Foto produk diunggah oleh pemilik usaha dan disimpan oleh aplikasi. (required_inference)
• A-05 — Harga produk adalah nilai yang diisi pemilik usaha dan ditampilkan sebagai teks berangka tabular; tidak ada perhitungan, pajak, atau mata uang yang diproses. (required_inference)
• A-06 — Saluran kontak adalah informasi yang diisi pemilik usaha dan ditampilkan sebagai teks atau tautan; tidak ada pengiriman pesan di dalam produk. (required_inference)

Di luar lingkup saat ini

• Katalog lintas-UMKM, direktori usaha, dan pencarian antar-usaha.
• Transaksi, keranjang, pembayaran, dan pengiriman di dalam produk.
• Peran staf, undangan, dan provisioning.
• Domain kustom di luar subdomain umkm.

12. Glossary

• UMKM — usaha mikro, kecil, dan menengah; segmen pemilik usaha yang menjadi audiens produk ini.
• Subdomain umkm — alamat penyajian halaman web UMKM; batasan keras dari sumber.
• Pemilik UMKM — aktor manusia yang mendaftar, masuk kembali, dan mengelola konten web usahanya.
• Pengunjung / Calon Pelanggan — aktor manusia yang membaca halaman publik dan menghubungi pemilik usaha.
• Landing — halaman publik anonim pada subdomain umkm yang menampilkan profil usaha, produk atau layanan, dan informasi kontak.
• Dashboard — titik lanjut terverifikasi bagi Pemilik UMKM setelah masuk.
• Business Profile — area pengelolaan profil usaha dan informasi kontak.
• Products — daftar produk atau layanan milik usaha yang dapat ditinjau dan dikelola.
• Product Editor — ruang fokus untuk membuat atau memperbarui satu produk atau layanan.
• Sign Up — permukaan anonim untuk pendaftaran mandiri Pemilik UMKM.
• Login — permukaan anonim untuk verifikasi kembali Pemilik UMKM.
• Konten durable — profil usaha, produk atau layanan, dan informasi kontak yang tersimpan dan tetap terikat pada usaha yang benar.
• Dipublikasikan ('published') — state konten yang sudah disimpan dan tampil pada halaman publik di subdomain umkm.