Katkat
Back

Front-End Design of an Emoji Picker with a Search Field

AtlassianFrontend Engineer · Technical Screen
MediumFrontend EngineerTechnical ScreenSystem Design

Last updated

A candidate-driven front-end system design discussion about an emoji picker with a search field. It tests how a candidate scopes the component, models and loads the emoji catalog, ranks search results, keeps a grid of thousands of emoji fast, and supports keyboard and screen-reader users.

Design the front end of an emoji picker: the familiar panel that opens from a message box or a reaction button, shows emoji grouped by category in a scrollable grid, and has a search field at the top that filters the emoji as the user types. Selecting an emoji hands it back to whatever opened the picker.

This is a short front-end system design discussion (about 15 minutes) in which the interviewer asks few questions, so you are expected to drive: set the scope, propose the architecture, and choose where to go deep.

Clarifying Questions

  • Is the picker a reusable component used by several surfaces (message composer, reactions, status), or a single screen?
  • Which features are in scope: categories, recently used emoji, skin-tone variants, custom emoji uploaded by users or organizations?
  • Which browsers and devices must be supported, and must emoji look identical everywhere, or may the operating system's own glyphs be used?
  • Must search work in several languages?
  • What keyboard and screen-reader support is required?

Hints

Hint 1

Size the data first: Estimate how many emoji and search keywords the picker has to handle before deciding where search runs and how the data reaches the browser.

Hint 2

Find the expensive part: Ask which part of the panel costs the most to render and to update on every keystroke, and design around that part.

Follow-up questions

  • How would the design change if an organization can upload thousands of custom emoji that change daily?
  • Emoji render differently, or not at all, across operating systems. What are the trade-offs between system glyphs and an image sprite?
  • How would you measure and protect the time from keystroke to updated results on low-end phones?
  • How would you test this component, including its accessibility?