web app

Building a product based on Material design system.


Mailbutler for Gmail is a Chrome extension that supercharges Gmail with a suite of productivity tools, designed to help small businesses send more effective emails.

- My role: I was the only UI/UX designer working with a team of two Developers and a Project manager.

using gmail


In 2018 Google pushed out a major revamp to its Material Design guidelines. What might have worked before for Mailbutler now felt outdated and the thinly lined icons were not legible.

sketch ui design
Screenshot of compose window before redesign.

New custom icons

The previously outlined icons were difficult to see in the new interface because of their thin borders. I, therefore, designed new solid styled icons with a similar look so that existing users could still recognise each icon for each feature. But making them more inlined with material icons to match well with non-custom icons in the UI.

Custom icons that match with material icons.

Outdated UI components

Gmail's redesign also made Mailbutler's UI components feel outdated and were no longer inlined with Google's design.
Gmail's new rounded compose button made it a little more tricky to place a dropdown close to it for quick access to message templates.

UI problems
Problems with UI components

Redesigned 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
UI Components.

Compose window

In the compose window where you access most of Mailbutlers features by clicking on icons, I decided to use both Google Material icons for familiarity mixed with custom icons for the actions that Material does not yet provide icons for.

compose email
Custom icons mixed with material icons.

Promotion redesign

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

Graphic for Social media.

... a year later

It was time to implement some new features.

Card sorting

To easier access Mailbutlers features for sent emails, a decision was taken to add a Mailbutler sidebar in Gmail.
This meant that information and actions needed to be stacked on top of each other which made it very important to research and test the order of the features.

ui design
Card sorting.

Sidebar - Notes & tasks

Tracking details, follow-up reminders or Notes and tasks attached to contacts or emails can easily be seen through the sidebar.

ui design
Sidebar in a message thread.

Empty state of mini CRM

The first screen in a walkthrough that guides users on how to set up this feature.

ui design
Empty state of a mini-CRM in your email.

A mini CRM in your inbox

Detailed information on all contacts within an email conversation can easily be seen through the sidebar.

ui design
A mini-CRM for all your email conversations.

Dark theme

Also designed for dark theme in Gmail here with tracking details.

ui design
Designed for dark mode.