How do we leverage and integrate a 3rd party html editor into an older product?
Product
DonorPerfect
Date
Oct 15, 2019

For this project, I was tasked with creating a new feature that utilized a 3rd party html editor. This new editor would be used to let our clients create their own email templates so they can save time when sending thank-you emails to their donors. I did my usual assessment and conducted several rounds of usability testing - you can review my process here.

Usability testing provided a lot of positive feedback and some helpful suggestions as well - such as how we handle entering multiple addresses into one field. Some used commas, others used semi-colons. My question - why not both? Clients have been trained over the years through email clients in different ways inputting multiple email addresses, we should leverage that.

I produced a variety of wireframes to explore different ways we could approach an email template library that was new, but also needed to feel integrated with the older styling of the desktop app. Oh, and we also had to account for users being able to insert custom fields on their template as well - and a way to create a PDF version of their email for tax purposes.

What if they edit the email and PDF side-by-side?

What if we provide a tabbed view instead.. oh and their custom fields are integrated with the editor window in it's top menu?
That tabbed situation was feeling cumbersome, so what if we tried a bottom menu? After I finished this wireframe I realised how horrible of an idea it was. Next!
After a few more interactions.. the final resu

After a few more rounds of adjustments this is where I initially landed. It utilizes a tabbed workflow with dynamic text that lets you know if there is an attachment or not. Historical information was added so users could see who created the template and when it was last changed, a new multi-select component was added to let people add codes to their templates, and the merge field button was restyled to look more like a native part of the new html editor (even though it wasn't). So far clients really enjoy this new feature, and we've seen significant feature adoption as well. If I were to build this out more, I would add in best practice tips to the sidebar and other helpful information to help encourage them as they work on their donor relationship building.