I love Arsenal. Not because they win a lot of trophies (they don't), but because of their belief in "the Arsenal way," a philosophy that can be summarized as: always doing the right thing. To me, Litmus is the Arsenal of startups – except they also win trophies. In 2013, I had the privilege to work at Litmus as their lead and only designer. Looking back at my time there, I'm still struck by their deeply-rooted culture of respect, authenticity and their genuine drive for excellence.
In ten short months, with the help of their amazing team we completely redesigned and relaunched the Litmus tool that was the heart of the business, and rebranded all of the marketing pages, the blog, monthly newsletters, and still had time to design and ship two experimental products on the side. As the only designer I did all of the end-to-end interaction and visual design work for all products, taking them from wireframes to full html prototypes and occasionally tweaking shipped front-end code.
Redesigning the Litmus tool
Litmus is an online tool for email marketers and designers. Among other things, it helps them to make sure their email is delivered and rendered properly in all email clients and devices. It is an indispensable part of the daily workflow for many marketers and designers who cannot imagine their life without it. As such, I had to be careful that the new design would not alienate the existing passionate users.
The tool was originally designed by Paul, Litmus' CEO who is himself a designer. It already worked great, but was starting to show its age. I kept most of the core interactions intact, such as email previews and analytics reporting. I designed a new collapsible navigation, and simplified the UI for some of the settings screens. But the largest part of the overhaul was a brand new visual design across the entire app, with more consistent and structured use of colours, typography, and styles.
Early wireframing exploration for the Litmus product redesign
In addition to the visual redesign, I also worked on a few new features. One of them was a landing-page link checker. My design uses a screenshot of the user's email and overlays coloured dots over each detected link. The colour of the dots shows whether there is a problem with any of the links, and hovering over the them gives more information about the problem.
In addition to designing all the screens, I also coded many of the pages in html/css, helping our developers implement the front end. I often tweaked styles and markup on our production code after the initial check-in by engineers, freeing their time from having to wrangle with layout or style definitions.
We launched the new design in a matter of months. To my relief, the reaction was overwhelmingly positive. Our twitter buzzed for days with tweets about the changes.
The new Litmus UI launched with overwhelmingly positive feedback
Rebranding Litmus
Like the main tool, the design of Litmus' landing pages hadn't been updated since the product was first launched many years before my time. So redesigning these pages was a natural next step. I used the same visual style I had used for the main tool, combining elements of flat design with subtle textures for an overall look that conveyed Litmus' characteristic attention to detail. I also worked with our CEO to define and shape the messaging for the features we wanted to highlight and market.
Early wireframe sand concepts for Litmus' landing pages
Early explorations for Litmus marketing pages. Sadly the envelope guy didn't make it.
When all was said and done, I had designed and hand-coded 30 different marketing pages. Most of the sub-sections incorporated some sort of subtle scroll-based animation which I implemented using CSS and javascript. Most of the code I wrote was used in production. Here's how some of the final pages looked like:
A new blog
The Litmus blog was an important part of the company's communications and marketing strategy. It was updated regularly with deeply-written original content that attracted many readers from the email marketing community. However, the design of the blog did not do its wonderful content justice. Blog post image assets were inconsistent and often created by authors using rudimentary tools like Preview. The layout of the blog itself was good but not outstanding. I wanted all of our users' interactions and experiences with Litmus to feel consistently polished.
So I decided to redesign the Litmus blog using the same look and feel of our tool and marketing pages. Instead of showing the full-text of our often long articles on the home page like we did before, I decided to show shorter snippets of each article. I also added optional cover images for each post.
This design better suited our frequent pace of publishing, allowing visitors to skim through all the newly published articles in a visually engaging way, before deciding which ones to read completely. The result was another success. We hired a full-time communications designer to create all of our blog assets and post cover images using a consistent visual style. The blog is still going strong today, being regularly updated with amazing content accompanied by beautifully-crafted artworks.
Newsletters
Email newsletters were another important part of Litmus' relationship with its customers and the email marketing community at large. While at Litmus, I designed, illustrated, and coded all of our monthly email newsletters. I incorporated the same branding elements I used on our marketing pages. Thanks to their great content, these newsletter consistently received astonishingly high open and click rates, and were frequently showcased in email design galleries and websites.
And a few other things
In addition to working on Litmus, I also worked on other experimental side products that got shipped. One of them was the Litmus Scope, a plugin that allows you to capture and share any email you see right from your inbox, and easily look at the html code behind the email.
I had an unforgettable time at Litmus and am immensely proud of what we achieved together. My parting gift was a pixel-art poster of the entire Litmus crew circa 2013. While they have a much bigger team today, it's clear that they have maintained their fantastic culture and they continue to push the boundaries on product excellence. It's extremely inspiring to follow their successes. I wish I could say the same thing about Arsenal :)
