Untangling Emails: UI and email forward

[crisbusquets]

Context: p58i-jdB-p2

What

Ensure that the email view is using the Core components, and it supports email forward to multiple emails.

Why

Currently, the UI looks like this, and it doesn't support multiple emails (Support Docs).

[crisbusquets]

More context: p9Jlb4-eCp-p2

[arunsathiya]

Highlighting some related issues:

• Domain Management: allow email forwarding to multiple email addresses #2452
• Feature Request: Create multiple Email Forwards to one destination address at once #82891
• And there's a whole other bunch of others about email forwarding, touching on DNS setup, plan requirements, etc.

[escapemanuele]

Hey @crisbusquets, we at Vertex will be working on this. I grabbed this issue that @arunsathiya posted to track engineering work

[crisbusquets]

Great, @escapemanuele ! Aaaaand we're working together again 🙏

[escapemanuele]

Hey @crisbusquets, @alshakero already worked on something that you can try here #98837!

[auareyou]

Hi @alshakero , @escapemanuele and @crisbusquets

Here’s some initial feedback I’ve put together so far testing #98837 :

View forwards

(I'm compartmentalizing my feedback in two different comments. After this one I'll add another comment with the Add forwards feedback.)

1. Verification Status (Copy & Visual Updates):

   • Copy: I suggest changing “Verification required” to “Pending verification”. This wording assumes verification is a natural next step—important but expected—and also accounts for cases where verification might be pending from either the user or another recipient.
   • Color: I’ve replaced red with orange, as it better communicates “proceed with caution” rather than an error or mistake.

2. Actions:

   • I’ve grouped all actions that can be taken from the table together and made them visible. I don’t see an obvious need for a secondary menu of actions here.

3. Data Grouping:

   • The current solution feels a bit redundant:
     • For single destinations, the email forward appears twice—once in the header and again inline with the destination email.
     • For multiple destinations, this repetition grows, and I’m also curious how the UI handles cases where one destination is verified and another is not.
   • To address this, I’ve adjusted the alert (for pending/required verification) to focus on the status only, using a leading visual and color, rather than highlighting the entire row.

4. Add Forward Action:

   • The “Add Forward” action currently looks like a link, which makes sense because it takes the user to another view. But since it’s also the primary action of this feature, I’d recommend using a primary button to reflect its importance.

5. Terminology:

   • The terms “Email forwards” and “destination” don’t clearly communicate “from” and “to.” I’d suggest using something more explicit, like “Forward from” and “Forward to.”

I’ve included some quick mockups to illustrate this feedback. ✨ These are just rough sketches, but I hope they help bring the ideas to life! Let me know if you have any questions or thoughts—I’m happy to tweak further if needed. 😊

@alshakero To reference our Slack conversation, my first instinct is that we could solve this table display with the dataViews component. I’m going to spend some time exploring this approach and will share mockups soon. I know you mentioned concerns about showing nesting, so I’ll need a few hours to think through it.

[auareyou]

Add Forwards

1. Copy Consistency:
   The label in the first input should match the heading in the "View Forward" table. Whether we go with "Forward from," "From," or "Emails from," it should be consistent since it's displaying the same information.

2. FormTokenField Consideration:
   This flow works, but I wonder if we could simplify it by using the FormTokenField component instead—combining everything into a single input. I’m not sure about the technical feasibility, but I wanted to check if this had been considered.

3. Adding Multiple Forwards & Button Hierarchy:
   Can users add multiple forwards at the same time? I’ve illustrated how that might look in the same view. I also adjusted the button hierarchy to better reflect the flow. I know our current button options don’t always fit every use case, which is why I previously mentioned that the "Add Forward" button felt like a link. Excited to continue refining our button philosophy as we evolve this.

I’ve included a quick mockup to illustrate these comments and questions. Hopefully, it helps clarify my thinking! Let me know what you think. Thanks for reading! 😊

cc @alshakero @escapemanuele @crisbusquets

[escapemanuele]

Thank you @auareyou, we'll check the feedback and address it ✌

[crisbusquets]

This looks great, @auareyou ! Thanks for on this :)

I'm leaning towards Option 2 here, perhaps without the arrow. It’s easier to scan and read the table when all the information is aligned in a row. From what I understand, if there are multiple 'To' emails, they will appear one below the other, correct?

I guess this isn't relevant now (we need to migrate this to Core), but just a heads up that we have a similar UI in Calypso when a user can invite someone to their site (https://wordpress.com/people/new/{siteURL}):

About this:

Can users add multiple forwards at the same time?

I think this will make the UI unnecessarily complex. Let’s first focus on guiding users to complete the task at hand with the Confirm forwards CTA.

[alshakero]

@auareyou Beautiful work. Thank you!

I agree with @crisbusquets. I'll go with Option II.

I just read this part "they will appear one below the other, correct?". This would be jarring IMO. Because each email can need verification, has a resend button, and a remove button. How would that look if they're were stacked in one row? Unless you mean each item will be in a row?

[crisbusquets]

I just read this part "they will appear one below the other, correct?". This would be jarring IMO. Because each email can need verification, has a resend button, and a remove button. How would that look if they're were stacked in one row? Unless you mean each item will be in a row?

Sorry it wasn't clear enough. I meant something like this (rough sketch alert):

[alshakero]

Love it!

[alshakero]

Closing as done.