web app

New interface based on Material design system.

envelope

product

Mailbutler for Gmail is a Chrome extension that supercharges Gmail with a suite of productivity tools, designed to help you declutter your inbox and to write faster and stronger emails.

problem

In 2018 Google pushed out a major revamp to its Material Design guidelines. The new design language meant big changes for Gmail.
Mailbutler's plugin needed a revamp to fit with the new design.

sketch ui design
Screenshots from before redesign.

project

The design was based on insights gained from customer service on user experience, competitor research, Google material design system and Mailbutler's brand guidelines.

I was the only designer working with a team of two developers.
As for all my larger project I worked with a protype drawn up in vector that can easily be tweaked and shared with the team throughout the project.

ui design
Screen from protype showing message templates.

icons

The icons needed to be simple and legible to work in 18px. The previously outlined icons were difficult to see in the new interface. I, therefore, designed new solid styled icons with a similar look, so that existing users could still recognise each icon for each feature.

icons
Icons in SVG.

login

The login screen was a good place to be a little more creative and to show the company's brand identity and logo. The leaves are slightly moving in the background to beautify the experience.

ui design
Login screen.

Material Design

The design was made to be transparent so that the user feels like Mailbutler's interface is part of Gmail, while still keeping with Mailbutler's brand.
To do this I used similar UI patterns as Gmail, to give new users some grounds of familiarity to begin interacting with the product.

Most features are reached from within the compose window, this created a rather small space to work with, while still leaving most of the window blank for the user to write their email.

ui design

promotion

For the promotion, I worked with the head of communication and marketing. Where I created graphics for different media channels like; social media, Product Hunt, newsletter and Chrome store.

ui design
Graphic for Social media.

the impact

A little more than a month after launch the number of subscribers had increased with 68%.

ui design
Screenshot for Producthunt.