Trustfuel Gmail Integration

February 6, 2017 / Portfolio

Trustfuel users are primarily account or customer success managers (CSMs). They spend a significant part of their day talking with and emailing customers.

Many customer success teams were using an extension to import emails into Salesforce. They wanted to leave Salesforce, but couldn’t do it without emails in Trustfuel.

Seeing emails helped CSMs, because it gave them and idea of how likely the account was to renew. It also gave them a quick way to review any loose ends before check-ins.

Management liked emails, because they provided accountability. They could see when and how their CSMs were engaging with customers. Should an issue arise, they’d have quick access to recent exchanges.

So customers wanted emails in Trustfuel? How should we do that?

We discovered that several customers had already figured out the answer.

A handful of customers were copying and pasting emails into Trustfuel as notes. Because contact notes appear in the account timeline, it gave them a quick way to see all communication with an account—not just an individual. Plus, it saved them times and allowed them to get to other tasks.

Planning and Scope

I worked with Trustfuel’s two engineers, Jaron and David, to build this feature. I designed all of the concepts and built the UI.

There were a lot of unknowns about the Gmail API. So we decided to split the feature up into two different releases. The first would allow users to view their emails within customer timelines. The second would allow them to send emails from within Trustfuel.

We had a few stretch features we wanted to implement. Email templates were at the top of that list. They would allow users to quickly respond to common received questions quickly. Additionally we wanted to implement drag and drop for email attachments.

Viewing Emails

Timelines seemed like the obvious way to surface these emails to CSMs. After all, this is where current users were copying and pasting emails manually.

It also made sense with our vision for timelines. We wanted timelines to provide a record of all customer interactions. Where do you go when you want to review the previous quarterly business review? That’s right that account’s timeline.

Trustfuel Gmail Notes Primary

Above are notes from early concepts of how emails would appear on timelines.

In our first release clicking reply would open the Gmail conversation in a new tab. This would only be temporary. In the second release this would open the compose email modal with a pre-populated reply or reply all addresses. If a CSM was part of the email (sent, received, copied), they would be able to reply. If they were not part of the email, they can only see the contents in Trustfuel.

Trustfuel Gmail Notes Secondary

A ton of different outcomes will appear when multiple people get involved in the conversation. What happens if other CSMs are on the  email as well as contacts? What if there is an attachment? What if a contact not in Trustfuel is copied on the email?

Attachments in this iteration were too hard to read. We increased the font size and changed them to the default link color. One cool thing about attachments—any team member on Trustfuel can download them.

What happens when you click on a contact?

From the beginning we wanted contact and account information to always be one click away. In this case the clicking on a contact name will open that contact’s profile.

Wouldn’t email threading be helpful for context?

We had a lot of conversations about showing emails in a threaded format, but decided against it. Time was a constraint and we didn’t feel it added a huge amount of value. The ellipses menu includes an Open in Gmail link that will open the conversation directly  in a new tab (for those part of the conversation). That was our compromise.

Sending Emails

Our second sprint focused on sending emails from Trustfuel. This included our compose email modal, adding attachments and populating quick replies.

Compose Double Overlay

Aren’t account profiles in a modal? Are those modals stacked?

They are indeed. Using a modal emails can quickly be sent from anywhere within the platform—from tasks for example. We felt flexibility to use this element anywhere was more important than the awkwardness of multiple modals.

The most common use case for the email modal was when a user wanted to reply to a contact after reading an email in a timeline. Clicking reply or reply all would open the modal with the necessary recipients.

Additionally, this email modal appears wherever a mailto link previously appeared—in a note, for example. This would give users the ability to apply email templates when sending emails.

Compose Enter Link

Compose Edit Link

Concepts for highlighting and linking something within an email. We ran out of time in this sprint to implement this UI. If you link an item in an email we currently use TinyMCE’s default styles.

Profile Settings Disconnect

I will almost always choose simplicity over configurability. For email settings the team went through several heated discussions about what level of control we should give users. In the end we decided that the user could only connect and disconnect their Gmail account.

Won’t profiles be inundated with marketing automation emails?

We haven’t had issue yet, but are expecting it. Some tools send from general emails like Some might have hints in the email subject or body. I felt we didn’t have enough information to design effective filters right now.

We also had a few odd requests for filters. One customer does business with a friend. He uses that email for personal and business communication. He wanted the personal stuff filtered out. I don’t know how we could differentiate those. A Chrome extension with an option to toggle syncing with Trustfuel?


There were several enhancements that we added to our scope.

Select Email Template

Email templates was the largest enhancement. This would allow CSMs to create pre-built responses and add them to an email in a couple clicks. Merge fields would be pre-populate information related to that contact (or the related account).

Template Apply Warning

What happens when you apply a template to an email with multiple recipients?

We debated about this for a while. There were a few options. We could send nearly identical emails to people who were likely on the same account. Alternatively we could apply the template and add commas where multiple items would appear from a single merge field. We would also need to warn the user to review for potential errors.

The latter made more sense in practice. Sending nearly the same email would cause a ton of clutter in account timelines.

Timeline Filters

Between notes, health changes, tasks, orders and emails customer timelines were getting a little crowded. We added a dropdown that allows users to help them find what they want. This also saves, so if the CSM doesn’t care about orders they won’t appear the next time they login.

Attachment Drag

Email Attached

We ran out of time to get attachments implemented, but here was the concept for adding them. Drag and drop to the Compose modal or click that attachment icon to open the file picker. Once attached, the user can click the linked icon to view or download the attachment. Clicking the X removes it.

Final Work

Compose Modal Final

I did not get around to making all the updates I wanted to the email compose modal. TinyMCE runs inside of an iFrame, which makes it difficult to do things like load our fonts and move the edit options. I also did not get around to hiding the cc field by default. This should serve our client needs for the time being.

Gmail Profile Final

An email thread within an account profile. Some of the line breaks within email do cause spacing issues. We’ll need to work on that.


Almost every Trustfuel user has adopted our Gmail integration. It has also become a major selling point for the product.

Two things helped make the feature successful—ease of setup and instant value. It takes only two clicks to connect Gmail. Then it takes less than a minute for Trustfuel to import thousands of emails.

Final Thoughts

I wish there was time to go back and replace the styles in the email editor. Using TinyMCE meant we didn’t have to build our own, but simple actions are clunky.

I generally put together notes, short videos or prototypes for the engineering team to review before sprint planning. It gives a good starting point for discussion. Here’s a video before starting the sprint.