chaotic calculator // ui design
chaotic calculator // ui design
Chaotic Calculator // UI design
Type // Case study
Team // Muji
Year // '24
Chaotic Calculator // UI design
Type // Case study
Team // Muji
Year // '24
Chaotic Calculator // UI design
Type // Case study
Team // Muji
Year // '24
Chaotic Calculator // UI design
Type // Case study
Team // Muji
Year // '24

How might we turn regular and predictable calculator experience into something unexpectedly enjoyable? Reimagined standard calculator to be animated, irritable, humorous, transforming calculating into a fun and unexpected experience.

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Design Language & Layout

Design Language & Layout

Design Language & Layout

Design Language & Layout

Explorations
Layout

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Features

Features

Features

Features

Features Overview
Design Language
Personified

The calculator is personified; it has a mind of its own. It reacts emotionally: refusing easy calculations, displaying messages like โ€œdo not press meโ€ or โ€œoops!โ€, and renaming functions (โ€œdumbโ€ and โ€œsmartโ€) to reflect its attitude.

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Frustrating

Designed to frustrate by replacing number pads with images, revealing the number only after pressing, and spelling out every function instead of using symbols.

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Super Slow...

The calculator takes quite sometime to finish thinking as it operates on its own will.

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Explorations
Easily Irritated

It often refuses to give the right answer due to its โ€œsuperb intellectโ€ finding some calculations too easy.

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Unnecessary Feature

When users press โ€œ=โ€ the calculator randomly generates an imageโ€”an irrelevant, humorous reward that no one ask for.

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Process

Process

Process

Process

The Process

Behind the scene of me having fun in Figma.

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Inspiration

Inspiration

Inspiration

Inspiration

Image Asset / Inspiration

@pinterest

Design Language

Uses pastel colors, 8-bit graphics, and girly, middle-school visuals to contradict the cold precision of typical calculators. Random, Pinterest images replace numbers, adding to its glitchy, delusional personality.

Learnings

Learnings

Learnings

Learnings

Learnings
  • Keep making passion project and unconventional experiment ~

  • Add humor and imperfection to make interface feels human