Project Brief – Platform CPNS Tryout dengan AI Analysis

/ (Landing Page / Homepage)

• Fungsi utama: Entry point pertama untuk semua pengunjung, baik yang datang dari SEO, iklan berbayar, media sosial, atau referral. Tujuan utama adalah mengkonversi pengunjung menjadi registered user melalui CTA seperti "Mulai Tryout Gratis" atau "Daftar Sekarang".
• Komponen penting: Hero section dengan headline yang jelas ("Platform Tryout CPNS dengan AI Analysis"), value proposition singkat, section "Cara Kerja Platform" (3 langkah sederhana), section "Kenapa Memilih Kami" (diferensiasi), testimoni dari alumni yang lulus, section pricing (paket gratis vs premium), dan CTA yang menonjol di beberapa titik strategis.
• UX considerations: Halaman harus load cepat (optimasi gambar, lazy loading), mobile-friendly (responsive design), dan memiliki clear visual hierarchy yang mengarahkan mata pengunjung ke CTA utama. A/B testing bisa dilakukan untuk headline, warna CTA, atau posisi testimoni.
• Metrics yang dipantau: Bounce rate, time on page, scroll depth, click-through rate ke halaman register/login, dan conversion rate dari visitor → registered user.

/auth/login & /auth/register

• Fungsi utama: Gerbang autentikasi yang memungkinkan pengguna baru membuat akun dan pengguna lama mengakses kembali akun mereka. Tanpa autentikasi, sistem tidak bisa menyimpan progres, skor, analisis, dan riwayat tryout pengguna.
• Fitur penting: Form registrasi yang simple (email, password, konfirmasi password, nama), validasi real-time, opsi "Lupa Password", opsi "Ingat Saya" untuk login otomatis, dan redirect yang smooth setelah login/register (biasanya ke dashboard atau kembali ke halaman sebelumnya).
• Security considerations: Password hashing (bcrypt), JWT token untuk session management, rate limiting untuk mencegah brute force, dan email verification (opsional tapi recommended untuk mengurangi fake accounts).
• UX considerations: Form harus jelas, error message yang helpful, loading state saat submit, dan opsi untuk login dengan Google/Facebook (social login) jika ingin mengurangi friction registrasi.

/dashboard

• Fungsi utama: Pusat kontrol pengguna yang memberikan overview cepat tentang status belajar, progres, dan akses cepat ke fitur-fitur penting. Dashboard adalah "home base" setelah login, sehingga harus memberikan value segera dan memotivasi pengguna untuk melanjutkan belajar.
• Komponen penting: Ringkasan skor terakhir (TWK, TIU, TKP, total), grafik perkembangan skor dari waktu ke waktu, rekomendasi tryout berikutnya (berdasarkan analisis AI atau paket yang belum dicoba), status langganan/paket aktif, shortcut ke fitur penting (tryout, materi, riwayat, pembayaran), dan notifikasi/reminder jika ada tryout yang belum diselesaikan.
• Personalization: Dashboard bisa menampilkan konten yang berbeda untuk user baru (onboarding, tryout gratis pertama) vs user lama (progres, rekomendasi berdasarkan riwayat), dan untuk user free vs premium (highlight fitur premium yang belum diakses).
• Metrics yang dipantau: Time spent on dashboard, click rate ke fitur-fitur utama, completion rate dari rekomendasi tryout, dan frekuensi kunjungan ke dashboard (indikator engagement).

/tryouts & /tryouts/[slug]

• Fungsi utama: Katalog paket tryout yang membantu pengguna memilih dan memulai simulasi ujian. Halaman ini adalah titik konversi penting, terutama untuk paket berbayar.
• Komponen penting: Daftar paket tryout dengan filter (gratis/premium, fokus TWK/TIU/TKP/paket lengkap), card untuk setiap paket yang menampilkan nama, deskripsi singkat, jumlah soal, durasi, harga (jika berbayar), dan CTA "Mulai Tryout" atau "Beli Paket". Halaman detail paket ([slug]) menampilkan informasi lengkap: deskripsi detail, daftar topik yang dicakup, preview soal (jika tersedia), testimoni dari pengguna yang sudah mencoba, dan pricing yang jelas.
• User flow considerations: Untuk paket gratis, pengguna bisa langsung mulai tryout setelah klik "Mulai Tryout". Untuk paket berbayar, pengguna diarahkan ke halaman pembayaran (Midtrans) terlebih dahulu, dan setelah pembayaran sukses, akses paket otomatis aktif dan pengguna bisa langsung mulai tryout.
• Metrics yang dipantau: Click-through rate dari dashboard → tryout list, conversion rate dari tryout list → mulai tryout (untuk gratis) atau pembayaran (untuk berbayar), dan paket mana yang paling populer (untuk optimasi inventory dan pricing).

/evaluasi-tryout (Halaman Hasil & AI Analysis)

• Fungsi utama: Menampilkan hasil tryout lengkap dengan analisis AI yang mendalam. Ini adalah "moment of truth" yang sangat penting karena di sini pengguna melihat apakah usaha mereka membuahkan hasil dan mendapatkan insight tentang langkah selanjutnya. Halaman ini sering menjadi titik keputusan untuk upgrade paket atau melanjutkan belajar.
• Komponen penting: Ringkasan skor (TWK, TIU, TKP, total) dengan visualisasi yang jelas (progress bar, pie chart), status lulus/tidak lulus per bagian (dengan ambang batas yang jelas), profil AI (misalnya "Pemula Optimis", "Kandidat Berpotensi") dengan penjelasan singkat, section "Kekuatan Anda" dan "Area Perbaikan" dengan list yang actionable, rencana belajar personal (learning plan) yang detail (harian/mingguan dengan target spesifik), tab "Ranking Coach" yang menampilkan analisis ranking dengan level kompetisi (ELITE/ADVANCED/INTERMEDIATE/BASIC), strategi naik ranking, dan proyeksi posisi, serta CTA untuk "Lihat Materi", "Coba Tryout Lain", atau "Upgrade ke Paket Premium" untuk analisis lebih detail.
• AI Analysis detail: Sistem membandingkan performa pengguna dengan database ribuan kandidat sebelumnya, mengidentifikasi pola kesalahan (misalnya "Anda sering salah di soal UUD 1945 Pasal 20-30"), memberikan estimasi peluang lulus berdasarkan tren skor, dan menghasilkan rencana belajar yang disesuaikan dengan waktu yang dimiliki pengguna dan prioritas area yang perlu diperbaiki. AI Ranking Coach (tab terpisah) memberikan analisis mendalam tentang posisi ranking pengguna dengan data ranking tryout dan ranking global, interpretasi level kompetisi, analisis jarak dengan posisi ideal (Top 10 dan passing grade), faktor yang mempengaruhi ranking, strategi konkret untuk naik ranking dengan target peningkatan dan estimasi waktu, serta proyeksi posisi jika skor ditingkatkan dengan 2 skenario berbeda.
• UX considerations: Halaman ini bisa cukup panjang karena banyak informasi, sehingga perlu struktur yang jelas dengan section yang bisa di-collapse/expand, visual hierarchy yang baik (skor besar di atas, detail di bawah), dan opsi untuk download PDF hasil analisis (untuk referensi offline atau sharing).
• Metrics yang dipantau: Time spent on page (indikator apakah analisis dibaca), click-through rate ke halaman materi atau tryout berikutnya, conversion rate ke paket premium (jika user free melihat analisis terbatas), dan frekuensi kembali ke halaman ini (untuk review hasil sebelumnya).

/materials

• Fungsi utama: Repositori materi belajar dan pembahasan yang menjembatani gap antara "tahu salah di mana" (dari analisis) dan "tahu harus belajar apa" (actionable learning). Halaman ini membantu pengguna mengimplementasikan rekomendasi dari AI analysis.
• Komponen penting: Katalog materi yang diorganisir per topik (TWK: UUD 1945, Pancasila, Sejarah; TIU: Deret Angka, Analogi Verbal, Logika; TKP: Integritas, Pelayanan, Kepemimpinan), filter dan search untuk memudahkan pencarian, format materi yang bervariasi (teks, PDF, video jika tersedia), dan link ke materi yang relevan dari halaman evaluasi (contextual linking).
• Integration dengan AI Analysis: Dari halaman evaluasi, pengguna bisa langsung diarahkan ke materi spesifik yang relevan dengan kelemahan mereka (misalnya "Anda lemah di TWK → Pelajari: UUD 1945 Pasal 1-37" dengan link langsung ke materi tersebut).

/help, /ranking, /riwayat-tryout (Halaman Pendukung)

• /help: FAQ, panduan penggunaan, troubleshooting, dan kontak support. Fungsi: mengurangi friction dan confusion, serta meningkatkan trust dengan menunjukkan bahwa platform peduli pada pengguna.
• /ranking: Leaderboard/ranking pengguna berdasarkan skor tertinggi atau frekuensi tryout. Fungsi: memotivasi pengguna untuk terus belajar dan meningkatkan engagement melalui gamification (badge, achievement, kompetisi sehat).
• /riwayat-tryout: Daftar semua tryout yang pernah dikerjakan dengan skor, tanggal, dan link ke detail hasil. Fungsi: memberikan transparansi dan memudahkan pengguna untuk melihat progres mereka dari waktu ke waktu, serta review hasil sebelumnya untuk belajar dari kesalahan.

/admin/... (Panel Admin)

• Fungsi utama: Panel internal bagi tim (admin, content creator, support) untuk mengelola konten, transaksi, dan operasional platform tanpa perlu perubahan kode. Ini memungkinkan produk berkembang secara sustainable.
• Fitur penting: Manajemen soal (tambah, edit, hapus, import bulk), manajemen paket tryout (buat paket baru, set harga, aktifkan/nonaktifkan), manajemen transaksi (lihat daftar pembayaran, handle refund, aktivasi manual), manajemen user (lihat daftar user, handle support request), analytics dashboard (statistik pengguna, revenue, popular paket), dan manajemen konten (materi, FAQ, testimoni).

Jangka Pendek (0-6 bulan):

• Akuisisi User Awal: Target 1,000-5,000 registered users dalam 6 bulan pertama melalui kombinasi SEO (optimasi untuk keyword seperti "tryout CPNS online", "latihan soal CPNS"), iklan berbayar (Google Ads, Facebook/Instagram Ads), dan word-of-mouth. Fokus pada kualitas user (yang benar-benar menggunakan platform) daripada kuantitas semata.
• Validasi Produk: Mengumpulkan feedback dari 100+ early adopters tentang fitur AI analysis, kualitas soal, dan user experience. Target: 70%+ user mengatakan produk membantu mereka dan akan merekomendasikan ke teman (NPS score > 50).
• Revenue Generation: Mulai menghasilkan penjualan paket tryout dengan target revenue Rp 50-100 juta dalam 6 bulan pertama. Conversion rate target: 10-15% dari free user ke paid user. Average transaction value: Rp 100,000-300,000 per paket.
• Product-Market Fit: Mencapai indikator bahwa produk benar-benar dibutuhkan: 40%+ user melakukan 3+ tryout dalam 30 hari, dan 30%+ user menunjukkan peningkatan skor yang signifikan (minimal +10 poin) setelah beberapa sesi tryout.

Jangka Menengah (6-12 bulan):

• Brand Building: Membangun brand sebagai salah satu referensi utama persiapan CPNS di Indonesia. Target: 10,000-20,000 registered users, dengan brand awareness di kalangan calon peserta CPNS mencapai 15-20% (diukur melalui survey atau brand mention tracking).
• Fitur Premium & Diversifikasi: Menambah fitur premium seperti kelas online, mentoring 1-on-1, grup belajar, atau paket khusus untuk instansi tertentu. Target: 30%+ user menggunakan fitur premium, dan fitur premium berkontribusi 40%+ dari total revenue.
• Partnership & Distribution: Bermitra dengan bimbingan belajar offline, komunitas CPNS, atau influencer di bidang pendidikan untuk memperluas jangkauan. Target: 3-5 partnership strategis yang menghasilkan minimal 500 user baru per partner.
• Revenue Growth: Mencapai revenue bulanan Rp 20-50 juta dengan growth rate 20-30% month-over-month. Target ARPU (Average Revenue Per User): Rp 50,000-100,000 per bulan.

Jangka Panjang (12+ bulan):

• Ekosistem Persiapan Karir ASN: Tidak hanya CPNS, tetapi juga menyediakan platform untuk persiapan PPPK (Pegawai Pemerintah dengan Perjanjian Kerja), tes kompetensi ASN, dan pelatihan soft skills untuk ASN. Target: 50,000+ registered users dengan portfolio produk yang mencakup 3-5 jenis persiapan karir ASN.
• Market Leadership: Menjadi top 3 platform persiapan CPNS di Indonesia berdasarkan jumlah user aktif, revenue, dan brand recognition. Target: 20%+ market share di kategori platform tryout CPNS online.
• Sustainability & Profitability: Mencapai break-even point dan kemudian profitability yang sustainable. Target: Gross margin 60%+, net margin 20%+, dengan unit economics yang positif (CAC < LTV/3).
• Expansion Opportunities: Mengeksplorasi ekspansi ke kategori lain (persiapan ujian masuk perguruan tinggi, persiapan tes TOEFL/IELTS) atau geografi lain (jika ada kesempatan), atau menjadi platform B2B yang menyediakan solusi tryout untuk instansi pemerintah atau perusahaan.

1. User Acquisition & Engagement Metrics

• Jumlah Registrasi Baru (New User Sign-ups): Mengukur efektivitas funnel akuisisi (SEO, iklan, campaign, referral). Target: 200-500 registrasi baru per bulan di fase awal, dengan growth 20-30% month-over-month. Cara pengukuran: Track event "user_registered" di analytics, breakdown per channel (organic, paid, referral, direct).
• MAU (Monthly Active Users) & DAU (Daily Active Users):Mengukur apakah produk cukup menarik untuk terus digunakan (retention). Target: MAU 1,000+ dalam 6 bulan, dengan DAU/MAU ratio 20-30% (artinya 20-30% user aktif setiap hari). Cara pengukuran: User yang login atau melakukan action (tryout, lihat materi) dalam periode tertentu.
• Jumlah Tryout yang Diselesaikan per User: Indikator engagement yang kuat. Target: Rata-rata 2-3 tryout per user per bulan untuk user aktif. Semakin banyak tryout yang diselesaikan, semakin tinggi peluang peningkatan skor, word-of-mouth, dan upsell paket. Cara pengukuran: Total completed tryouts / Total active users per bulan.
• Retention Rate (Day 1, Day 7, Day 30): Mengukur seberapa baik produk mempertahankan user. Target: Day 1 retention 40-50% (user yang kembali dalam 24 jam), Day 7 retention 20-30%, Day 30 retention 10-15%. Cara pengukuran: Cohort analysis berdasarkan tanggal registrasi pertama.

2. Monetization Metrics

• Conversion Rate (Free → Paid): Menunjukkan seberapa kuat value produk dirasakan, dan seberapa efektif pengalaman free mengarahkan ke kebutuhan paket premium. Target: 10-15% conversion rate dari free user ke paid user. Cara pengukuran: (Jumlah user yang membeli paket / Jumlah free user yang aktif) × 100%. Breakdown per paket untuk melihat paket mana yang paling menarik.
• Total Revenue Bulanan: Mengukur kesehatan finansial produk secara keseluruhan. Target: Rp 10-20 juta per bulan di fase awal (6 bulan), dengan growth 20-30% month-over-month. Cara pengukuran: Sum dari semua transaksi sukses dalam 1 bulan (dari database transaksi atau Midtrans dashboard).
• ARPU (Average Revenue Per User): Mengukur nilai rata-rata yang dihasilkan per user. Target: Rp 30,000-50,000 per user per bulan di fase awal. Cara pengukuran: Total revenue bulanan / Total active paid users. ARPU yang tinggi menunjukkan bahwa user melihat value tinggi dari produk.
• LTV (Lifetime Value) & CAC (Customer Acquisition Cost):Mengukur unit economics. Target: LTV/CAC ratio minimal 3:1 (artinya revenue dari 1 user sepanjang hidupnya minimal 3x lipat biaya untuk mendapatkan user tersebut). Cara pengukuran: LTV = ARPU × Average customer lifetime (bulan), CAC = Total marketing spend / Jumlah user baru yang didapat.
• Churn Rate (Tingkat Kehilangan User Berbayar): Mengukur seberapa banyak user berbayar yang berhenti menggunakan produk. Target: Churn rate < 10% per bulan. Cara pengukuran: (Jumlah user berbayar yang tidak aktif lagi / Total user berbayar awal bulan) × 100%.

3. Product Effectiveness Metrics

• Rata-rata Peningkatan Skor per Beberapa Sesi Tryout:Mengukur efektivitas produk terhadap outcome belajar yang sebenarnya. Target: 70%+ user menunjukkan peningkatan skor minimal +10 poin setelah 3-5 sesi tryout. Cara pengukuran: Bandingkan skor tryout pertama dengan skor tryout ke-3 atau ke-5 untuk setiap user, hitung persentase user yang naik skor.
• Completion Rate Tryout: Mengukur seberapa banyak user yang menyelesaikan tryout yang sudah dimulai. Target: 80-90% completion rate (artinya 80-90% user yang mulai tryout benar-benar menyelesaikannya). Completion rate yang rendah bisa mengindikasikan masalah UX atau konten yang terlalu sulit/mudah.
• User Satisfaction Score (NPS atau Rating): Mengukur kepuasan user terhadap produk secara keseluruhan. Target: NPS score > 50 (skala -100 sampai +100), atau rating rata-rata 4.5/5.0. Cara pengukuran: Survey singkat setelah user menyelesaikan beberapa tryout, atau rating di halaman tertentu.
• Frekuensi Penggunaan Fitur AI Analysis: Mengukur apakah fitur unggulan (AI analysis) benar-benar digunakan dan dianggap valuable. Target: 60-70% user yang menyelesaikan tryout benar-benar membuka dan membaca halaman AI analysis. Cara pengukuran: Track event "ai_analysis_viewed" dan bandingkan dengan jumlah completed tryouts.

4. Funnel & Conversion Metrics

• Conversion Funnel (Landing → Register → Tryout → Payment):Mengidentifikasi di mana banyak user drop off. Target conversion rate: Landing → Register (5-10%), Register → First Tryout (60-70%), Tryout → Payment untuk paket berbayar (10-15% dari free user). Cara pengukuran: Track setiap step dalam funnel menggunakan analytics tool (Google Analytics, Mixpanel, atau custom event tracking).
• Bounce Rate & Time on Page: Mengukur kualitas traffic dan engagement di halaman-halaman penting. Target: Bounce rate landing page < 50%, time on page > 2 menit untuk halaman yang informatif. Cara pengukuran: Google Analytics atau alternatif.

1. Platform Tryout CPNS Khusus (Direct Competitors)

• Karakteristik: Platform yang fokus 100% pada tryout CPNS, biasanya memiliki bank soal yang besar (1,000+ soal), pembahasan per soal, dan sistem penilaian otomatis. Beberapa mungkin juga menyediakan materi belajar dasar.
• Kekuatan umum: Bank soal yang terus diperbarui sesuai kisi-kisi terbaru, pembahasan yang jelas dan mudah dipahami, harga yang kompetitif (biasanya Rp 50,000-200,000 per paket), dan brand yang sudah dikenal di kalangan calon peserta CPNS.
• Kelemahan umum: Sering hanya menampilkan skor tanpa analisis mendalam, tidak ada rencana belajar personal, kurang fokus pada tracking progres jangka panjang, dan UI/UX yang kadang kurang modern atau mobile-friendly.
• Contoh positioning mereka: "Bank soal CPNS terlengkap", "Pembahasan soal paling detail", atau "Harga termurah".

2. Platform Belajar Umum dengan Paket CPNS (Indirect Competitors)

• Karakteristik: Platform belajar online yang menyediakan berbagai macam kursus (TOEFL, IELTS, ujian masuk perguruan tinggi, dll) dan salah satunya adalah paket CPNS. Biasanya memiliki infrastruktur yang lebih besar dan brand yang lebih kuat.
• Kekuatan umum: Brand recognition yang tinggi, infrastruktur yang matang (video pembelajaran, kelas online, komunitas), dan variasi produk yang luas. Mereka juga biasanya memiliki tim content creator yang besar.
• Kelemahan umum: CPNS bukan fokus utama mereka, sehingga fitur dan konten CPNS mungkin tidak sedetail platform khusus. Harga juga biasanya lebih mahal karena mereka menawarkan paket lengkap dengan berbagai kursus.
• Contoh positioning mereka: "Platform belajar online terlengkap", "Satu platform untuk semua kebutuhan belajar", atau "Dibimbing oleh expert berpengalaman".

3. Bimbingan Belajar Offline (Traditional Competitors)

• Karakteristik: Lembaga bimbingan belajar fisik yang menyediakan kelas tatap muka untuk persiapan CPNS. Biasanya memiliki kurikulum terstruktur, mentor yang berpengalaman, dan komunitas belajar yang kuat.
• Kekuatan umum: Interaksi langsung dengan mentor dan teman belajar, struktur belajar yang sangat terorganisir, dan motivasi dari lingkungan belajar yang kondusif. Mereka juga biasanya memiliki track record yang panjang dengan banyak alumni yang lulus.
• Kelemahan umum: Harga yang sangat mahal (biasanya Rp 2-10 juta untuk paket lengkap), jadwal yang kaku, lokasi yang terbatas (hanya di kota-kota besar), dan kurang fleksibel untuk orang yang sibuk bekerja.
• Contoh positioning mereka: "Bimbingan belajar CPNS terpercaya sejak tahun X", "Guru berpengalaman dengan tingkat kelulusan tinggi", atau "Kelas intensif dengan jaminan lulus".

1. Bank Soal Besar & Terus Diperbarui

Kompetitor yang sukses biasanya memiliki minimal 500-1,000 soal per bagian (TWK, TIU, TKP) yang terus diperbarui sesuai kisi-kisi terbaru dari BKN. Mereka juga mengkategorikan soal berdasarkan tingkat kesulitan dan topik untuk memudahkan latihan terfokus. Aksi: Platform ini harus memiliki minimal 300+ soal per bagian pada fase awal, dengan target mencapai 1,000+ soal per bagian dalam 12 bulan, dan sistem untuk terus menambah soal baru setiap bulan.

2. Pembahasan Soal yang Jelas & Mudah Dipahami

Kompetitor yang baik tidak hanya memberikan kunci jawaban, tetapi juga menjelaskan konsep di balik jawaban yang benar, mengapa pilihan lain salah, dan tips untuk mengerjakan soal serupa. Pembahasan biasanya dilengkapi dengan contoh dan ilustrasi jika diperlukan. Aksi: Setiap soal harus memiliki pembahasan yang minimal 2-3 kalimat, dengan fokus pada konsep bukan hafalan, dan link ke materi terkait untuk memperdalam pemahaman.

3. UI Sederhana & Mobile-Friendly

Kompetitor yang user-friendly memiliki interface yang clean, tidak membingungkan, dan sangat mudah digunakan terutama di mobile (karena banyak calon peserta CPNS mengakses via smartphone). Navigasi yang jelas, loading yang cepat, dan error handling yang baik adalah kunci. Aksi: Platform ini harus dioptimalkan untuk mobile-first, dengan testing di berbagai ukuran layar dan browser, serta memastikan semua fitur utama bisa diakses dengan mudah di mobile.

4. Harga yang Transparan & Kompetitif

Kompetitor yang sukses biasanya menampilkan harga dengan jelas tanpa hidden cost, dan menawarkan variasi paket (gratis, harian, bulanan, tahunan) untuk berbagai kebutuhan dan budget. Mereka juga sering memberikan diskon atau promo untuk menarik user baru. Aksi: Harga harus ditampilkan dengan jelas di halaman pricing, dengan perbandingan fitur antar paket, dan opsi untuk trial gratis sebelum membeli paket berbayar.

5. Testimoni & Social Proof

Kompetitor yang terpercaya menampilkan testimoni dari alumni yang benar-benar lulus CPNS, dengan foto, nama, dan instansi tempat mereka bekerja (jika diizinkan). Mereka juga menampilkan statistik seperti "X% user lulus CPNS" atau "X user sudah lulus". Aksi: Kumpulkan testimoni dari early adopters yang lulus, tampilkan dengan jelas di landing page, dan update statistik secara berkala untuk membangun trust.

1. AI Analysis yang Mendalam & Personal

Sementara kompetitor hanya menampilkan skor (misalnya "Anda benar 70 dari 110 soal"), platform ini memberikan analisis AI yang jauh lebih detail: profil performa pengguna (misalnya "Kandidat Berpotensi"), identifikasi kekuatan dan kelemahan spesifik (misalnya "Anda kuat di TKP dengan skor 85%, tapi lemah di TWK dengan skor 45%, fokus pada UUD 1945 Pasal 1-20 akan meningkatkan skor Anda 8-12 poin"), perbandingan dengan database ribuan kandidat sebelumnya, dan estimasi peluang lulus berdasarkan tren skor. Nilai tambah: Pengguna tidak hanya tahu "berapa skor saya", tetapi juga "mengapa skor saya seperti ini" dan "apa yang harus saya lakukan untuk meningkatkan skor".

2. Rencana Belajar Personal yang Detail & Actionable

Berdasarkan hasil analisis AI, platform ini menghasilkan rencana belajar harian/mingguan yang sangat spesifik (misalnya "Hari 1-3: Fokus UUD 1945 Pasal 1-37, 2 jam/hari, target: memahami 80% konsep dasar") dengan target peningkatan skor yang realistis. Rencana ini disesuaikan dengan waktu belajar yang dimiliki pengguna dan prioritas area yang perlu diperbaiki. Nilai tambah: Pengguna tidak perlu bingung "mulai dari mana" atau "belajar apa dulu" - mereka langsung punya roadmap yang jelas dan terukur.

3. Visualisasi Progres & Estimasi Peluang Lulus

Platform ini tidak hanya menampilkan skor, tetapi juga grafik perkembangan skor dari waktu ke waktu, perbandingan performa antar bagian (TWK vs TIU vs TKP), estimasi peluang lulus berdasarkan tren skor (misalnya "Dengan performa saat ini, Anda memiliki peluang 75% untuk lulus CPNS jika mengikuti ujian dalam 2 bulan"), dan badge/achievement untuk memotivasi konsistensi belajar. Nilai tambah: Pengguna bisa melihat progress mereka secara visual dan merasa termotivasi untuk terus belajar, serta memiliki gambaran realistis tentang kesiapan mereka.

4. Fokus pada Pengalaman Belajar yang Berkelanjutan

Sementara banyak kompetitor fokus pada "one-off tryout" (user membeli paket, mengerjakan tryout sekali, dapat skor, selesai), platform ini dirancang untuk mendukung siklus belajar yang berkelanjutan: tryout → analisis → belajar materi → tryout lagi → analisis lagi → dan seterusnya sampai pengguna mencapai target skor. Fitur seperti progress tracking, reminder untuk belajar, dan rekomendasi tryout berikutnya mendukung hal ini. Nilai tambah: Pengguna tidak hanya "coba-coba" platform sekali, tetapi benar-benar menggunakan platform sebagai partner belajar jangka panjang, yang meningkatkan retention dan lifetime value.

5. Integrasi Materi dengan Analisis (Contextual Learning)

Dari halaman evaluasi AI analysis, pengguna bisa langsung diarahkan ke materi spesifik yang relevan dengan kelemahan mereka (misalnya "Anda lemah di TWK → Pelajari: UUD 1945 Pasal 1-37" dengan link langsung ke materi tersebut). Ini menjembatani gap antara "tahu salah di mana" dan "tahu harus belajar apa". Nilai tambah: Pengguna tidak perlu mencari-cari materi sendiri - mereka langsung tahu apa yang harus dipelajari berdasarkan analisis yang sudah dilakukan.

Frontend Framework & Language

• Next.js 14 dengan App Router: Framework React untuk full-stack application dengan server-side rendering (SSR) dan static site generation (SSG). App Router memungkinkan routing berbasis file system yang lebih intuitif dan performa yang lebih baik. Next.js juga menyediakan API routes untuk backend logic tanpa perlu server terpisah.
• React 18: Library UI dengan fitur seperti Server Components, Suspense, dan Concurrent Rendering untuk performa yang lebih baik. Menggunakan hooks (useState, useEffect, custom hooks) untuk state management dan side effects.
• TypeScript: Superset JavaScript dengan type safety untuk mengurangi bugs dan meningkatkan developer experience. Semua komponen, hooks, dan utility functions menggunakan TypeScript dengan strict mode.
• Kenapa dipilih: Next.js memberikan optimasi out-of-the-box (code splitting, image optimization, prefetching), SEO-friendly dengan SSR, dan developer experience yang excellent. TypeScript membantu catch errors lebih awal dan membuat code lebih maintainable.

Styling & UI Components

• Tailwind CSS: Utility-first CSS framework untuk styling yang cepat dan konsisten. Menggunakan custom theme dengan CSS variables untuk dynamic theming (light/dark mode).
• Radix UI + shadcn/ui pattern: Komponen UI yang accessible, unstyled, dan customizable. Menggunakan Radix UI sebagai base (dialog, dropdown, tabs, dll) dan styling dengan Tailwind untuk konsistensi visual.
• Framer Motion: Library untuk animasi yang smooth dan performant. Digunakan untuk animasi scroll, hover effects, dan transisi halaman.
• Lucide React: Icon library yang modern dan konsisten. Menggantikan kebutuhan untuk custom SVG icons di banyak tempat.

Database & Data Layer

• MongoDB: NoSQL database yang fleksibel untuk menyimpan data seperti user, tryout, soal, attempts, transaksi, dan analisis. Schema-less memungkinkan iterasi cepat tanpa migration yang kompleks.
• Mongoose: ODM (Object Document Mapper) untuk MongoDB yang menyediakan schema validation, middleware, dan query builder. Models didefinisikan di `lib/models/` dengan TypeScript interfaces.
• Struktur data utama: User (dengan subscription info), Tryout (dengan questions array), Attempt (dengan answers dan timings), Transaction (dengan Midtrans integration), Question (dengan pembahasan), Material, dan AI Analysis results.
• Kenapa MongoDB: Fleksibel untuk schema yang mungkin berubah (misalnya menambah field baru di model), mudah untuk scaling horizontal, dan cocok untuk data yang tidak terlalu relational (tidak perlu banyak JOIN seperti di SQL).

Authentication & Security

• Custom JWT-based Auth: Authentication menggunakan JSON Web Tokens (JWT) yang disimpan di HTTP-only cookies untuk security. Token berisi user ID dan expiry time.
• Password Hashing: Menggunakan bcryptjs untuk hashing password dengan salt rounds yang aman. Password tidak pernah disimpan dalam plain text.
• Middleware Protection: Next.js middleware untuk protect routes yang memerlukan authentication (dashboard, tryout, dll). Redirect ke login jika tidak authenticated.
• Rate Limiting: (Perlu implementasi) Untuk mencegah brute force attack pada login dan abuse API endpoints. Bisa menggunakan library seperti `next-rate-limit` atau custom solution.

Payment Gateway

• Midtrans Snap: Payment gateway yang populer di Indonesia dengan support berbagai metode pembayaran (bank transfer, e-wallet, credit card). Menggunakan Midtrans Snap untuk embedded payment form yang tidak perlu redirect ke halaman eksternal.
• Webhook Integration: Midtrans mengirim webhook ke server saat status pembayaran berubah (pending → settlement/cancel). Webhook handler memverifikasi signature dan update status transaksi di database, lalu mengaktifkan akses paket user secara otomatis.
• Retry Logic: Implementasi retry mechanism untuk handle webhook yang gagal atau timeout, dengan exponential backoff untuk menghindari spam ke Midtrans API.
• Vendor Lock-in: Saat ini 100% bergantung pada Midtrans. Untuk mengurangi risiko, bisa dipertimbangkan abstraction layer yang memungkinkan switch ke payment gateway lain di masa depan (tapi ini lower priority).

File Storage (Optional)

• AWS S3: Untuk menyimpan file seperti gambar materi, PDF pembahasan, atau file upload dari admin. Menggunakan AWS SDK untuk upload dan manage files.
• Alternatif: Bisa juga menggunakan Cloudinary (untuk image optimization), atau local storage jika budget terbatas (tapi kurang scalable).

Additional Libraries & Tools

• PDF Generation: jsPDF dan html2canvas untuk generate PDF dari hasil tryout dan analisis. Sudah ada utility di `lib/export-pdf.ts`.
• Form Handling: React Hook Form dengan Zod untuk validation. Memungkinkan form yang kompleks dengan validasi yang kuat dan performant.
• Date Handling: date-fns untuk manipulasi tanggal dan format yang user-friendly.
• Charts & Visualization: Recharts untuk grafik progres skor dan visualisasi data lainnya di dashboard.

1. Memory & Build Performance

• Issue: Build process memerlukan `NODE_OPTIONS=--max-old-space-size=4096` (4GB RAM) untuk menghindari out-of-memory errors. Ini mengindikasikan bahwa aplikasi cukup besar dan mungkin perlu optimasi.
• Dampak: Build time yang lebih lama, dan mungkin memerlukan server dengan RAM yang cukup besar untuk production build.
• Solusi yang bisa dilakukan: Code splitting yang lebih agresif, lazy loading untuk komponen yang jarang digunakan, mengurangi bundle size dengan tree-shaking yang lebih efektif, dan mempertimbangkan micro-frontend architecture jika aplikasi terus berkembang.

2. Database Scaling

• Issue: MongoDB perlu di-scale (baik vertical dengan upgrade server, atau horizontal dengan sharding/replication) saat jumlah user dan data meningkat. Query yang tidak optimal bisa menyebabkan slow response time.
• Dampak: Jika tidak di-scale dengan baik, aplikasi bisa menjadi lambat atau bahkan down saat traffic tinggi (misalnya saat ada tryout massal atau campaign besar).
• Solusi yang bisa dilakukan: Implementasi database indexing yang tepat untuk query yang sering dilakukan, caching untuk data yang tidak sering berubah (misalnya daftar tryout, materi), connection pooling untuk mengoptimalkan koneksi database, dan monitoring query performance untuk mengidentifikasi slow queries.

3. Server Scaling & Infrastructure

• Issue: Next.js bisa di-deploy sebagai serverless (Vercel) atau traditional server. Untuk aplikasi dengan traffic tinggi, mungkin perlu multiple instances dengan load balancer.
• Dampak: Biaya hosting bisa meningkat signifikan jika traffic tinggi, dan perlu perencanaan untuk handle traffic spike (misalnya saat ada tryout massal atau campaign marketing).
• Solusi yang bisa dilakukan: Gunakan CDN untuk static assets, implementasi caching strategy (Redis atau in-memory cache), dan pertimbangkan serverless architecture untuk auto-scaling. Monitoring tools (seperti Vercel Analytics atau custom solution) untuk track performance dan identify bottlenecks.

4. Payment Gateway Dependency

• Issue: 100% bergantung pada Midtrans untuk semua proses pembayaran online. Jika Midtrans down atau ada masalah, semua transaksi berbayar tidak bisa diproses.
• Dampak: Revenue loss saat Midtrans mengalami downtime, dan tidak ada fallback payment method.
• Solusi yang bisa dilakukan: (Lower priority) Implementasi abstraction layer untuk payment gateway, sehingga bisa switch ke provider lain (Xendit, Doku, dll) jika diperlukan. Atau setidaknya memiliki manual activation flow untuk handle edge cases.

5. Analytics & Event Tracking

• Issue: Analytics belum terintegrasi penuh. Perlu implementasi event tracking untuk action penting (register, start_tryout, complete_tryout, view_ai_analysis, purchase) untuk mendapatkan insight tentang user behavior dan conversion funnel.
• Dampak: Sulit untuk membuat data-driven decisions tanpa analytics yang proper. Tidak tahu di mana user drop off, atau fitur mana yang paling digunakan.
• Solusi yang bisa dilakukan: Integrasi Google Analytics 4 (GA4) atau alternatif seperti Mixpanel, Amplitude, atau PostHog. Setup event tracking di frontend untuk semua action penting, dan buat dashboard analytics di admin panel untuk monitoring KPI secara real-time.

6. AI Analysis Processing

• Issue: AI analysis mungkin memerlukan processing time yang cukup lama jika database kandidat besar dan algoritma kompleks. Jika dilakukan secara synchronous, user harus menunggu lama untuk melihat hasil.
• Dampak: User experience yang kurang baik jika harus menunggu terlalu lama, atau bahkan timeout jika processing terlalu berat.
• Solusi yang sudah diimplementasikan: Untuk endpoint ranking analysis (`/api/ai/analyze-ranking`), telah diimplementasikan optimasi dengan in-memory caching (TTL 10 detik) untuk global ranking dan tryout ranking, optimasi query database dengan limit top 1000 users dan sort sebelum grouping, optimasi AI model dengan mengurangi max_tokens (4096 → 3000) dan temperature (0.7 → 0.5), serta compound indexes untuk ranking queries. Hasil: response time turun dari ~22 detik menjadi ~5-8 detik (60-70% lebih cepat). Solusi yang bisa ditambahkan: Implementasi background job processing (misalnya menggunakan queue system seperti Bull atau BullMQ dengan Redis) untuk handle AI analysis secara asynchronous. User bisa melihat hasil "sedang diproses" dan mendapat notifikasi saat selesai. Atau setidaknya show loading state yang jelas dan estimasi waktu processing.

7. Ranking API Performance Optimization

• Issue yang sudah diatasi: Endpoint `/api/ai/analyze-ranking` sebelumnya mengalami response time 22+ detik yang terlalu lambat untuk pengalaman user yang baik. Root causes: query database tidak efisien (mengambil semua attempts tanpa limit), tidak ada caching, AI API call lambat, dan tidak ada optimization strategy.
• Solusi yang sudah diimplementasikan: (1) In-Memory Caching:Cache 10 detik untuk global ranking dan tryout ranking dengan auto-cleanup untuk mencegah memory leak; (2) Optimized Database Queries:Limit ke top 1000 users, sort sebelum grouping untuk efisiensi, dan compound indexes untuk ranking queries; (3) AI Model Optimization:Mengurangi max_tokens dari 4096 → 3000 (25% lebih cepat) dan temperature dari 0.7 → 0.5 (response lebih konsisten dan cepat), timeout dari 30s → 20s untuk faster failure detection; (4) Database Indexes:Compound indexes untuk `finishedAt`, `resultData.score`, `tryoutId`, dan `userId` untuk mempercepat ranking queries.
• Hasil optimasi: Total response time turun dari ~22s menjadi ~5-8s (60-70% lebih cepat), DB query time (first request) dari ~3-5s menjadi ~1-2s (50-60% lebih cepat), DB query time (cached) dari ~3-5s menjadi ~100-200ms (95% lebih cepat), AI response time dari ~15-18s menjadi ~8-12s (30-40% lebih cepat). Cache hit rate expected: 70-80% dengan traffic normal.
• Trade-offs: Ranking data bisa delay 10 detik (acceptable trade-off), memory usage naik sedikit (~1-2MB per cache entry), top 1000 users only untuk global ranking (99% users masih tercover). Future enhancements: Redis caching untuk distributed cache, background jobs untuk pre-compute rankings, materialized views, atau streaming responses.

1. Survey Kebutuhan & Kesulitan Belajar CPNS

• Tujuan: Memahami pain points utama calon peserta CPNS dalam persiapan ujian, apa yang mereka butuhkan, dan apa yang kurang dari solusi yang ada saat ini.
• Metode: Survey online (Google Forms, Typeform, atau SurveyMonkey) dengan 10-15 pertanyaan singkat. Distribusikan via media sosial, komunitas CPNS, atau email ke early adopters.
• Pertanyaan kunci: "Apa kesulitan terbesar Anda dalam persiapan CPNS?", "Fitur apa yang paling Anda butuhkan di platform tryout?", "Berapa budget yang Anda siapkan untuk persiapan CPNS?", "Platform tryout apa yang pernah Anda coba dan mengapa tidak cocok?", "Apa yang membuat Anda percaya bahwa suatu platform bisa membantu Anda lulus?"
• Target responden: Minimal 100-200 responden yang merupakan calon peserta CPNS (belum pernah lulus atau ingin lulus lagi). Breakdown per persona: 40% fresh graduate, 40% honorer/kontrak, 20% professional switcher.
• Timeline: 2-3 minggu untuk distribusi dan pengumpulan data, kemudian 1 minggu untuk analisis dan sintesis insight.

2. Usability Testing untuk Flow Tryout & AI Analysis

• Tujuan: Mengidentifikasi friction points dalam user journey, apakah flow tryout mudah dipahami dan diikuti, apakah halaman AI analysis memberikan value yang jelas, dan di mana user merasa confused atau stuck.
• Metode: Moderated usability testing dengan 5-8 peserta (sesuai dengan "5 users is enough" principle dari Nielsen). Setiap sesi 30-45 menit, dengan task-based scenarios seperti "Daftar akun baru, pilih tryout gratis, kerjakan tryout, dan lihat hasil analisis". Record screen dan audio untuk analisis mendalam.
• Task scenarios: (1) "Anda baru pertama kali menggunakan platform ini, coba daftar dan mulai tryout gratis pertama", (2) "Setelah melihat hasil analisis, coba cari materi yang direkomendasikan untuk memperbaiki kelemahan Anda", (3) "Coba beli paket premium dan lihat perbedaan fitur dengan paket gratis", (4) "Coba lihat progres belajar Anda dari waktu ke waktu".
• Metrics yang diukur: Task completion rate (berapa % user yang berhasil menyelesaikan task), time to complete task, number of errors/clicks, dan subjective satisfaction (rating 1-5 untuk kemudahan penggunaan).
• Timeline: 1-2 minggu untuk recruitment, 1 minggu untuk testing, 1 minggu untuk analisis dan dokumentasi findings.

3. Feedback tentang Kejelasan Rekomendasi Belajar

• Tujuan: Memastikan bahwa rencana belajar personal yang dihasilkan AI benar-benar actionable dan mudah dipahami oleh pengguna. Apakah pengguna tahu apa yang harus dilakukan setelah melihat rekomendasi?
• Metode: In-app feedback form yang muncul setelah user melihat AI analysis (opsional, tidak wajib untuk menghindari friction). Atau interview singkat (15-20 menit) dengan 10-15 user yang sudah menggunakan fitur AI analysis.
• Pertanyaan kunci: "Apakah rekomendasi belajar yang diberikan jelas dan mudah dipahami?", "Apakah Anda tahu apa yang harus dilakukan setelah melihat rekomendasi?", "Apakah target peningkatan skor yang diberikan realistis?", "Apakah Anda merasa termotivasi untuk mengikuti rencana belajar yang diberikan?", "Apa yang kurang dari rekomendasi saat ini?"
• Action items: Berdasarkan feedback, iterasi pada format dan konten rencana belajar (misalnya tambahkan contoh konkret, breakdown yang lebih detail, atau visualisasi yang lebih jelas).

4. A/B Testing untuk Conversion Optimization

• Tujuan: Mengoptimalkan conversion rate dengan testing variasi elemen UI/UX seperti headline, CTA button, warna, posisi elemen, atau copywriting.
• Metode: A/B testing menggunakan tools seperti Vercel Edge Functions, Google Optimize, atau custom solution. Test satu variasi pada satu waktu untuk isolasi variabel.
• Contoh test yang bisa dilakukan: (1) Headline landing page: "Platform Tryout CPNS dengan AI Analysis" vs "Dari Tryout ke Lulus, Satu Platform", (2) CTA button: "Mulai Tryout Gratis" vs "Daftar Sekarang", (3) Pricing page: Tampilkan testimoni di atas vs di bawah section pricing, (4) Halaman hasil: Tampilkan rencana belajar di atas vs di bawah section analisis.
• Success metrics: Conversion rate (visitor → registered user, free → paid), click-through rate, time on page, dan bounce rate. Test sampai mencapai statistical significance (biasanya minimal 1,000-2,000 visitors per variasi).

1. Funnel Analytics

• Conversion Funnel: Landing page → Register → First Tryout → Complete Tryout → View AI Analysis → Purchase (untuk free user). Track conversion rate di setiap step untuk mengidentifikasi di mana banyak user drop off.
• Drop-off Analysis: Jika banyak user drop off di step tertentu (misalnya 70% user register tapi hanya 30% yang mulai tryout pertama), perlu investigasi lebih lanjut: apakah ada friction di UI, apakah onboarding kurang jelas, atau apakah ada technical issue?
• Tools: Google Analytics 4 dengan custom events, atau Mixpanel/Amplitude untuk funnel analysis yang lebih detail.

2. Engagement Metrics

• Bounce Rate: Persentase user yang meninggalkan halaman tanpa melakukan action apapun. Target: < 50% untuk landing page, < 30% untuk halaman dalam aplikasi.
• Time on Page: Rata-rata waktu yang dihabiskan user di halaman tertentu. Halaman yang informatif (seperti AI analysis) seharusnya memiliki time on page yang lebih lama (minimal 2-3 menit).
• Scroll Depth: Seberapa jauh user scroll di halaman (25%, 50%, 75%, 100%). Jika banyak user tidak scroll sampai bawah, mungkin konten terlalu panjang atau tidak menarik.
• Completion Rate Tryout: Persentase user yang menyelesaikan tryout yang sudah dimulai. Target: 80-90%. Jika completion rate rendah, mungkin tryout terlalu panjang atau ada technical issue.
• Frekuensi Penggunaan Fitur: Berapa kali user menggunakan fitur tertentu (AI analysis, materi, ranking) dalam periode tertentu. Fitur yang jarang digunakan mungkin perlu di-improve atau di-remove.

3. User Behavior Analytics

• Heatmaps: Visualisasi di mana user paling banyak klik, scroll, atau hover di halaman. Tools seperti Hotjar atau Microsoft Clarity bisa digunakan. Berguna untuk mengidentifikasi area yang menarik perhatian atau area yang diabaikan.
• Session Recordings: Rekaman sesi user (dengan anonymization) untuk melihat bagaimana user berinteraksi dengan platform. Berguna untuk mengidentifikasi confusion points atau bugs yang tidak terdeteksi.
• User Paths: Alur navigasi yang paling sering dilakukan user (misalnya: Dashboard → Tryout List → Tryout Detail → Start Tryout → Results). Membantu memahami apakah user journey sesuai dengan yang diharapkan.
• Feature Usage: Tracking penggunaan fitur spesifik (misalnya berapa % user yang menggunakan fitur "download PDF hasil analisis", atau berapa % user yang membuka halaman ranking). Membantu mengidentifikasi fitur yang valuable vs fitur yang tidak digunakan.

4. Performance Metrics

• Page Load Time: Waktu yang diperlukan untuk halaman load sepenuhnya. Target: < 3 detik untuk halaman utama, < 2 detik untuk halaman dalam aplikasi. Slow load time bisa menyebabkan bounce rate tinggi.
• Time to Interactive (TTI): Waktu sampai halaman benar-benar interaktif (bisa diklik, diisi form, dll). Target: < 5 detik.
• Error Rate: Persentase request yang menghasilkan error (4xx atau 5xx). Target: < 1%. High error rate mengindikasikan technical issue yang perlu segera diatasi.
• API Response Time: Waktu response untuk API calls (misalnya load daftar tryout, submit jawaban, generate AI analysis). Target: < 1 detik untuk API calls sederhana, < 5 detik untuk processing yang kompleks (seperti AI analysis).

Nama Brand

• Nama sementara: CPNS Tryout. Nama ini masih bisa berubah sesuai hasil riset branding dan positioning yang lebih matang.
• Opsi alternatif yang dipertimbangkan: TemanCPNS (ramah, seperti teman yang membantu), JagoCPNS (menekankan keahlian dan kesuksesan), ASNPrime (premium, untuk target yang lebih high-end), atau TryoutCPNS.id (simple, SEO-friendly).
• Kriteria nama ideal: Mudah diingat, mudah dieja, relevan dengan produk (CPNS/tryout), tersedia domain .com/.id, dan tidak terlalu mirip dengan kompetitor.

Logo & Visual Identity

• Status saat ini: Menggunakan favicon.svg sederhana. Logo final perlu didesain dengan mempertimbangkan: skalabilitas (bisa digunakan dari favicon sampai billboard), readability di berbagai ukuran, dan konsistensi dengan brand personality (modern, edukatif, tech-forward).
• Elemen visual yang bisa dipertimbangkan: Ikon yang menggambarkan pembelajaran/edukasi (buku, lampu, grafik naik), elemen AI/tech (circuit, nodes), atau simbol yang terkait dengan CPNS/ASN (bendera, simbol negara). Hindari elemen yang terlalu kompleks atau tidak jelas maknanya.

Primary Colors

• Teal Primary: #0EA5A4 - Warna utama brand yang digunakan untuk CTA buttons, links, dan elemen interaktif utama. Teal dipilih karena memberikan kesan modern, profesional, dan trustworthy tanpa terlalu "corporate" seperti biru tua.
• Teal Variants: Teal yang lebih gelap untuk hover states, teal yang lebih terang untuk background atau highlight. Konsistensi dalam penggunaan: primary teal untuk action utama, darker teal untuk emphasis, lighter teal untuk subtle highlights.

Secondary Colors

• AI/Technology Accent: Biru atau ungu untuk elemen yang terkait dengan AI analysis (misalnya badge "AI Analysis", icon AI, atau section AI di halaman hasil). Warna ini membantu membedakan fitur AI dari fitur lainnya dan memberikan kesan tech-forward.
• Success/Positive: Hijau untuk indikator sukses (lulus, skor tinggi, achievement unlocked). Biasanya menggunakan green-500 atau green-600 untuk kontras yang baik.
• Warning/Attention: Kuning atau orange untuk peringatan (waktu tryout hampir habis, skor rendah, perlu perbaikan). Biasanya menggunakan yellow-500 atau orange-500.
• Error/Negative: Merah untuk error atau indikator negatif (gagal, tidak lulus, error message). Biasanya menggunakan red-500 atau red-600.
• Neutral Grays: Abu-abu untuk teks, border, dan background. Menggunakan scale dari gray-50 (paling terang) sampai gray-900 (paling gelap) untuk konsistensi. Di dark mode, scale dibalik (gray-900 menjadi terang, gray-50 menjadi gelap).

Dark Mode Support

• Platform mendukung dark mode dengan color scheme yang dioptimalkan untuk readability dan eye strain reduction. Background menggunakan dark gray (bukan hitam murni) untuk mengurangi kontras yang terlalu tajam, dan teks menggunakan light gray (bukan putih murni) untuk kenyamanan membaca.
• Primary teal tetap digunakan di dark mode, tapi mungkin perlu sedikit adjustment (lebih terang atau lebih gelap) untuk kontras yang optimal dengan background dark.

1. Ramah namun Profesional

• Menggunakan bahasa Indonesia yang jelas dan mudah dipahami, menghindari jargon teknis yang tidak perlu, tapi tetap menunjukkan expertise dan profesionalisme.
• Contoh yang baik: "Selamat! Skor Anda meningkat 15 poin dari tryout sebelumnya. Ini menunjukkan bahwa strategi belajar Anda bekerja dengan baik." (ramah, memberikan konteks, dan profesional).
• Contoh yang kurang baik: "Skor naik 15 poin." (terlalu singkat, kurang ramah) atau "Kami dengan bangga mengumumkan bahwa berdasarkan analisis algoritma machine learning yang kompleks, performa Anda menunjukkan peningkatan signifikan sebesar 15 poin." (terlalu formal dan teknis).

2. Memberi Harapan & Motivasi tanpa Overselling

• Menggunakan bahasa yang memotivasi dan memberikan harapan realistis, tanpa membuat janji yang berlebihan atau tidak bisa dipenuhi.
• Contoh yang baik: "Dengan konsistensi belajar dan mengikuti rekomendasi, Anda memiliki peluang tinggi untuk meningkatkan skor. Banyak pengguna yang menunjukkan peningkatan signifikan dalam 30 hari." (realistis, memberikan harapan, dengan data pendukung).
• Contoh yang kurang baik: "Dijamin lulus CPNS dalam 30 hari!" (overselling, tidak realistis) atau "Mungkin skor Anda akan naik, mungkin tidak." (terlalu pesimis, tidak memotivasi).

3. Data-Driven & Insightful

• Banyak menyebut angka, persentase, dan insight berbasis analisis untuk memberikan kredibilitas dan value yang konkret.
• Contoh yang baik: "Anda kuat di TKP dengan skor 85%, tapi lemah di TWK dengan skor 45%. Fokus belajar UUD 1945 Pasal 1-20 akan meningkatkan skor Anda sekitar 8-12 poin dalam 2 minggu, berdasarkan data dari 1,000+ kandidat sebelumnya." (spesifik, data-driven, actionable).
• Contoh yang kurang baik: "Anda perlu belajar lebih banyak di TWK." (tidak spesifik, tidak data-driven) atau "Skor Anda rendah, coba belajar lebih keras." (tidak memberikan insight atau rekomendasi konkret).

1. Card-based Design

• Menggunakan card untuk mengelompokkan konten yang terkait (misalnya card untuk setiap tryout, card untuk section di dashboard, card untuk testimoni). Card memberikan visual hierarchy yang jelas dan membuat konten lebih mudah di-scan.
• Card biasanya memiliki: border yang subtle, shadow yang lembut untuk depth, padding yang cukup untuk breathing room, dan rounded corners untuk kesan modern.

2. Gradient & Visual Effects

• Menggunakan gradient lembut (biasanya dari primary teal ke varian yang lebih terang atau lebih gelap) untuk background hero section, CTA buttons, atau highlight elements. Gradient memberikan kesan modern dan menarik tanpa terlalu "busy".
• Hindari gradient yang terlalu kontras atau terlalu banyak warna, karena bisa mengganggu readability dan terlihat tidak profesional.

3. Icons & Illustrations

• Menggunakan Lucide React icons untuk konsistensi visual. Icons digunakan untuk: navigasi (menu, back, forward), actions (download, share, bookmark), status (success, error, warning), dan kategori (TWK, TIU, TKP).
• Untuk ilustrasi yang lebih kompleks (misalnya ilustrasi di landing page, empty states, atau onboarding), bisa menggunakan custom illustrations atau stock illustrations yang sesuai dengan brand style (modern, clean, edukatif).

4. Charts & Data Visualization

• Menggunakan Recharts untuk grafik progres skor, perbandingan performa, atau visualisasi data lainnya. Grafik harus: mudah dibaca (label yang jelas, warna yang kontras), informatif (menunjukkan insight yang penting), dan konsisten dengan brand colors.
• Grafik biasanya digunakan di: dashboard (progres skor dari waktu ke waktu), halaman hasil (perbandingan TWK/TIU/TKP), dan halaman ranking (leaderboard).

5. Mobile-First & Responsive Design

• Semua desain dioptimalkan untuk mobile terlebih dahulu (karena banyak user mengakses via smartphone), kemudian di-scale up untuk tablet dan desktop. Prinsip: konten penting harus terlihat di mobile tanpa perlu scroll terlalu banyak, CTA harus mudah diakses, dan form harus mudah diisi di mobile.
• Breakpoints yang digunakan (Tailwind default): sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Layout menyesuaikan di setiap breakpoint untuk optimal experience.

1. Landing Page / Homepage

• Sections yang perlu di-capture: Hero section (headline, CTA utama), section "Cara Kerja Platform" (3 langkah), section "Kenapa Memilih Kami" (diferensiasi), section testimoni, section pricing (paket gratis vs premium), dan footer.
• Versi: Desktop (1920x1080 atau 1440x900) dan Mobile (375x667 atau 390x844 untuk iPhone). Pastikan semua section terlihat tanpa perlu scroll terlalu banyak di setiap capture.
• Tujuan capture: Untuk diskusi tentang conversion optimization (apakah CTA cukup menonjol? Apakah value proposition jelas?), dan untuk dokumentasi desain saat ini sebelum iterasi.

2. Daftar Tryout & Halaman Pengerjaan Tryout

• Daftar Tryout: Capture halaman yang menampilkan list paket tryout dengan filter (gratis/premium, fokus TWK/TIU/TKP). Tunjukkan bagaimana card tryout ditampilkan, informasi apa yang ditampilkan (nama, deskripsi, jumlah soal, harga), dan CTA untuk mulai/beli.
• Halaman Pengerjaan Tryout: Capture interface tryout yang menampilkan: soal dengan pilihan jawaban, timer countdown, navigasi soal (next/previous, jump to question), progress indicator (soal ke-X dari Y), dan tombol submit. Tunjukkan bagaimana user berinteraksi dengan tryout.
• Versi: Desktop dan Mobile (karena tryout mungkin lebih sering diakses via mobile).
• Tujuan capture: Untuk usability testing dan diskusi tentang UX flow (apakah navigasi jelas? Apakah timer cukup visible? Apakah interface tidak membingungkan?).

3. Halaman Hasil & AI Analysis / Evaluasi Tryout

• Sections yang perlu di-capture: Ringkasan skor (TWK, TIU, TKP, total) dengan visualisasi, status lulus/tidak lulus, profil AI dengan penjelasan, section "Kekuatan Anda" dan "Area Perbaikan", rencana belajar personal (learning plan), dan CTA untuk action selanjutnya (lihat materi, coba tryout lain, upgrade premium).
• Versi: Desktop dan Mobile. Karena halaman ini bisa cukup panjang, mungkin perlu beberapa capture untuk menunjukkan semua section (atau gunakan full-page screenshot).
• Tujuan capture: Untuk diskusi tentang apakah analisis AI memberikan value yang jelas, apakah rencana belajar mudah dipahami, dan apakah visualisasi data (grafik, progress bar) membantu atau membingungkan.

4. Dashboard User

• Sections yang perlu di-capture: Ringkasan skor terakhir, grafik perkembangan skor dari waktu ke waktu, rekomendasi tryout berikutnya, status langganan/paket aktif, shortcut ke fitur penting, dan notifikasi/reminder (jika ada).
• Versi: Desktop dan Mobile. Dashboard mungkin memiliki layout yang berbeda di mobile (stacked layout) vs desktop (grid layout).
• Tujuan capture: Untuk diskusi tentang apakah dashboard memberikan overview yang jelas dan memotivasi user untuk melanjutkan belajar, apakah informasi penting mudah ditemukan, dan apakah personalization bekerja dengan baik.

5. Halaman Pendukung Lainnya

• Halaman yang juga penting: Halaman register/login (untuk diskusi tentang friction di proses registrasi), halaman pricing detail (untuk diskusi tentang conversion optimization), halaman materi (untuk diskusi tentang apakah materi mudah ditemukan dan diakses), dan halaman help/FAQ (untuk diskusi tentang apakah pertanyaan umum terjawab).

1. CTA Utama di Landing Page

• Area yang perlu di-annotate: Hero section dengan CTA button "Mulai Tryout Gratis" atau "Daftar Sekarang".
• Pertanyaan untuk diskusi: Apakah CTA cukup menonjol (warna, ukuran, posisi)? Apakah copywriting CTA jelas dan compelling? Apakah ada friction yang mencegah user klik CTA (misalnya form yang terlalu panjang, atau requirement yang tidak jelas)?
• A/B Testing opportunity: Test variasi copywriting ("Mulai Tryout Gratis" vs "Daftar Sekarang" vs "Coba Gratis"), warna button (primary teal vs alternative color), atau posisi (di hero vs di bawah section tertentu).

2. Struktur Teks di Halaman AI Analysis

• Area yang perlu di-annotate: Section profil AI, section "Kekuatan Anda" dan "Area Perbaikan", dan section rencana belajar.
• Pertanyaan untuk diskusi: Apakah teks terlalu panjang atau terlalu singkat? Apakah perlu ringkasan singkat di atas sebelum detail? Apakah hierarchy informasi jelas (mana yang paling penting, mana yang sekunder)? Apakah user tahu apa yang harus dilakukan setelah membaca analisis?
• Improvement opportunity: Mungkin perlu tambahkan "TL;DR" (Too Long; Didn't Read) summary di atas, atau breakdown menjadi tab/section yang bisa di-collapse untuk mengurangi cognitive load.

3. Alur Pembayaran Midtrans (Khususnya di Mobile)

• Area yang perlu di-annotate: Flow dari klik "Beli Paket" → halaman konfirmasi → redirect ke Midtrans → halaman pembayaran Midtrans → kembali ke platform setelah pembayaran sukses.
• Pertanyaan untuk diskusi: Apakah flow pembayaran jelas dan tidak membingungkan? Apakah user tahu apa yang akan terjadi setelah klik "Beli"? Apakah redirect ke Midtrans smooth atau ada friction? Apakah setelah pembayaran sukses, user tahu apa yang harus dilakukan selanjutnya?
• Mobile-specific concerns: Apakah Midtrans payment form mobile-friendly? Apakah ada issue dengan popup atau redirect di mobile browser? Apakah user bisa dengan mudah kembali ke platform setelah pembayaran?

4. Area Lainnya yang Perlu Di-annotate

• Navigation & Menu: Apakah navigasi jelas dan mudah diakses? Apakah menu mobile (hamburger menu) user-friendly?
• Form Fields: Apakah form register/login jelas? Apakah validasi error message helpful? Apakah ada field yang tidak perlu atau membingungkan?
• Empty States: Bagaimana tampilan saat user belum punya data (belum ada tryout, belum ada progres)? Apakah empty state memotivasi user untuk action atau justru membuat mereka bingung?
• Loading States: Bagaimana tampilan saat data sedang di-load atau AI analysis sedang diproses? Apakah loading state memberikan feedback yang jelas atau membuat user bingung menunggu?