Frontend system design was the round I was most nervous about. It’s open-ended, there’s no single right answer, and it’s easy to ramble for 45 minutes without saying anything the interviewer can grade.
What fixed it for me was using the same structure every time. I use a framework called RADIO: Requirements, Architecture, Data model, Interface, and Optimizations. It keeps me on track, and it makes it easy for the interviewer to follow along and give me credit.
I’ll walk through each step using one example: “Design a news feed” (think Facebook or LinkedIn).
R: Requirements (~6 minutes)
Never start drawing boxes immediately. The first few minutes decide whether you’re designing the right thing.
Functional requirements: what can the user do?
- See a feed of posts (text, images) from people they follow.
- Scroll infinitely to load more.
- Like and comment on a post.
- Create a new post.
Non-functional requirements: how should it behave?
- Fast initial load, including on slow mobile networks.
- Smooth scrolling with hundreds of posts.
- Accessible, works with keyboard and... premium content.
