Skip to main content
Navigation

Product Requirements Document - Implementation

8. UI/UX Requirements​

8.1 Design Principles​

  1. Simplicity: Complex data presented in digestible formats
  2. Speed: Instant feedback, no loading spinners for < 500ms operations
  3. Education: Contextual help without overwhelming users
  4. Accessibility: WCAG 2.1 AA compliance
  5. Mobile-First: Responsive design, touch-friendly

8.2 Key Screens​

1. Homepage / Stock Screener​

Purpose: Primary entry point, stock discovery

Layout:

┌────────────────────────────────────────────────────────┐
│ Header: Logo | Search | Login/Account                  │
├────────────────────────────────────────────────────────┤
│ Hero: "Find your next investment in 60 seconds"        │
│ Templates: [High Dividend] [Growth] [Value] [Custom]   │
├────────────────────────────────────────────────────────┤
│ Filters Panel (Left)      │ Results Table (Right)      │
│ ┌──────────────────────┐  │ ┌────────────────────────┐ │
│ │ Market: [x] KOSPI    │  │ │ Stock | Price | PER |  │ │
│ │         [ ] KOSDAQ   │  │ │ Samsung | 70,000 | 12 │ │
│ │                      │  │ │ ...                    │ │
│ │ Valuation            │  │ └────────────────────────┘ │
│ │ PER: [__] - [15]     │  │ Pagination: 1 2 3 ... 10  │
│ │ PBR: [__] - [1.0]    │  │                            │
│ │                      │  │                            │
│ │ Growth               │  │                            │
│ │ Revenue Growth:      │  │                            │
│ │ [10%] - [__]         │  │                            │
│ │                      │  │                            │
│ │ [Apply Filters]      │  │                            │
│ └──────────────────────┘  │                            │
└────────────────────────────────────────────────────────┘
│ Today's Hot Stocks: [Stock1] [Stock2] [Stock3] ...     │
└────────────────────────────────────────────────────────┘

Interactions:

  • Click template → Auto-populate filters
  • Adjust sliders → Real-time result update (debounced)
  • Click stock → Navigate to detail page
  • Sort by column header
  • Export to CSV button (Premium)

2. Stock Detail Page​

Purpose: In-depth analysis of individual stock

Layout:

┌────────────────────────────────────────────────────────────┐
│ Header                                                     │
├────────────────────────────────────────────────────────────┤
│ Samsung Electronics (005930)                   [Watchlist] │
│ KOSPI | Semiconductors                                     │
│ ₩70,000 (+2,500 +3.57%)                                    │
├────────────────────────────────────────────────────────────┤
│ Tabs: [Overview] [Financials] [Valuation] [Technicals]    │
├────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────┐   │
│ │             Price Chart (TradingView)                │   │
│ │                                                      │   │
│ │   [1D] [1W] [1M] [3M] [6M] [1Y] [5Y]                │   │
│ └──────────────────────────────────────────────────────┘   │
│                                                            │
│ ┌─────────────────┐ ┌─────────────────┐ ┌──────────────┐  │
│ │ Valuation       │ │ Profitability   │ │ Growth       │  │
│ │ PER: 12.3       │ │ ROE: 15.2%      │ │ Revenue: +8% │  │
│ │ PBR: 0.85       │ │ ROA: 8.1%       │ │ Profit: +12% │  │
│ │ PSR: 1.2        │ │ Net Margin: 10% │ │ EPS: +15%    │  │
│ └─────────────────┘ └─────────────────┘ └──────────────┘  │
│                                                            │
│ Financial Summary (5 years bar chart)                     │
│ ┌──────────────────────────────────────────────────────┐   │
│ │ Revenue:  ███ ███ ███ ███ ███                        │   │
│ │ Profit:   ██  ██  ██  ███ ███                        │   │
│ └──────────────────────────────────────────────────────┘   │
└────────────────────────────────────────────────────────────┘

Interactions:

  • Hover over metrics → Tooltip with explanation
  • Switch chart timeframes
  • Toggle between quarterly/annual data
  • Add to watchlist (authenticated users)
  • Create alert (Premium)

3. Portfolio Page​

Purpose: Track user's holdings and performance

Layout:

┌────────────────────────────────────────────────────────────┐
│ My Portfolios                                   [+ New]    │
├────────────────────────────────────────────────────────────┤
│ [Growth Portfolio ▼] [Value Portfolio] [Dividend Portfolio]│
├────────────────────────────────────────────────────────────┤
│ Total Value: ₩50,250,000      (+₩2,500,000 +5.24%)        │
│ vs KOSPI: +2.1% (outperforming)                            │
│                                                            │
│ Performance Chart (1M)                                     │
│ ┌──────────────────────────────────────────────────────┐   │
│ │         /\    /\                                     │   │
│ │        /  \  /  \    /\                              │   │
│ │ ──────/────\/────\──/──\─────────────                │   │
│ └──────────────────────────────────────────────────────┘   │
│                                                            │
│ Holdings:                                       [+ Add]    │
│ ┌──────────────────────────────────────────────────────┐   │
│ │Stock     │Shares│Avg Cost│Current│ Gain/Loss │ % │   │   │
│ ├──────────┼──────┼────────┼───────┼───────────┼───┤   │   │
│ │Samsung   │ 10   │ 68,000 │70,000 │+20,000    │+3%│   │   │
│ │Hyundai   │ 5    │200,000 │195,000│-25,000    │-3%│   │   │
│ └──────────────────────────────────────────────────────┘   │
│                                                            │
│ Asset Allocation (Pie Chart)                               │
│ ┌──────────────────────────────────────────────────────┐   │
│ │  Tech: 60%  █████                                    │   │
│ │  Auto: 30%  ███                                      │   │
│ │  Finance: 10% █                                      │   │
│ └──────────────────────────────────────────────────────┘   │
└────────────────────────────────────────────────────────────┘

Interactions:

  • Switch between portfolios
  • Add new holding (search stock, enter details)
  • Edit/delete holdings
  • View transaction history
  • Export to Excel

4. Mobile Views​

Responsive Breakpoints:

  • Mobile: < 768px (single column, stacked components)
  • Tablet: 768px - 1024px (2 columns)
  • Desktop: > 1024px (full layout)

Mobile-Specific Features:

  • Bottom navigation bar (Home, Screen, Portfolio, Account)
  • Swipeable charts
  • Collapsible filter panel
  • Pull-to-refresh for real-time updates

8.3 Accessibility Requirements​

RequirementImplementation
Keyboard NavigationAll interactive elements accessible via Tab, Enter, Esc
Screen ReaderSemantic HTML, ARIA labels, alt text for images
Color ContrastWCAG AA: 4.5:1 for text, 3:1 for UI components
Focus IndicatorsVisible focus rings for all interactive elements
Text ScalingSupport up to 200% zoom without breaking layout
Error MessagesClear, actionable error messages with suggestions

8.4 Design System​

Color Palette:

  • Primary: #2563eb (Blue - trust, stability)
  • Success: #10b981 (Green - positive gains)
  • Danger: #ef4444 (Red - losses, alerts)
  • Warning: #f59e0b (Yellow - caution)
  • Neutral: #6b7280 (Gray - text, borders)

Typography:

  • Headings: Pretendard (Korean-optimized), Inter (English fallback)
  • Body: Pretendard, system fonts
  • Code/Numbers: JetBrains Mono (monospace)

Components:

  • Buttons: Rounded corners, hover states, disabled states
  • Tables: Striped rows, sortable columns, sticky headers
  • Charts: Consistent color scheme, tooltips, zoom controls
  • Forms: Inline validation, clear error messages
  • Cards: Shadow on hover, clear hierarchy

9. Success Metrics​

9.1 Key Performance Indicators (KPIs)​

Product Metrics​

MetricTargetMeasurementFrequency
Active Users (MAU)50,000 by Month 12Google AnalyticsMonthly
Screening Sessions100,000/month by Month 6App telemetryMonthly
Avg Session Duration8+ minutesGoogle AnalyticsWeekly
User Retention (30-day)40%Cohort analysisMonthly
Conversion Rate (Free → Paid)5%Subscription funnelMonthly
Churn Rate< 5% monthlySubscription cancellationsMonthly
NPS (Net Promoter Score)> 50User surveysQuarterly

Technical Metrics​

MetricTargetMeasurementFrequency
API Response Time (p95)< 200msAPM (Sentry)Real-time
Screening Query Time (p99)< 500msAPMReal-time
Page Load Time (p95)< 1.5sRUMReal-time
Uptime99.9%Uptime monitoringMonthly
Error Rate< 0.1%Error trackingReal-time
Cache Hit Rate> 80%Redis metricsDaily

Business Metrics​

MetricTargetMeasurementFrequency
Monthly Recurring Revenue (MRR)$50K by Month 12Billing systemMonthly
Customer Acquisition Cost (CAC)< $20Marketing spend / new usersMonthly
Lifetime Value (LTV)> $100Cohort analysisQuarterly
LTV:CAC Ratio> 5:1CalculatedQuarterly

9.2 Success Criteria by Milestone​

Month 3 (Beta Launch)​

  • 1,000 registered users
  • 10,000 screening sessions
  • < 1% error rate
  • Screening queries < 500ms (p99)
  • Core features complete (screening, stock detail, basic portfolio)

Month 6 (Public Launch)​

  • 10,000 active users
  • 50,000 screening sessions/month
  • 100 paid subscribers
  • $3,000 MRR
  • 30% user retention (30-day)
  • NPS > 40

Month 12 (Growth Phase)​

  • 50,000 active users
  • 100,000 screening sessions/month
  • 2,500 paid subscribers (5% conversion)
  • $50,000 MRR
  • 40% user retention (30-day)
  • NPS > 50
  • Featured in major Korean financial media

9.3 Measurement & Analytics​

Tools:

  • Google Analytics 4: User behavior, funnel analysis
  • Mixpanel: Event tracking, cohort analysis, A/B testing
  • Sentry: Error tracking, performance monitoring
  • LogRocket: Session replay for debugging UX issues
  • Stripe/Billing System: Revenue metrics

Key Events to Track:

  • User Registration
  • First Screening
  • Stock Detail View
  • Watchlist Add
  • Portfolio Created
  • Subscription Upgrade
  • Alert Created
  • Export Data
  • Session Duration
  • Feature Usage Frequency

10. Development Roadmap​

10.1 Phase 1: MVP (Months 1-3)​

Goal: Functional screening platform with core features

Features:

  • Stock screening (20 key indicators)
  • Stock detail pages (basic charts + financials)
  • User authentication (email/password)
  • Search functionality
  • Responsive web design (desktop + mobile)

Infrastructure:

  • Frontend (React + Vite + Tailwind)
  • Backend (FastAPI + PostgreSQL)
  • Data pipeline (daily KRX prices)
  • Basic caching (Redis)
  • Deployment (Docker + basic CI/CD)

Success Criteria:

  • 1,000 beta users
  • Screening < 500ms (p99)
  • 99% uptime

Timeline: 12 weeks

  • Week 1-2: Setup, architecture, DB schema
  • Week 3-5: Backend API development
  • Week 6-8: Frontend development
  • Week 9-10: Data pipeline + indicator calculations
  • Week 11: Testing, bug fixes
  • Week 12: Beta launch

10.2 Phase 2: Public Launch (Months 4-6)​

Goal: Feature-complete platform ready for public launch

Features:

  • Expand to 200+ indicators
  • Real-time hot stocks section
  • Portfolio management (basic)
  • Pre-built screening templates
  • OAuth login (Kakao, Naver, Google)
  • Subscription tiers (Free/Basic/Pro)
  • Payment integration (Stripe)
  • Educational content (metric explanations)

Infrastructure:

  • TimescaleDB for time-series data
  • Advanced caching strategy
  • Kubernetes deployment
  • Monitoring (Grafana + Prometheus)
  • Security hardening

Success Criteria:

  • 10,000 active users
  • 100 paid subscribers
  • $3,000 MRR

Timeline: 12 weeks

  • Week 13-15: Expand indicators to 200+
  • Week 16-17: Portfolio + subscription system
  • Week 18-19: Hot stocks + templates
  • Week 20-21: Payment integration + testing
  • Week 22-23: Marketing prep, documentation
  • Week 24: Public launch

10.3 Phase 3: Growth & Optimization (Months 7-12)​

Goal: Scale to 50,000 users, optimize conversion

Features:

  • Alerts & notifications
  • Advanced portfolio analytics
  • Peer comparison
  • Export to Excel/CSV
  • API access (Pro tier)
  • Mobile app (iOS/Android - React Native)
  • Backtesting (simple)
  • Theme-based investing

Infrastructure:

  • Auto-scaling (Kubernetes HPA)
  • Multi-region deployment (if needed)
  • Advanced monitoring & alerting
  • Performance optimization

Success Criteria:

  • 50,000 active users
  • 2,500 paid subscribers
  • $50,000 MRR
  • Featured in media

Timeline: 24 weeks

  • Week 25-28: Alerts + notifications
  • Week 29-32: Advanced portfolio features
  • Week 33-36: Mobile app (MVP)
  • Week 37-40: API + export features
  • Week 41-44: Backtesting + themes
  • Week 45-48: Optimization, marketing push

10.4 Phase 4: Advanced Features (Months 13+)​

Future Considerations (Post-Year 1):

  • AI-powered stock recommendations
  • Social features (follow other investors, share portfolios)
  • Live chat support
  • Webinars / educational content
  • Institutional-grade analytics
  • ETF screening
  • International markets (US, China)
  • Cryptocurrency integration
  • Advanced backtesting with custom strategies
  • White-label solution for financial institutions

11. Risk Analysis & Mitigation​

11.1 Technical Risks​

RiskProbabilityImpactMitigation
Data source API downtimeMediumHigh- Multiple data sources
- Fallback to web scraping
- Cache last known good data
Database performance degradationMediumHigh- TimescaleDB for time-series optimization
- Read replicas
- Aggressive caching
Security breachLowCritical- Regular security audits
- Penetration testing
- Bug bounty program
- Insurance
Scaling issues under high loadMediumMedium- Load testing before launch
- Auto-scaling (Kubernetes HPA)
- CDN for static assets
Data accuracy errorsLowHigh- Daily reconciliation with official sources
- Automated validation checks
- User reporting mechanism

11.2 Business Risks​

RiskProbabilityImpactMitigation
Low user acquisitionMediumHigh- Pre-launch marketing
- SEO optimization
- Content marketing (blog)
- Partnerships with finance influencers
High churn rateMediumHigh- Excellent onboarding
- Regular feature updates
- User feedback loops
- Retention campaigns
Competitor with deeper pocketsMediumMedium- Focus on speed & UX (hard to replicate)
- Build community
- Proprietary scoring algorithms
Regulatory changes (data licensing)LowHigh- Legal review of data usage terms
- Diversify data sources
- Budget for increased licensing costs
Market downturn (reduced trading activity)MediumMedium- Long-term investors also use screeners
- Diversify use cases (portfolio tracking)
- Freemium model sustains user base

11.3 Legal & Compliance Risks​

RiskProbabilityImpactMitigation
Data licensing violationsLowCritical- Clear licensing agreements with KRX/F&Guide
- Legal review
- Proper attribution
Investment advice liabilityLowHigh- Prominent disclaimers on all pages
- Terms of Service clearly state "informational only"
- No personalized recommendations (Phase 1)
Privacy law violations (PIPA/GDPR)LowHigh- Privacy policy review by legal
- User consent flows
- Data deletion on request
- Encryption of PII
Copyright issues (charts, content)LowMedium- Use open-source chart libraries
- Original content only
- Proper attribution for third-party sources

11.4 Operational Risks​

RiskProbabilityImpactMitigation
Key team member departureMediumMedium- Documentation of all systems
- Knowledge sharing
- Redundancy in critical roles
Vendor lock-in (cloud provider)LowMedium- Use containerization (Docker/K8s)
- Avoid proprietary services
- Multi-cloud architecture (if needed)
Data pipeline failuresMediumMedium- Airflow retry mechanisms
- Alerting on pipeline failures
- Manual override capability
Customer support overloadLowMedium- Comprehensive documentation
- FAQs and tutorials
- Automated chatbot for common questions
- Tiered support (email for Free, priority for Pro)

12. Appendices​

Appendix A: Glossary of Financial Terms​

PER (Price-to-Earnings Ratio)

  • Definition: Current stock price divided by earnings per share (EPS)
  • Formula: Stock Price / EPS
  • Interpretation: Lower PER may indicate undervaluation, but varies by industry

PBR (Price-to-Book Ratio)

  • Definition: Market capitalization divided by book value of equity
  • Formula: Market Cap / Total Equity
  • Interpretation: PBR < 1 suggests stock trades below book value

ROE (Return on Equity)

  • Definition: Profitability relative to shareholders' equity
  • Formula: Net Income / Shareholders' Equity × 100%
  • Interpretation: Higher ROE indicates efficient use of equity capital

Free Cash Flow (FCF)

  • Definition: Cash generated after capital expenditures
  • Formula: Operating Cash Flow - Capital Expenditures
  • Interpretation: Positive FCF indicates cash available for dividends, buybacks, or reinvestment

(... Full glossary of 200+ terms in separate document)

Appendix B: Competitor Feature Comparison​

FeatureOur PlatformNaver FinanceInvesting.comQuantit
Indicator Count200+~20~50~80
Screening Speed< 500ms2-3s1-2s3-5s
Real-time Updates✓ (Premium)✓✓ (delayed)✗
Portfolio Tracking✓✗✓✓
Mobile App✓ (Phase 3)✓✓✗
Free Tier✓ (generous)✓✓ (limited)✓ (very limited)
Export Data✓✗✓ (Premium)✓
API Access✓ (Pro)✗✓ (Enterprise)✗
Backtesting✓ (Phase 3)✗✗✓
Korean Language✓✓Partial✓
Educational Content✓Limited✓Limited

Appendix C: User Research Summary​

Method: Surveys (n=100), Interviews (n=20)

Key Findings:

  1. 78% of respondents find current tools "too complex" or "too slow"
  2. 65% want more indicators, especially value-focused metrics
  3. 82% would pay for faster, more comprehensive screening
  4. Top 3 desired features:
    • Advanced filtering (92%)
    • Real-time alerts (78%)
    • Portfolio tracking (71%)
  5. Primary use case:
    • Long-term investing (52%)
    • Swing trading (31%)
    • Day trading (17%)

Quotes:

"I spend 2 hours every weekend screening stocks manually. If a tool could do it in 2 minutes, I'd pay for that." - Survey Respondent #34

"I love the idea of 200 indicators, but please explain them simply. I'm not a finance major." - Interview Participant #8

Appendix D: Technical Debt & Future Refactoring​

Known Technical Debt:

  1. Monolithic API: Consider microservices architecture in Phase 4 for better scalability
  2. PostgreSQL Full-Text Search: May need Elasticsearch if search volume grows significantly
  3. Manual indicator calculations: Explore GPU acceleration (CUDA) for massive parallel processing
  4. Session storage in Redis: Migrate to dedicated session store if scale demands it

Future Optimizations:

  • Implement GraphQL for more flexible API queries (reduce over-fetching)
  • Edge computing for real-time price updates (reduce latency)
  • Machine learning for anomaly detection in financial data
  • Blockchain-based audit trail for data integrity

Appendix E: Data Source API Documentation​

KRX API (Korea Exchange)

  • Endpoint: https://api.krx.co.kr/... (hypothetical)
  • Authentication: API Key
  • Rate Limit: 100 requests/min
  • Data Format: JSON
  • Documentation: (link to official docs)

F&Guide API

  • Endpoint: https://api.fguide.com/... (hypothetical)
  • Authentication: OAuth 2.0
  • Rate Limit: 500 requests/min
  • Data Format: JSON
  • Documentation: (link to official docs)

(Detailed API specs in separate integration document)

Appendix F: Deployment Architecture Diagram​

[Detailed Kubernetes deployment diagram with pods, services, ingress, persistent volumes, etc.]

(Full infrastructure-as-code repository link)

Appendix G: Testing Strategy​

Unit Tests:

  • Backend: 80%+ coverage (Pytest)
  • Frontend: 70%+ coverage (Vitest + Testing Library)
  • Critical paths: 100% coverage

Integration Tests:

  • API endpoint tests (all endpoints)
  • Database integration tests
  • Data pipeline end-to-end tests

Performance Tests:

  • Load testing (10,000 concurrent users)
  • Stress testing (identify breaking point)
  • Endurance testing (24-hour sustained load)

Security Tests:

  • OWASP Top 10 vulnerability scanning
  • Penetration testing (quarterly)
  • Dependency vulnerability scanning (weekly)

User Acceptance Testing:

  • Beta testing with 100 users (Month 3)
  • A/B testing for conversion optimization (ongoing)

Document Revision History​

VersionDateAuthorChanges
1.02025-11-09Product TeamInitial PRD creation

Approval & Sign-off​

RoleNameSignatureDate
Product Manager____________________________________
Engineering Lead____________________________________
Design Lead____________________________________
Data Lead____________________________________
CEO____________________________________

END OF DOCUMENT