What is a Front End Systems Design Interview?
Systems design has been part of the interview roster for back end and full stack roles for a long time. They are fairly well understood and seem to follow a consistent framework, making it easy to find a plethora of resources about how to excel in one.
However, systems design interviews for Front End roles are a different story. They seem to differ from company to company. Some companies take the approach of doing a more generalist interview, where you don’t go as deep as you would on a back end focused role. Other companies have developed formats that focus more on the front end stack.
The goal of this article is to provide a framework for a more front end focused systems design interview.
High-Level Goals of a Front End Systems Design Interview
- Demonstrate your ability to break-down a technical problem in real time.
- Highlight your ability to think technically and use your knowledge and experience to come up with an optimized solution to a front end design problem.
- Demonstrate your focus on quality, both technically and experience-wise.
- Demonstrate your communication skills.
- Think about it this way, you will be having a lot of similar discussions on the job. The systems design interview is a way to show the company how well you can collaborate to solve a challenging technical problem.
Systems Design Case Studies
Stock Exchange Systems Design Case Study
Front End Systems Design Outline
ℹ️ Below is a rough outline of the activities in a front end systems design interview. This is not meant to be exact, you may not cover everything in one interview.
Discuss and document high-level requirements.
- During the first part of the interview, you will want to capture the core business / product requirements of the system.
- What features are you focusing on designing?
- What features can you ignore?
- What are the characteristics of the system to focus on in the interview?
- For example, latency, availability, consistency, platform support and any other important considerations that you think are important to the design.
- Who are the users you’re building for?
- How many daily active users (DAUs) can you expect?
- What kind of user growth is expected?
- Are there different user personas that require different functionality?
- What are the design requirements?
- If the interviewer did not provide you with mocks, you may need to quickly create high-level mocks.
- Use a tool that you are comfortable with like draw.io, Figma, Miro, etc.
- Make sure to practice beforehand so that you do not slow yourself down.
- Have the tool loaded and ready to go when the interview starts.
- What edge-cases are important to handle in the designs?
- Does the design warrant interactions, such as animations, form validation, etc.?
- What else is important in the design? Responsiveness, offline-first, layout, etc.
Document the tech stack
- Document the technology choices for the application, including a brief discussion on why you are making the choices.