To show the intentionality behind and impact of seemingly tiny product design decisions, I want to break just down the most important piece of the interface: the message box.

Yesterday, we launched UX3, the third version of Throttle’s web app interface. Here are the three versions so far:

Throttle receives all of the emails you want to keep but that don’t belong in your inbox. It’s important that these messages are easily scannable, so you can see what you want to open and read, versus what you don’t care about.

Let’s look at the redesign closer up. You can see a number of strictly aesthetic changes here, but I’ll hit a few of the functionally intentional choices made.

Scannability

Just like in the inbox, people scan their reading list to see which things are interesting enough to open. Long ago while redesigning the inbox, we discovered that people scan each message in this order:

1. Sender. If they’re uninterested in that sender, they move on to the next message.
2. Subject. If they’re uninterested by the subject, they move on.
3. Message preview. If the first text-only line of the message isn’t interesting, they move on.
4. Then they open the message.

For most, it goes in this order. At any step, users might move on if they decide that piece is uninteresting. What’s most important to note here is that we found people check the sender first, and often move on from there. That’s their primary and first piece of information to test whether they care about a message.

This is where most mess up. Designers solely after aesthetic appeal will design an inbox with mocked up messages that are all important — messages from senders their fictional user would intimately know. These kinds of messages are great for screenshots, but terrible for UI design. Why? Because then the #1 item — the sender’s name — isn’t as important. If every message was from someone important, you would read every subject. That’s why many uninformed inbox designs put a bigger emphasis on the subject, where the sender is in a smaller or lighter font. But most people’s inboxes have 3 emails from unimportant senders for every 1 from an important sender.

The sender name is the first thing people scan for. Realizing this is important to help us design the most usable, scannable reading list. That’s why the sender name is larger and heavier than the subject. People scan the sender name, and only on the ones they’re interested in do they keep reading.

Now let’s talk about #2 and #3 — a message’s subject and preview. People use Throttle to sign up for their online accounts and newsletters. These services tend to send out rich HTML messages, packed with images. Way too often, the text-based previews of these kinds of messages are useless in the inbox, and the subject lines are often crafted solely to get a reader to open the message, not to represent the actual content of it.

Because of these facts, in the Throttle reading list, we’ve de-emphasized the subject. We ditched the text-only preview of the first line of the email all together. Instead, we generate a thumbnail screenshot of the rich HTML message, so you can immediately see what’s actually in the message. Since almost all of these messages are image-rich instead of plain text emails, these generated thumbnails are a much better representation of what to expect in the email for the kinds of messages you receive in Throttle instead of your regular inbox. This took some serious engineering work, but the impact has been huge for our users.

Honesty & Communication

Now let’s look at what the interface communicates. In the old design, you see a favicon, a sender name, and a subject. In it, to categorize the subscription, you would drag the favicon onto a category. Why? Because the favicon is associated with the subscription, where everything else was only associated with this one message or its sender. We wanted to help communicate that you were categorizing this entire authorization, including all of its past and future messages, like an RSS reader.

And yet — people were still confused. How do I categorize just this message? That isn’t a thing in Throttle. We realized quickly how dishonest it was to put the favicon of the subscription next to the sender of the one message. How does that make sense? It’s even weirder when Throttle should be most useful: when you get an email you aren’t expecting because a service sends spammy messages (looking at you, New York Times).

Besides being honest with where each piece of information is from, it performs better in the biggest use case Throttle excels at: when someone you signed up with sends you spam. Here, you can now clearly understand that you’re receiving this spammy message from when you authorized The New York Times to send you their email newsletter.

So, a major part of the redesign was to communicate exactly what’s going on. Everything in the box is about this one message you’ve received. Outside the box, below each message, is information on the entire authorization — its favicon, hostname, and category. This communicates the truth.

Containment & Spacing

It is fiercely important to design out not just one item, but the context it lives in: a grid of dozens of items. Why? Because it’s easy to design a single beautiful item that bombs once it’s around others. I did this in one of my original designs.

Here was the design for the individual element:

Looks great, no? Now let’s put some messages around it:

This is where it dies. Especially once the grid gets bigger, the text below one row runs too freely with the text above the next; its separation isn’t clear enough to pass the blur test. It puts an unnecessary cognitive burden on the user to understand the intended separation. Plus, speaking of honesty, it’s not visually obvious that the sender name (and potentially subject) are associated only with the message shown in the thumbnail, and that the information below it has a different, more general association with it.

A solution to poor containment is to play with spacing each item further apart, but this led to far fewer items displayed at once than we’d prefer.

So I designed a box that entirely contained anything to do with this one message, so no important text was floating free anymore. The authorization information sits outside of this box. Now it’s much more scannable, even where there are a dozen items on screen at once:

Product Design

All of this is to say: It’s important to have someone on your team that’s focused on getting product design right, iteratively. Every detail should be intentional. If you’re thinking about, launching, or maintaining your own digital products, I’d love to help you learn product design and ideation.