Email Design & Development
A redesign to modernize aesthetics and functionality.
UI Design
Email HTML
Responsive Design
PMMI Media Group
Maggie Wilson UI Designer
eBuilder
A material submissions tool created in the name of automation.
Context
The PMMI Media Group production and client success team needed an automated ad collections process for the email newsletter product. This would eliminate human error generated by a manual process, and expedite client material approval.
My Role
UI Design
Wireframing
Branding
Completed
2019
Collaboraters
Yevgeny Ananin, Senior Programmer
Status
Shipped, private tool
Inception
This project began with myself and the manager of PMMI Media Group's production team looking to automate how the email production team loaded client ad materials. Previously, the production team manually filled email content through our email service provider's WYSIWYG (most of our production team at the time was not comfortable working in HTML). This would often result in breaking the email previews, typically on Microsoft Outlook Desktop versions for Windows—the most-used email client for our user base.
Our developers had a 1-2 month opening in their development schedule, so this was a quick project to get designs approved and implemented.
Process & Insight
Understand the production/client success manager ad collection process.
Through speaking with our production manager and QC manager, I discovered that most clients are late on delivering materials or prefer to reuse ads if they have advertised with us in the past.
Research materials collection processes, form solutions, and dashboards.
I drew from a Litmus email conference session on content-collecting automation — referencing that slide deck among my other research. I also referenced the google material design documentation on designing for functionality.
Wireframe & Design
Due to the quick turnaround of this project, I chose to again use Google Material Design as our main component reference. Our developers often used the Material Design framework to build new products, so that was another card in Google's favor.
Interface Components
Color
The color scheme was chosen based on current color schemes used for other in-house products.
Typography
We chose the Roboto font family as the primary font for this site. Its taller x-height and a large selection of weights allow for increased legibility and versatility.
Card UI
I referenced Google Material Design in creating card designs. Many of PMMI's recent web frameworks were developed using this framework, and if not, Material Design's design library was referenced as a starting point to begin design.
Final Result
An email materials collection process that cut production rendering errors by 63% in one year, and streamlined ad collection.
Ideally, the production views would show a streamlined view of current campaigns and their statuses, with controls to remind clients to submit and approve materials, auto-generated reminder emails, and admin controls to re-approve materials or change campaign dates. The system would also generate the HTML and send ad blocks directly into a deployment in our ESP, automatically splicing ad content with editorial. Due to budget and developer resource constraints, this product was launched as solely an ad collection tool, with none of the extra automation. Nonetheless, this system did improve workflow, as it reduced rendering error requests by 63% in one year, and a total of 81% over the course of four years.
Conclusion
While this was a quick project, it was extremely valuable in that I worked with a truly functional interface. I was able to work with our production teams and developer who implemented the design directly to find the best solution for our current resources.
- Easy content upload. Clients and the production team now have access to a functional interface that reduces the need to manually work in HTML.
- Reference past campaigns for content. Clients would often reference completed campaigns, now they have the ability to pull in past content in real-time.
- Workflow dashboards were placed on hold. With the adoption of other process management tools and a new editorial curation system, the implementation of designed workflow dashboards could be redundant, excessive, and prove to be a cognitive overload to an already new and developing process.
Next Steps
- Adopt production workflow dashboards and interactions. Now that processes and other vendors have been nailed down, these dashboards will come back into play. They will ultimately aid in completing the long-term goal of increasing automation, and also apply to requirements of the pending redesign of the PMMI Media Group cloud marketing tool "Leadworks", in which eBuilder lives.
