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.
- 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.
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?
- React Context
- Redux, MobX, XState, etc.
- 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.
- 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?
- 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?
- 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.
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.