Drag the field any way or use the arrows in the corner. On a planet, the arrow keys move to the next one, Enter opens its card and Home goes back to the start.
Mirumee · recruitment task · 2021
Star Wars: the planets candidates were asked to build
An interface designed as a recruitment task for Front-End Developers at Mirumee: a field of pixel-art planets that scrolls every way, a label on hover, a population and terrain filter and a planet card. The field on this screen is its working replica — on SWAPI data.
Drag the field. Hover over a planet; a click opens its card.
- Mirumee, Wrocław
- 11.2021
- people in the team
- 4
- terrains in the filter
- 22
The brief
A design that tested the candidates
Mirumee was hiring Front-End Developers. This interface was the recruitment task: a candidate got the design and had to build it — with motion, states and filtering. We designed it in November 2021.
Motion every way
The planet field moves on both axes, and the “scroll everywhere” cue says so. Planets cut by the screen's edge show there is more beyond.
A label on hover
The planet's name in cyan, pixel bars under it, and a stepped line of pixels running to it from the planet.
A filter in a panel
A panel on the right: a population range on a slider with two handles and 22 terrains to tick. The FILTER button leaves only the matching planets in the field.
A planet card
A click opens the card: the planet large, its name and five lines of data. The field behind the card dims.
Scroll everywhere
The screen is only a frame of a larger field
On the start screen the planets are cut by its edge — a sign that the field goes on. The cue under the logo says it outright: scroll every way.
The frame is the size of the project's screen: 1440 × 1025 px. In the replica the field repeats every 3300 × 2400 px on both axes — the dashed lines mark the tiles.
Pixel art
Planets made of pixels
Twelve whole planets and three characters, cut from the project's screens at their own resolution — pixel by pixel. On this page they are only enlarged, never smoothed.
Stripes 39 × 39 pixels
Fine bands 26 × 26 pixels
Craters 28 × 28 pixels
Spots 26 × 26 pixels
Cracks 33 × 33 pixels
The characters above the logo
Stripes, fine bands and craters are one drawing in several colours — their brightness maps match almost pixel for pixel.
Graphics: Paweł Janczarek, Mirumee
Hover and click
A name, the bars and the planet card
Hovering shows the planet's name with the pixel bars and the stepped line. A click opens the navy card with its data. On the left the original, on the right the replica — pick any of the 59 SWAPI planets.
- Name Source Code Pro capitals, cyan #74FBFE.
- Bars Magenta and cyan: a square, a short bar and a longer one, a full line below.
- Line Steps of pixels from the planet to the label.
Original · Screen from the project, 2021
Replica · The planet card
Tatooine
- Population:
- 200000
- Climates:
- arid
- Terrains:
- desert
- Orbital Period:
- 304
- Diameter:
- 10465
The values are SWAPI's raw data. The mock-up's fifth line read “Temperate: 12500” — Alderaan's diameter in SWAPI — so the replica labels it “Diameter”.
Original · Screen from the project, 2021
Filter
Population and terrain, one button
The menu icon slides a panel in from the right. A slider with two handles narrows the population, 22 checkboxes pick terrains, and FILTER closes the panel and leaves only the matching planets in the field. Try it on the replica.
Drag the field any way or use the arrows in the corner. On a planet, the arrow keys move to the next one, Enter opens its card and Home goes back to the start.
59 of 59 planets in view
- The terrain labels in the panel are SWAPI's own values, in the API's order.
- All terrains ticked = no terrain filter. Planets whose terrains are not on the list (e.g. “gas giant”) only show then.
- The full population range also lets through planets with an “unknown” population; a narrower one does not.
Planet data in the replica: SWAPI (swapi.dev), snapshot of 28 Oct 2026.
Original · Screen from the project, 2021
System
Five colours, one typeface
The whole interface is a handful of parts that come back everywhere: the field's black, the panels' navy, yellow for actions, cyan and magenta for labels. The colours are samples from the project's screens.
Palette
- Blackthe field
- Navythe filter panel and the planet card
- Yellowthe checkboxes and the FILTER button
- Cyanthe planet's name, bars and line
- Magentathe label's bars
- Whitetext and the slider's handles
Samples from the screens' JPEG files. The logo has a yellow of its own: #FFE820.
Typeface
Source Code Pro
Monospace across the interface: planet names, the panel, the card, the cue. Here — in every word of this presentation.
Controls
Population
A square yellow checkbox, a slider with its values in drops and a yellow button. They all work.
Icons
- Menu — slides in the filter panel
- Close — the panel and the card
- Scroll everywhere — the start cue
Label
Name, bars and the stepped line.
Surfaces
- Panel — navy along the screen's edge
- Card — navy in the middle
- The dimmed field behind them
Recording
The whole flow in 17 seconds
The project's recording: the intro with the logo, the planet field, the filter panel, the filter's result, the label and the planet card. The chapters jump to their moment.
Screens
Six screens of the design
Screen from the project, 2021
Summary
Four states, one field
Motion, hover, filter and card — the whole interface fits on one screen of pixel-art planets. We designed it as a team of four at Mirumee.
- Iwo RzepielaHead of Design
- Jakub NowakUX/UI — interface and experience design
- Marcin KuligowskiUX/UI
- Paweł JanczarekGraphics — the pixel-art planets and characters
Planet data in the replica: SWAPI (swapi.dev), snapshot of 28 Oct 2026.
Star Wars and the Star Wars logo are trademarks of Lucasfilm Ltd. The design was made as a Mirumee recruitment task.