How to Ace your Front End Systems Design Interview

Software Engineers discussing systems design

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.

See here for a systems design case study on my website that demonstrates this framework.

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.
5. 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.

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 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?

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.
• 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.
• Your interviewer may or may not ask you to dig deeper into trade-offs for this section.
• You may skip this section if it’s not important to the solution or if the company has a very specific tech stack they want you to design for.

Document data entities

• Document the main data entities that the system will use.
• Tip: use TypeScript or a similar type language syntax to capture the types.
• You can also use a database schema if part of the exercise involves competency with relational databases.

Document API endpoints

• Unless given to you, document the inputs and outputs of the main API endpoints required by the system.
• Tip: research formats and tools for documenting an API ahead of time.

Diagram of Component Breakdown

• Using your diagramming tool to create a component hierarchy diagram showing the components used by your system.
• Document reusable components that can be shared across the application.

Data Fetching and State Management

• Discuss and document the mechanisms used for fetching data on the client.
• Document the client state management patterns used.
• Where is state stored?
• What APIs or frameworks are you using to manage state? For example: useState, React Context, Redux, MobX, XState, etc.

Tips

• Use a text editing app that you are comfortable with and provides you with tools for software documentation, for example: Notion, Confluence, VSCode, etc.
• Same goes for a diagramming tool, for example Draw.io, Miro, Figma, etc.
• Prepare a blank document ahead of time so that you don’t have to wait for an app to load before you can jump in.
• Ask the interviewer for buy-in frequently. It’s meant to be a conversation, not a monologue.
• Move fast, you may only have 45–60 minutes to get through everything. Don’t get hung up on anything if you can avoid it.
• If you get stuck on anything, ask if you can move on for the sake of time and come back to the topic later.

Front End Systems Design One Pager

Below is a one pager for the Front End Systems Design interview. The goal is to move through the phases in a clockwise fashion, starting from the top.

Each phase has corresponding discussion points that can be tackled as part of the interview. The bottom part includes a few other topics you might want to touch on, as well some tips for the interview.

Feel free to print this out and reference it before the interview.

Front End Systems Design One Pager