![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 6.682 7 L 13.682 0 M 9.227 0 L 13.682 0 M 13.682 0 L 13.682 4.455 M 5.779 0 L 1.909 0 C 0.855 0 0 0.855 0 1.909 L 0 12.091 C 0 13.145 0.855 14 1.909 14 L 12.091 14 C 13.145 14 14 13.145 14 12.091 L 14 7.955" fill="transparent" height="14px" id="bOZhJno0R" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1" stroke="rgb(15, 17, 17)" transform="translate(1 1)" width="14px"/></svg>)
Explo | Email Builder for Analytics Dashboards
How might we allow businesses to share customized analytics dashboards seamlessly?
Role
Product designer
Timeline
2 weeks (2021)
This is a selected project from my time at Explo. See what else I worked on here:
Background
Explo provides an embedded analytics solution that enables companies to securely share product analytics, project reports, and KPIs with each of their end-users, while customizing their dashboards to match their brand.
This project aimed to increase customer retention by providing a way for users to easily share their customized analytics dashboards.
Project components
Email Builder
How we designed the interface and interactions behind building email reports in Explo.
Marketing page
Marketing page to highlight Email Builder to prospective customers on Explo’s website.
Product Hunt
Marketing prototypes to promote the launch off Email Builder on Product Hunt.
Goal
Allow customers to build customizable email reports for their Explo dashboards.
Feature scoping
Users needs
Build and send an email for an existing dashboards in Explo
Edit the dashboard layout within the email using drag and drop
Customize the header and footer to their own branding
Switch easily between editing and previewing the email
Next steps
Clarify unanswered questions with engineers
Explore inspiration + best practice
Review relevant past design work
Sketching + prototyping, iterate upon feedback
Technical constraints
Cannot drag new dashboard elements into the email
Text editor will appear inline, and only support rich text (no markdown)
Default to 600px width to optimize proper email rendering on all devices and browsers
Option to hide/show certain dashboard elements in the email view of the dashboard (e.g. cannot hide a button from the dashboard in the email view even though it won’t be clickable)
Wireframe exploration
Iterations
Editing vs. saved
Hard to differentiate editing vs. saved state of email report: We created a more distinct visual difference between the editing and saved state in the email builder.
Save button
Trouble accessing the save button: Since this is a high priority action, we iteration the position and design of the button to be easily accessible at all times.
Option A
Option B
Final design
Collaboration + communication
This project involved constant collaboration between design, engineering, and marketing. As an early startup, we also iterated at fast pace, often completing the entire product development process from discovery to launch within 2-4 weeks. I kept my team up to date with design progress through recurring syncs or Slack messages
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 6.682 7 L 13.682 0 M 9.227 0 L 13.682 0 M 13.682 0 L 13.682 4.455 M 5.779 0 L 1.909 0 C 0.855 0 0 0.855 0 1.909 L 0 12.091 C 0 13.145 0.855 14 1.909 14 L 12.091 14 C 13.145 14 14 13.145 14 12.091 L 14 7.955" fill="transparent" height="14px" id="q5257NwBm" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1" stroke="rgb(122, 122, 122)" transform="translate(1 1)" width="14px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1.146 C 0 0.513 0.526 0 1.175 0 L 14.825 0 C 15.474 0 16 0.513 16 1.146 L 16 14.854 C 16 15.487 15.474 16 14.825 16 L 1.175 16 C 0.526 16 0 15.487 0 14.854 Z M 4.943 13.394 L 4.943 6.169 L 2.542 6.169 L 2.542 13.394 Z M 3.743 5.182 C 4.58 5.182 5.101 4.628 5.101 3.934 C 5.086 3.225 4.581 2.686 3.759 2.686 C 2.937 2.686 2.4 3.226 2.4 3.934 C 2.4 4.628 2.921 5.182 3.727 5.182 Z M 8.651 13.394 L 8.651 9.359 C 8.651 9.143 8.667 8.927 8.731 8.773 C 8.904 8.342 9.299 7.895 9.963 7.895 C 10.832 7.895 11.179 8.557 11.179 9.529 L 11.179 13.394 L 13.58 13.394 L 13.58 9.25 C 13.58 7.03 12.396 5.998 10.816 5.998 C 9.542 5.998 8.971 6.698 8.651 7.191 L 8.651 7.216 L 8.635 7.216 L 8.651 7.191 L 8.651 6.169 L 6.251 6.169 C 6.281 6.847 6.251 13.394 6.251 13.394 Z" fill="rgb(15, 17, 17)" height="16px" id="vbcKFYsh3" width="16px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 0 2 C 0 0.895 0.895 0 2 0 L 14 0 C 15.105 0 16 0.895 16 2 L 16 10 C 16 11.105 15.105 12 14 12 L 2 12 C 0.895 12 0 11.105 0 10 Z M 2 1 C 1.448 1 1 1.448 1 2 L 1 2.217 L 8 6.417 L 15 2.217 L 15 2 C 15 1.448 14.552 1 14 1 Z M 15 3.383 L 10.292 6.208 L 15 9.105 Z M 14.966 10.259 L 9.326 6.788 L 8 7.583 L 6.674 6.788 L 1.034 10.258 C 1.151 10.696 1.547 11 2 11 L 14 11 C 14.453 11 14.849 10.696 14.966 10.259 M 1 9.105 L 5.708 6.208 L 1 3.383 Z" fill="rgb(15, 17, 17)" height="12px" id="qQCJexakv" transform="translate(0 2)" width="16px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 8 0 C 5.829 0 5.556 0.01 4.703 0.048 C 3.85 0.088 3.269 0.222 2.76 0.42 C 2.226 0.62 1.742 0.935 1.343 1.343 C 0.935 1.742 0.62 2.226 0.42 2.76 C 0.222 3.268 0.087 3.85 0.048 4.7 C 0.01 5.555 0 5.827 0 8.001 C 0 10.173 0.01 10.445 0.048 11.298 C 0.088 12.15 0.222 12.731 0.42 13.24 C 0.625 13.766 0.898 14.212 1.343 14.657 C 1.787 15.102 2.233 15.376 2.759 15.58 C 3.269 15.778 3.849 15.913 4.701 15.952 C 5.555 15.99 5.827 16 8 16 C 10.173 16 10.444 15.99 11.298 15.952 C 12.149 15.912 12.732 15.778 13.241 15.58 C 13.775 15.38 14.258 15.064 14.657 14.657 C 15.102 14.212 15.375 13.766 15.58 13.24 C 15.777 12.731 15.912 12.15 15.952 11.298 C 15.99 10.445 16 10.173 16 8 C 16 5.827 15.99 5.555 15.952 4.701 C 15.912 3.85 15.777 3.268 15.58 2.76 C 15.38 2.226 15.065 1.742 14.657 1.343 C 14.258 0.935 13.774 0.62 13.24 0.42 C 12.73 0.222 12.148 0.087 11.297 0.048 C 10.443 0.01 10.172 0 7.998 0 Z M 7.283 1.442 L 8.001 1.442 C 10.137 1.442 10.39 1.449 11.233 1.488 C 12.013 1.523 12.437 1.654 12.719 1.763 C 13.092 1.908 13.359 2.082 13.639 2.362 C 13.919 2.642 14.092 2.908 14.237 3.282 C 14.347 3.563 14.477 3.987 14.512 4.767 C 14.551 5.61 14.559 5.863 14.559 7.998 C 14.559 10.133 14.551 10.387 14.512 11.23 C 14.477 12.01 14.346 12.433 14.237 12.715 C 14.108 13.062 13.903 13.376 13.638 13.634 C 13.358 13.914 13.092 14.087 12.718 14.232 C 12.438 14.342 12.014 14.472 11.233 14.508 C 10.39 14.546 10.137 14.555 8.001 14.555 C 5.865 14.555 5.611 14.546 4.768 14.508 C 3.988 14.472 3.565 14.342 3.283 14.232 C 2.936 14.103 2.622 13.899 2.363 13.634 C 2.097 13.376 1.892 13.061 1.763 12.714 C 1.654 12.433 1.523 12.009 1.488 11.229 C 1.45 10.386 1.442 10.133 1.442 7.996 C 1.442 5.859 1.45 5.608 1.488 4.765 C 1.524 3.985 1.654 3.561 1.764 3.279 C 1.909 2.906 2.083 2.639 2.363 2.359 C 2.643 2.079 2.909 1.906 3.283 1.761 C 3.565 1.651 3.988 1.521 4.768 1.485 C 5.506 1.451 5.792 1.441 7.283 1.44 Z M 12.271 2.77 C 11.741 2.77 11.311 3.2 11.311 3.73 C 11.311 4.26 11.741 4.69 12.271 4.69 C 12.801 4.69 13.231 4.26 13.231 3.73 C 13.231 3.2 12.801 2.77 12.271 2.77 M 8.001 3.892 C 6.518 3.869 5.137 4.647 4.389 5.928 C 3.641 7.208 3.641 8.793 4.389 10.073 C 5.137 11.354 6.518 12.132 8.001 12.109 C 10.245 12.074 12.046 10.245 12.046 8.001 C 12.046 5.756 10.245 3.927 8.001 3.892 M 8.001 5.333 C 9.474 5.333 10.668 6.527 10.668 8 C 10.668 9.473 9.474 10.667 8.001 10.667 C 6.528 10.667 5.334 9.473 5.334 8 C 5.334 6.527 6.528 5.333 8.001 5.333" fill="rgb(15, 17, 17)" height="16px" id="rGGJnYGQq" width="16px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 8 0 C 3.582 0 0 3.582 0 8 C 0 12.418 3.582 16 8 16 C 12.418 16 16 12.418 16 8 C 16 3.582 12.418 0 8 0 M 11.669 11.538 C 11.525 11.772 11.218 11.846 10.983 11.703 C 9.104 10.556 6.74 10.296 3.955 10.933 C 3.686 10.994 3.419 10.826 3.357 10.558 C 3.296 10.289 3.464 10.021 3.733 9.96 C 6.781 9.264 9.395 9.563 11.503 10.852 C 11.738 10.996 11.812 11.303 11.669 11.538 M 12.648 9.36 C 12.468 9.653 12.084 9.745 11.79 9.565 C 9.64 8.244 6.362 7.861 3.818 8.633 C 3.497 8.709 3.171 8.522 3.075 8.206 C 2.98 7.89 3.146 7.554 3.456 7.439 C 6.361 6.558 9.973 6.985 12.442 8.502 C 12.736 8.682 12.828 9.066 12.648 9.36 M 12.732 7.092 C 10.154 5.56 5.9 5.419 3.438 6.166 C 3.043 6.286 2.625 6.062 2.505 5.667 C 2.385 5.272 2.609 4.854 3.004 4.734 C 5.829 3.877 10.527 4.042 13.496 5.804 C 13.852 6.015 13.969 6.474 13.758 6.83 C 13.547 7.186 13.088 7.303 12.732 7.092" fill="rgb(15, 17, 17)" height="16px" id="gKRUQrpMu" width="16px"/></svg>)