Appearance
Screenshot Comparison: Figma Design vs Live Website
Sumber:
- Figma Site — target redesign
- Live Website — current production (authenticated via soulmapatlas@gmail.com)
Tanggal: 16 Mei 2026
Metode: Playwright headless screenshot (1280×800 viewport, full-page capture, scroll-to-bottom untuk trigger animasi)
Total screenshots: 25+ (2 figma + 23 live)
Executive Summary
Figma site hanya memiliki 2 halaman aktif (Home, Pricing) sebagai marketing landing page dengan 6 wisdom systems yang dijanjikan. Live website memiliki app berfungsi penuh dengan 4 wisdom systems aktif (Numerology, BaZi, Human Design, Primbon), model bisnis "Inner Guide" plan, dan beberapa fitur yang tidak disebutkan di Figma.
Temuan paling kritis:
- Figma janjikan 6 systems (Astrology, Numerology, Human Design, Primbon, Ba Zi, Psychology) — live app hanya punya 4 (Numerology, BaZi, Human Design, Primbon)
- Figma design pakai subscription tiers (Free/Rp14.900/Rp49.000/Rp89.000) — live app pakai "Inner Guide" plan dengan quota-based access
- Live app punya fitur tidak ada di Figma: Personality Profile, AI Sessions, Deep Insights, Journal Streak, Tests Done counter
- Journal adalah premium feature di live app — Figma sebut journal sebagai fitur gratis di nav
| Aspek | Figma | Live Website |
|---|---|---|
| Halaman aktif | 2 (Home, Pricing) | 5+ (Dashboard, Compatibility, Journal, Profile, Home) |
| Wisdom systems | 6 (dijanjikan) | 4 (aktif: Numerology, BaZi, Human Design, Primbon) |
| Model bisnis | Subscription tiers | Inner Guide plan + quota-based |
| Journal | Free (nav link) | Premium (locked) |
| Compatibility | Disebut di footer | Full page dengan 4 systems |
1. Screenshot: Figma Home vs Live Home (Authenticated)
Figma Home
Elemen terlihat:
- Navigasi: Home | Dashboard | Journal | Compatibility | Pricing | Settings | Get Started
- Hero section: "✨ Navigate Your Inner Universe" — 6 wisdom traditions (Astrology, Numerology, Human Design, Primbon, Ba Zi, Psychology)
- Stats marketing: 50k+ Soul Seekers, 100k+ Maps Created, 4.9★ Rating
- CTA: "Start Mapping →" dan "Learn More"
- Section "Ancient Wisdom Meets Modern Science" dengan 6 kartu wisdom tradition
- Footer: Explore (Dashboard, Journal, Compatibility Test, Pricing), Resources (Blog, Guides, Community, Support), Connect (Instagram, Twitter, Facebook, Contact)
Live Home (Authenticated)
Elemen terlihat:
- Navigasi: Soul Map Atlas | Dashboard | Compatibility Test | Journal | Profile icon
- Hero: "Soul Map Atlas — The Awakening Engine"
- Tidak ada 6 wisdom systems card
- Tidak ada marketing stats
- Tidak ada CTA "Start Mapping"
- Page sangat minimal, hanya judul dan tagline
2. Screenshot: Figma Pricing vs Live Dashboard
Figma Pricing
4 tier subscription:
| Tier | Harga | Fitur Utama |
|---|---|---|
| Free | Free | 1 Personality Test, 1 Compatibility test, Read insight |
| Most Popular | Rp14.900 | + Compatibility unlimited 2 month, Wallet info, Advanced Growth analytics, Email feedback |
| Monthly | Rp49.000 | + Compatibility unlimited 1 month, Send email bloomy, Extend reading |
| Premium | Rp89.000 | + Custom Wallet discovery, Compatibility unlimited 3 month, Priority support |
Live Dashboard
Elemen terlihat:
- Welcome: "Welcome, soulmapatlas"
- Plan: "Inner Guide" (Active) — bukan subscription tier dari Figma
- Personality Profile: Created (May 13), Regenerate button
- Compatibility Access: Deep Insights, 0/5 used, Start Deep Insights button
- Journal Entries: 8/100
- AI Sessions: 1/10
- Quick Actions: Compatibility Test, Inner Growth Journal
- Journey Snapshot: Current Plan (Inner Guide), Tests Done (0), Last Reflection (Invalid Date), Journal Streak (7 days)
3. Screenshot: Live Compatibility Test
Elemen terlihat:
- Judul: "Relationship Compatibility Engine"
- Subtitle: "Multi-system compatibility reading — Numerology, BaZi, Human Design & Primbon"
- 4 system tabs: Numerologi, BaZi, Human Design, Primbon
- Tidak ada Astrology atau Psychology
- Input form: First Person / Second Person (Full Name, Birth Date)
- Connection Type: Romantic, Friendship, Family, Business
- "Unlock Deep Insights" — Add birth time & location for deeper BaZi and Human Design analysis
- "Analyze Compatibility" button
- Disclaimer: permission untuk enter another person's details
- Footer: "Powered by Numerology · BaZi · Human Design · Primbon"
4. Screenshot: Live Journal (Premium Locked)
Elemen terlihat:
- Judul: "Inner Growth Journal"
- Subtitle: "Your personal reflection history, patterns, and evolving journey"
- 3 locked cards (premium feature indicators)
- Premium Feature banner: "Unlock Your Growth Journal"
- Deskripsi: "Daily reflections, AI guidance, and growth tracking based on your destiny profile"
- CTA: "View Plans & Pricing →"
- Journal adalah premium feature — tidak gratis seperti yang diimplikasikan Figma nav
5. Perbandingan Fitur Detail
5.1 Wisdom Systems
| System | Figma (Dijanjikan) | Live App (Aktif) | Backend Status |
|---|---|---|---|
| Astrology | ✅ Dijanjikan | ❌ Tidak ada | ❌ Tidak ada endpoint |
| Numerology | ✅ Dijanjikan | ✅ Ada | ⚠️ Client-side only |
| Human Design | ✅ Dijanjikan | ✅ Ada | ⚠️ Enum only, no prompt |
| Primbon | ✅ Dijanjikan | ✅ Ada | ⚠️ Weton client-side |
| Ba Zi | ✅ Dijanjikan | ✅ Ada | ✅ Full endpoint |
| Psychology | ✅ Dijanjikan | ❌ Tidak ada | ⚠️ Enum only, no prompt |
Kesimpulan: Live app hanya implementasi 4 dari 6 systems yang dijanjikan Figma. Astrology dan Psychology tidak ada sama sekali di live app.
5.2 Model Bisnis
| Aspek | Figma | Live App | Backend |
|---|---|---|---|
| Pricing model | Subscription tiers | Inner Guide plan | ⚠️ Partial (quota-based) |
| Free tier | 1 Personality Test, 1 Compatibility | Personality Profile (created), limited quota | ✅ |
| Paid tiers | Rp14.900 / Rp49.000 / Rp89.000 | Deep Insights (0/5 used), Journal (premium) | ⚠️ Doku pay-per-insight |
| Subscription | Monthly recurring | Tidak terlihat | ❌ Tidak ada |
Kesimpulan: Figma design pakai model subscription yang belum ada di backend. Live app pakai model quota-based yang berbeda.
5.3 Fitur Live App yang Tidak Ada di Figma
| Fitur | Detail |
|---|---|
| Personality Profile | Created date, Regenerate button |
| Deep Insights | Compatibility upgrade dengan 0/5 quota |
| AI Sessions | Counter 1/10 |
| Journal Streak | 7 days tracking |
| Tests Done | Counter |
| Last Reflection | Date tracking |
| Connection Types | Romantic, Friendship, Family, Business |
| Consent/Terms Flow | Mandatory acceptance sebelum akses app |
5.4 Fitur Figma yang Tidak Ada di Live App
| Fitur | Detail |
|---|---|
| Astrology | Tidak ada halaman maupun backend |
| Psychology | Tidak ada halaman maupun backend |
| Marketing Stats | 50k+ Soul Seekers, 100k+ Maps Created, 4.9★ Rating |
| Community | Blog, Guides, Community, Support links di footer |
| Social Media | Instagram, Twitter, Facebook, Contact |
| 6 System Cards | Figma punya 6 kartu, live hanya 4 |
6. Gap Analysis Kritis
🔴 Critical Gaps (Block Redesign)
- Model bisnis mismatch — Figma = subscription, Live = quota-based Inner Guide plan
- 2 systems missing — Astrology & Psychology tidak ada di live app maupun backend
- Journal status — Figma implikasikan gratis, Live = premium locked
🟡 High Priority Gaps
- Pricing page — Figma punya 4 tiers, Live tidak punya halaman pricing yang comparable
- Marketing content — Figma punya stats & social proof, Live tidak ada
- Community features — Figma punya Blog/Guides/Community/Support, Live tidak ada
🟢 Alignments (Sudah Cocok)
- Auth flow — Login + consent flow ada di live, Figma tidak detail tapi "Get Started" mengimplikasikan auth
- Compatibility — Kedua punya compatibility test
- Journal — Kedua punya journal (tapi status berbeda: gratis vs premium)
- Dashboard — Kedua punya dashboard concept
7. Rekomendasi untuk Redesign
Sebelum Mulai Redesign
Putuskan scope wisdom systems:
- Opsi A: Implementasi 6 systems (butuh Astrology + Psychology backend baru)
- Opsi B: Fokus 4 systems yang sudah ada (Numerology, BaZi, Human Design, Primbon)
- Opsi C: Hapus Astrology & Psychology dari Figma design
Putuskan model bisnis:
- Opsi A: Keep quota-based Inner Guide plan (sesuai live app)
- Opsi B: Switch ke subscription tiers (sesuai Figma — butuh backend migration besar)
- Opsi C: Hybrid (freemium + subscription)
Definisikan journal status:
- Gratis (sesuai Figma nav implication)
- Premium (sesuai live app)
- Freemium (limited entries gratis, unlimited premium)
Scope Redesign yang Realistis
| Halaman | Prioritas | Catatan |
|---|---|---|
| Home/Landing | High | Marketing page dengan 4 systems (bukan 6) |
| Dashboard | High | Ada di live app, perlu redesign |
| Compatibility Test | High | Full feature, 4 systems |
| Journal | Medium | Premium locked — putuskan akses |
| Pricing | Medium | Butuh keputusan model bisnis |
| Profile/Settings | Medium | Ada di live app |
| Astrology | Low | Tidak ada backend |
| Psychology | Low | Tidak ada backend |
| Community/Blog | Low | Tidak ada backend |
Appendix: Screenshots Archive
| File | Sumber | Halaman | Status |
|---|---|---|---|
figma-home.png | Figma | Home | ✅ Marketing page lengkap |
figma-pricing.png | Figma | Pricing | ✅ 4-tier subscription |
live-home-auth.png | Live | Home (auth) | ✅ Minimal hero page |
live-dashboard.png | Live | Dashboard | ✅ Full dashboard dengan stats |
live-compatibility.png | Live | Compatibility Test | ✅ 4-system engine |
live-journal.png | Live | Journal | ✅ Premium locked |
live-consent-page.png | Live | Consent (post-login) | ✅ Terms acceptance |
Screenshots di-commit ke Git di apps/docs/plans/assets/screenshots/.