Design the frontend of an email client like Gmail
PremiumFrontend systemMedium
- Optimistic UI
- Undo send
- Normalized cache
Quick answer
This frontend system interview question asks you to design the frontend of an email client like Gmail. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design the frontend of an email client like Gmail, with a label sidebar, a thread list, a thread view and a docked composer. The hard part is making archive, star and label actions instant yet undoable, auto-saving drafts, and staying fast with 50,000 threads.
The label sidebar holds Inbox, Starred, Sent, Drafts and custom labels. The thread list has unread styling and multi-select, the thread view shows the messages in a conversation, and the composer can be docked at the bottom. Actions such as archive, delete, mark read, star and label apply instantly and can be undone. Drafts auto-save. Search returns results across all mail.
What must the frontend of an email client like Gmail do?
- Thread list: Shows sender, subject, snippet, time, labels, unread state and star; 50 per page with load more; selecting with checkboxes and Shift for ranges.
- Actions: Archive, delete, mark read or unread, star, apply or remove labels, on one or many threads; each shows a toast with Undo for 10 s.
How well must it do it?
- Speed: Switching between labels already visited renders in under 100 ms; opening a thread already listed shows cached headers immediately.
- Consistency: An action never appears to succeed and then silently reverse; failures are surfaced and rolled back.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Optimistic UI
- Undo send
- Normalized cache
- Keyboard shortcuts
- IndexedDB
- Service worker
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design the frontend of an email client like Gmail and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Medium. Entry-level engineers can practise it, but it expects you to reason about requirements and trade-offs, not only list components.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team