Explo - Email Builder

Designing the UI + interactions for building email reports in our product.

Project details

Team: Carly Stanisic - Product Designer, Andrew Chen - Cofounder, Jordan Greissman - Software Engineer
Role: Product Designer
Timeframe: 1 week
Tools: Figma

Goal

Design an interactive prototype demonstrating how we can allow customers to build customizable email reports based off dashboards they've built in our product.

Scoping

User Requests

Email building view with the ability to edit the dashboard layout within by dragging elements around
Interactive header + footer sections, separate from the dashboard
Text editor above + below (include interactions for editing text + previewing text)

Engineering Scope

Header: Static image global for all dashboards, or loaded specifically for each end user group
Footer: Clickable link to a customer page

Constraints + Additional Requirements

Cannot drag new dashboard elements into the email format
Text editor will appear inline, and only support rich text (no markdown)
Default to 600px wide to optimize proper email rednering on all devices and browsers
Option to hide/show certain dashboard elements in the email view of the dashboard (e.g. hide a share button)

Process

Clarify unanswered questions with engineers
Explore inspiration + best practices
Review relevant past design work
Sketching + prototyping, iterate upon feedback

Past Iterations

Iteration 1

Iteration 2

Final

After proposing all the design options and iterating upon feedback from engineers, we settled on this design using similar interactions to Iteration 2, but with an auto-save function.