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.

- My role:
I was the only designer working with a team of two developers.

sketch ui design

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 of problem areas before redesign.

Research and Prototype

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

As for all my projects I worked with a protype drawn up in vector that can easily be tweaked and shared through Invision with the team.

ui design
Screen from protype showing message templates.

New 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
SVG icons.

Example of design process - Signup

In my first version, I tried to just clean up the design and make it easier for users to know where to click.
However, it was still difficult to tell if you were on the Login or Signup page. In the second version, I tried to fix this by moving the button to the login page below the signup button to not confuse it with a headline and have one less action.

It was later decided to add social logins, see final design of Login below.

ui design
Signup screen.

Login - final design

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

ui design
Login screen.

Example of final components

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.

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.

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.