How We Rebuilt Our Navigation

Abstract design gradient artwork

A design system is a set of decisions you no longer have to argue about. Consistency is kind, but clarity wins when the two disagree. We removed three options and support tickets dropped by a third.

A small example

A design system is a set of decisions you no longer have to argue about. An error message should blame the system, not the person. Whitespace is not empty; it is doing the grouping for you.

The prototype answered in a day what the meeting could not in a month. Contrast is not a style choice; it is whether people can read the page.

Trade-offs

A design system is a set of decisions you no longer have to argue about. Labels above fields beat clever placeholders every time. We tested with five people and found the same problem four times.

  • Design the empty and error states
  • Test with real data
  • Start from content, not components
  • Write the microcopy before the mockup

We tested with five people and found the same problem four times. An error message should blame the system, not the person.

Lessons

We tested with five people and found the same problem four times. Users scan, so headings carry more weight than paragraphs. Contrast is not a style choice; it is whether people can read the page. Dark mode is a second palette, not an inverted first one.

Motion should explain a change, not decorate it.

The prototype answered in a day what the meeting could not in a month. We tested with five people and found the same problem four times.

Design

Takeaway

Dark mode is a second palette, not an inverted first one.

Good defaults are the design most users will ever see. A design system is a set of decisions you no longer have to argue about.

Comments

3 responses to “How We Rebuilt Our Navigation”

  1. I’ve been doing it wrong for years, apparently. Thanks!

  2. The photos and examples make this so much clearer.

  3. Could you share more details on the second section?

Leave a Reply

Your email address will not be published. Required fields are marked *