Config Panels

I designed a cybersecurity platform to help organizations enforce DMARC for their emailing domains.

DMARC is an open internet standard used by mailboxes (Gmail, Yahoo, Microsoft, etc) to identify phishing. It works by letting you publish an allowlist of good senders, then lock out everyone else. This prevents scammers from emailing your customers as if they are your company! Imagine this for Uber, Amazon, of Citibank! The user pain point is that someone has to figure out every service that sends for the domain and do some setup for each sender. Imagine doing this for uber.com! The DMARC journey can be really hard and many organizations try and fail.

This product is really cool because it lets you register your senders very easily and tells you if they need additional work, such as enabling cryptographic signatures.

This case study covers the sender configuration panels, which are at the heart of the system. The idea is that the interface should tell you what to do, if anything, to get these emailing services to pass the standard, so you can lock out phishers.

  • Role: Research & Design
  • Client: Valimail
  • Tools: Figma, Fullstory, Snowflake
  • Duration: One year
  • Year: 2020-2021
The Old

Starting from the legacy product, we had all the required functionality. But users were missing the narrative. Mailchimp is hard to find on these config pages.

Data Visualization

The reporting page shows data, but users didn't actually know what it meant or what to do with it. We got it, but real users did not.

Early Design

This design went too far into the weeds, listing out all the cases where the sender passed DMARC and failed. Not a very clear mental model.

Design Sprint

Through Google Design Sprint format, we designed this brief summary for senders, collapsing reporting down to a single number and summarizing configuration down to a heading and a button.

Config and Data

Iterating on our sprint prototype, we fleshed out the sender detail page and gave more space to the config status.

Too Simple

This is the first iteration where we tried to display a status for every possible state.

However, this format was too restrictive for the great variety of warnings, guidance, and asset management we had to pack in to help get users value out of the product.

Sender Approval

In the final iteration, we use the concept of “approving” a sender to handle half of the configuration work, automatically providing as much support as possible for the sender to pass DMARC!

Final Config States

I enjoy the challenge of a complex platform.

It took us many meetings and bug reports to dial in the sensitivity here and get every state so it meaningfully helps the user.

I also got to write a lot of knowledgebase articles in the process and became a subject matter expert in the process!