Published on <a href="https://blog.prototypr.io/a-user-centered-approach-to-transactional-email-design-ux-case-study-part-2-of-2-3de85234804f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Robert Sens 
<h4>Part 2 / How might we leverage research insights and hypotheses-driven ideation to rapidly define and prototype a proof of concept?</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/873/1*v8hzvApkyTw44t2vRmHZJw.gif">
This is part 2 of 2 / If you read part 1 — skip the intro! If not, you can read Part 1 here: <a href="https://medium.com/@senscreative/taking-a-user-centered-approach-to-transactional-email-design-case-study-part-1-of-2-e3368213aebd">Taking a User-centered Approach to Transactional Email Design: Case Study (Part 1 of 2)</a>
When it comes to prioritization and resource allocation, the design and definition of transactional emails is typically not at the top of the list. This often results in design and content that is not given the attention necessary to capitalize on the potential impact that an informed, intentionally structured email can drive for a product or service.
<blockquote>I quickly recognized the potential for intentionally structured transactional emails to help us deliver on our target KPI’s.</blockquote>
In my role as the Lead Product Designer at Reserve, a startup in the restaurant technology space, I encountered this very challenge. With limited resources and higher priority tasks, our suite of consumer-facing transaction emails had been given just enough resources to get them up and running, but were rarely though of unless absolutely necessary.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N_hn2Qxd9U3BR0m6omFpzQ.jpeg">
As the Lead Product Designer, I was responsible for the design of all of the products within the consumer product suite, transaction emails included. As we scaled our product ecosystem, I quickly recognized the potential for intentionally structured transactional emails to help us deliver on our target KPI’s.
<blockquote>In order to rally support around the initiative, I decided to take it on as a side project.</blockquote>
The only problem…time and resources, not just my own but also the other team members I would need to contribute to the project: content, marketing, technology, etc… In order to rally support around the initiative, I decided to to take it on as a side project.
<blockquote>To get started, I asked myself two questions.</blockquote>
To get started, I asked myself two questions:
<ul>
<li>How might we design more effective, intentionally structured transactional emails?</li>
<li>How might we build advocacy and equity around the project in order to secure the resources to bring it to life?</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N_hn2Qxd9U3BR0m6omFpzQ.jpeg">
This case study outlines the bootstrapped process I implemented to develop a proof of concept (POC) of a modular transactional email design system.
<blockquote>This case study outlines the bootstrapped process I implemented to develop a proof of concept (POC) of a modular transactional email design system.</blockquote>
Part 1 of this story <a href="https://medium.com/@senscreative/taking-a-user-centered-approach-to-transactional-email-design-case-study-part-1-of-2-e3368213aebd">(click here)</a> is focused on the first phase of the project which includes initial research, planning, and collaboration as a means to build equity and internal advocacy for the project.
Part 2 of this story (below) focuses on the second phase of the project which includes detailed interaction design, content definition, and developing a production-ready prototype using the Foundation for Emails front-end framework from <a href="https://medium.com/u/5dcb35352a08">ZURB</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N_hn2Qxd9U3BR0m6omFpzQ.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cbBHC9Ts_f5YIs0Cz1OLlQ.png">
This is part 2 of 2 / Part 1 can be read here: <a href="https://medium.com/@senscreative/taking-a-user-centered-approach-to-transactional-email-design-case-study-part-1-of-2-e3368213aebd">Taking a User-centered Approach to Transactional Email Design: Case Study (Part 1 of 2)</a>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MmfV-ZJQJqcpDUSc42UUcQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_8VrQig2X4HIhSgYuiuLag.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*T1xVpMfvW28o93nfDkkcAg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*M8b_f3q6tW1lSFPAIlHFIg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*M8i41xPtLtzhUAwrCQ3WVw.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9vyggk8Ge64FcuYME8yoHA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N_hn2Qxd9U3BR0m6omFpzQ.jpeg">
<h3>Phase 2: Outcomes and Takeaways</h3>
The second phase of the project focused on interaction design, visual design styles, content definition, and developing a production-ready prototype using the Foundation for Emails front-end framework from <a href="https://medium.com/u/5dcb35352a08">ZURB</a>.
Phase 2 Outcomes:
<ul>
<li>First, we identified scenarios and triggers as a basis to map all of the interaction points within the service ecosystem. These accounted for the various user types and origin points identified on Phase 1.</li>
<li>Second, we utilized the user needs and goals identified on Phase 1 as a basis from which to identify and design a modular set of components. This coincide with the design of a responsive architecture that would house a subset of modular components to form a discreet email.</li>
<li>Third, the foundation of a visual design language system was compiled in order to facilitate full-fidelity prototyping and testing.</li>
<li>Fourth, system content and copy needs were further defined, prioritized using an evaluation framework, then clear expectations were set on who was responsible for what and when it was needed.</li>
<li>Finally, we coded a production-ready prototype using the Foundation for Emails front-end framework from <a href="https://medium.com/u/5dcb35352a08">ZURB</a>. We tested the prototype extensively using <a href="https://medium.com/u/27fdbc0312">Litmus</a>, and iterated on the design and codebase to ensure consistency across a range of mail clients, apps, and devices.</li>
</ul>
Phase 2 Takeaways:
<ul>
<li>The up-front research, ideation, and hypotheses orchestrated in the first phase of this project provided a basis from which content-definition, design, and prototyping could take place quickly and efficiently.</li>
<li>Utilizing the Foundation for Emails front-end framework from <a href="https://medium.com/u/5dcb35352a08">ZURB</a> facilitated rapid prototyping, it allowed for less up-front static design in Sketch and more dynamic design and experimentation in code.</li>
<li>Content is king! Keeping content top-of-mind and implementing a content-forward approach during both ideation and design will help facilitate a more efficient progress and production pipeline.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N_hn2Qxd9U3BR0m6omFpzQ.jpeg">
<h3>Conclusion &amp; Next Steps</h3>
The proof of concept prototype was just the beginning of this project, it was the trojan horse I used to build advocacy and equity around the project in order to secure the resources to bring it to life. As the initiative gained traction, responsibilities for the project were more evenly distributed various stakeholders andteams.
A few next steps not outlined in this case study included:
<ul>
<li>Utilize Mandrill to make our templates dynamic by pulling content directly from our database, and customizing our transactional emails on the fly.</li>
<li>Plan and coordinate a limited production release with support from the cross-functional teams including: Back-end Development, QA, Marketing, and Operations.</li>
<li>Monitor and assess end-user interactions with the new system through analysis of key analytics and operational metrics over a three month period.</li>
<li>When confident, push a full production release to our entire user base!</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N_hn2Qxd9U3BR0m6omFpzQ.jpeg">
<h3>Thanks for reading! Did you read part 1?</h3>
Part 1 of this story <a href="https://medium.com/@senscreative/taking-a-user-centered-approach-to-transactional-email-design-case-study-part-1-of-2-e3368213aebd">(click here)</a> is focused on the first phase of the project which includes initial research, planning, and collaboration as a means to build equity and internal advocacy for the project.
Part 1: <a href="https://medium.com/@senscreative/taking-a-user-centered-approach-to-transactional-email-design-case-study-part-1-of-2-e3368213aebd">Taking a User-centered Approach to Transactional Email Design: Case Study (Part 1 of 2)</a>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3de85234804f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/a-user-centered-approach-to-transactional-email-design-ux-case-study-part-2-of-2-3de85234804f">A User-centered Approach to Transactional Email Design: UX Case Study (Part 2 of 2)</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

A User-centered Approach to Transactional Email Design: UX Case Study (Part 2 of 2)

Part 2 / How might we leverage research insights and hypotheses-driven ideation to rapidly define and prototype a proof of concept?

Top Stories