How to Ace your Front End Systems Design Interview

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.

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?

useState
React Context
Redux, MobX, XState, etc.

Optimizations

Dig deep into browser & network performance optimizations (see the one pager below).

This is the section where the interviewer will test the depth of your technological expertise and ability to create an optimized design.

Use this section to highlight your knowledge and experience.

Make sure not to just brain dump, you need to be context aware about what optimizations are appropriate for the problem at hand.

Accessibility

Discuss and document how you will make the UI accessible.

What techniques and technologies will you make use of to make the application accessible to as many users as possible?

What level of WCAG compliance are you targeting?

Geography

If your application has a global audience, what techniques will you use to ensure a good experience will be had by users across the world?

Front End Systems Design Template

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.