1) Gather Requirements

Clarify the problem, define the scope and requirements

Duration: ~5 minutes

When gathering requirements for a frontend system design during an interview, it is crucial to first understand the overall goal and problem statement of the project. This will serve as the foundation for the design and help guide the requirements gathering process. During the interview, it is important to ask clarifying questions to ensure that all relevant information is captured. This includes asking about specific functionalities that the client expects to be included in the design, as well as any constraints or limitations that may affect the design.

To further break down the scope of the project, it is also important to ask questions about the target audience and user experience. This will help to identify any specific user needs or preferences that should be taken into consideration during the design process. Additionally, it is important to ask about the overall aesthetic and brand guidelines that the client would like to see incorporated into the design.

By thoroughly understanding the goal and problem statement, and asking clarifying questions, the requirements gathering process will be more comprehensive and will help to ensure that the final design meets the client's needs and expectations.

Example of Requirements

Let's pretend we're trying to solve the problem "Design a Playlist for Spotify", the requirements may look like something as follows:

1. The ability to display a list of songs or videos, including their title, artist, and duration.

2. A way to play and pause the current song or video.

3. The ability to skip to the next or previous song or video.

4. A way to shuffle or reorder the playlist.

5. A search function to find specific songs or videos within the playlist.

6. The ability to add or remove songs or videos from the playlist.

7. A way to display the current song or video's progress, including a progress bar and elapsed time.

8. The ability to loop the playlist or individual songs or videos.

9. A way to display the total playlist duration and number of songs or videos.

10. A responsive design that adapts to different screen sizes and devices.