Front-end Engineering Lab
RADIO Framework

(R) Requirements

Understanding the problem, constraints, and goals before designing

The Requirements phase is about understanding the problem deeply before jumping into solutions. This is where you ask questions, clarify constraints, and define success criteria.

Why Requirements Matter

Skipping requirements leads to:

  • Over-engineering (building what you don't need)
  • Under-engineering (missing critical features)
  • Wrong trade-offs (optimizing the wrong things)
  • Poor user experience (not meeting user needs)

Key Questions to Ask

Performance Requirements

Questions:

  • What are the Core Web Vitals targets? (LCP, FID, CLS, INP)
  • What's the acceptable time-to-interactive (TTI)?
  • What's the target bundle size?
  • What's the acceptable first contentful paint (FCP)?

Relevant Content:

Scale Requirements

Questions:

  • How many users? (concurrent, daily, monthly)
  • How many requests per second?
  • How many teams will work on this?
  • What's the expected growth rate?

Relevant Content:

Accessibility Requirements

Questions:

  • What WCAG level? (A, AA, AAA)
  • Which screen readers must be supported?
  • What keyboard navigation is required?
  • Are there specific legal requirements? (ADA, Section 508)

Relevant Content:

Browser & Device Support

Questions:

  • Which browsers must be supported?
  • What's the minimum browser version?
  • Mobile vs desktop priority?
  • Do we need PWA capabilities?

Relevant Content:

Internationalization Requirements

Questions:

  • How many languages?
  • Do we need RTL support?
  • What date/time formats?
  • What number/currency formats?

Relevant Content:

Security Requirements

Questions:

  • What data needs protection?
  • What's the CSP policy?
  • Do we need SRI for CDN resources?
  • What CORS requirements?
  • Are there compliance requirements? (GDPR, HIPAA)

Relevant Content:

Error Handling Requirements

Questions:

  • How should errors be displayed to users?
  • What error recovery is needed?
  • What error monitoring is required?
  • How should we handle network failures?

Relevant Content:

Rendering Strategy Requirements

Questions:

  • Is SEO important?
  • How dynamic is the content?
  • What's the update frequency?
  • Do we need real-time updates?

Relevant Content:

Design System Requirements

Questions:

  • Do we need a design system?
  • How many products/teams will use it?
  • Do we need dark mode?
  • What's the theming requirement?

Relevant Content:

Requirements Checklist

Use this checklist when gathering requirements:

Performance

  • Core Web Vitals targets defined
  • Bundle size budget set
  • TTI target defined
  • Performance budget established

Scale

  • User count estimated
  • Request rate estimated
  • Team size considered
  • Growth projections defined

Accessibility

  • WCAG level determined
  • Screen reader support defined
  • Keyboard navigation requirements
  • Legal compliance checked

Browser Support

  • Browser list defined
  • Minimum versions set
  • Mobile priority determined
  • PWA requirements defined

Internationalization

  • Languages identified
  • RTL support needed?
  • Date/time formats defined
  • Number formats defined

Security

  • Data protection requirements
  • CSP policy defined
  • SRI requirements
  • Compliance requirements

Error Handling

  • Error display strategy
  • Recovery mechanisms
  • Monitoring requirements
  • Network failure handling

Rendering

  • SEO requirements
  • Content dynamism
  • Update frequency
  • Real-time needs

Design

  • Design system needed?
  • Theming requirements
  • Dark mode needed?
  • Component consistency

Decision Framework

Simple App (Blog, Marketing)

Requirements:
- Performance: LCP < 2.5s, basic SEO
- Scale: Low traffic, single team
- Accessibility: WCAG AA
- Browser: Modern browsers only
- i18n: Single language
- Security: Basic CSP

Medium App (Dashboard, SaaS)

Requirements:
- Performance: LCP < 2.5s, FID < 100ms
- Scale: Medium traffic, 2-5 teams
- Accessibility: WCAG AA, keyboard nav
- Browser: Modern + 1 version back
- i18n: 2-5 languages
- Security: Strict CSP, SRI

Complex App (Social Media, E-commerce)

Requirements:
- Performance: All Web Vitals < thresholds
- Scale: High traffic, 10+ teams
- Accessibility: WCAG AAA
- Browser: Wide support
- i18n: 10+ languages, RTL
- Security: Strictest policies

Common Mistakes

❌ Assuming requirements - Don't guess, ask
✅ Clarify everything - Better to ask than assume

❌ Ignoring constraints - "We'll optimize later"
✅ Define constraints upfront - Budget, time, team size

❌ Vague requirements - "It should be fast"
✅ Specific metrics - "LCP < 2.5s, bundle < 200KB"

❌ Skipping accessibility - "We'll add it later"
✅ Accessibility from start - Cheaper and better UX

Next Steps

After gathering requirements, move to:

Remember: Good requirements lead to good architecture. Take time here—it's the foundation of everything else.

RADIO Framework Guide

System Design framework for front-end architecture decisions

(A) Architecture

High-level system structure, patterns, and architectural decisions

On this page

Why Requirements MatterKey Questions to AskPerformance RequirementsScale RequirementsAccessibility RequirementsBrowser & Device SupportInternationalization RequirementsSecurity RequirementsError Handling RequirementsRendering Strategy RequirementsDesign System RequirementsRequirements ChecklistPerformanceScaleAccessibilityBrowser SupportInternationalizationSecurityError HandlingRenderingDesignDecision FrameworkSimple App (Blog, Marketing)Medium App (Dashboard, SaaS)Complex App (Social Media, E-commerce)Common MistakesNext Steps