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

1. Demonstrate your ability to break-down a technical problem in real time.
2. 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.
3. Demonstrate your focus on quality, both technically and experience-wise.
4. Demonstrate your communication skills.
   1. 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

<aside> ℹ️ 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.

</aside>

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.