Redesigning the Small Improvements emails

During Ship It Week, I took the opportunity to redesign our emails. The goal was to deliver a more modern and fluid layout in hopes of strengthening trust and creating a more pleasant user experience among our customers.

Before and After

email-blogpost--before-after-01.jpg
Before and after images of Small Improvements emails

Design

According to research1, aesthetics play a big role on how people interact with things. And while the old email template is usable and performs the task well, it was outdated and not as attractive as the current state of the app itself.

“Attractive things make people feel good, which in turn makes them think more creatively”

Emotional Design by Don Norman

There are many factors that affect how a person feels when interacting with an email from Small Improvements. The key is to simplify it by making it easier for people to understand what the email is about. And since emotions change the way our mind operates – the happier we are, the better we can provide valuable feedback!

We want our users to feel excited when they receive an email feedback request, or whenever a feedback has been made available to them. In the end, it’s not just about how a part of the tool looks – it’s also a way to connect individuals to special events that may happen during their time in a company.

email-blogpost-03.jpg
Different mockups of invitation email

Technical Details

Automatic inline styling

Emails are best structured in tables and styles work best when inlined. Inline styles can be a pain to maintain so I looked for a way to make it easier to update these templates in the future.

The great thing about working in the tech industry is that solutions to some problems are just a few clicks away because you can almost be certain that people have gone to the same problem already. We used a little library called gulp-inline-css that does exactly what it’s supposed to.

Before inliner:

<table class="table-reset">
  <tr>
    <td align="left" class="logo-container padding-copy">
      <!-- header -->
     </td>
   </tr>
   <tr>
     <td align="left" class="article-container padding-copy">
       <!-- content -->
      </td>
   </tr>
</table>

 

After inliner:

<table class="table-reset" style="border: none; border-spacing: 0; padding: 0; width: 100%;">
  <tr>
    <td align="left" class="logo-container padding-copy" style="color: #353535; font-family: 'Avenir Next', 'AvenirNext', Helvetica, Arial, sans-serif; padding-bottom: 20px;">
      <!-- header -->        
    </td>
  </tr>
  <tr>
     <td align="left" class="article-container padding-copy" style="color: #353535; font-family: 'Avenir Next', 'AvenirNext', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 25px; padding: 20px 0 0 0; text-align: left;">
       <!-- content -->
     </td>
  </tr>
</table>

All templates get a .responsive file extension so that the script knows which files to transform. It then outputs them with the correct filename that the accompanying java file needs in order to render correctly. Now everybody can make a CSS file, as they are accustomed to, and the script will automatically inline those styles!

Testing

During the entire process, I used a combination of a local mail server and online email testing platform. The benefit of the local mail server (which we’ve already set up) is that I get to see the email come in through my inbox when triggering events in the app, and can immediately see if something went wrong. Testing on the email testing platform, on the other hand, makes sure the templates are rendered correctly in as many email clients as possible.

Testing on different email clients

Next Steps

Changing the look and feel is just the first step to making our emails more pleasurable to interact with. The next step would be getting rid of the long links and replacing them with buttons and then revisiting emails that need a text overhaul!

Conclusion

Coding a template for emails is, without a doubt, very tricky. With hundreds of email clients and devices available within our grasp today, it’s no wonder that designing emails can quickly turn into a mess. But it can be done! The key is to make it simple and as straight to the point as possible. By combining it with rigorous testing, emails can be made almost as responsive as any website.

Endnotes

1  Apparent Usability vs. Inherent Usability Experimental analysis on the determinants of the apparent usability by Masaaki Kurosu and Kaori Kashimura;

Aesthetics and Apparent Usability: Empirically Assessing Cultural and Methodological Issues by Noam Tractinsky

Creating a SI Style Guide

After a significant project involving making Small Improvements responsive, we came up with some UI ‘rules’ that we in the design team or (‘UI Taskforce’) agreed upon. The longer we worked on this refactoring and ‘cleaning up’ of the app’s style, the more we realised the importance of (finally) having a Style Guide.

IMG_20160526_152845.jpg
The UI Taskforce! Adrienne, Kristof, Kolja and Timur. (I took the photo).

At Small Improvements, we often have the front end developers implementing UIs faster than we (the design team) can keep up, so it’s important that they can access this guide.

Continue reading

Static Showdown Hackathon at Small Improvements

11588120473_a8509a2920_h
The Static Showdown is a virtual worldwide hackathon for frontend-engineers. Hacking is more fun together – thus we provide our Berlin office as a central hub during the competition.

The competition starts on Saturday, 8th of February, 1am Berlin time. You then have precisely 48 hours to develop your app. Anything that you can run on a static web server (just files, folks) without writing custom back-end code is allowed. Teams can be made of up to four people. See the official homepage for pricesrules and FAQ.

Continue reading

How to offer good layout for printing websites without PDF: @media print

This is an article about the nice and mostly the ugly parts of customizing websites for print via CSS. During the work on our new design for Small Improvements I had to create CSS for print for the first time, following are the experiences I made, summarized in a way I think it would have helped me going this way.

Printing a Performance Review

It always seemed a strange idea for me – being born 1988 – to print out the internet. Apparently, some of our customers like to have their performance reviews in their hands so we were confronted with the odds of designing for paper with CSS. I did find a some articles about his topic, but none of them summed it up the way I needed it. So here’s my try.

First, I’ll give an overview on how to implement print styles, then give some suggestions about the workflow and at the end some general tips for styling HTML for print.

Continue reading