dotmailer

Web App UI & UX ▸ dotmailer

logo

dotmailer is one of the biggest email marketing companies in the global market. During a year and a half I worked there, we created a marketing automation tool, redesigned the entire app and created a brand toolkit and design system!

The web app itself is multilingual and also a white label product. Behind the scenes, there are thousands of pages so I had to create designs by considering several variations. But first, I spent some time to digest how the existing product works.

But first a little story

After I worked at dotmailer for 6 months, I was asked to work with the creative director to redesign the entire app. That was a great chance to show what I had in my mind for ages. But there was a little problem; I was working in the Product Team and I was inside the action and had a chance to see how things work, what are the problems and restrictions and so on. Our sprints and scrums were mostly internal so there was not much communication open with Marketing Team.

After I saw what Marketing Team had in mind, I went to my Product Lead and asked him to give me a couple of days so I could come up with my own designs. I had a go and created a mood board in hours then designed few critical pages such as a dashboard view, list view and automation cycle.

They liked them, everyone was happy, the end!

First things first

Before we changed anything, the web app was a bit busy and unorganised. There were several different styles for almost every single component. There was some sort of guidelines but the team needed to add new features which required new patterns and laguage. So I wanted to start over, from basics.

The following screens show a glimpse of what we created for a new pattern library and style guides. That was the first time I worked with a huge library and we introduced things that were "evolutionary" back then; such as SVG icons!!

colours
PL-01

Navigation

The other thing I wanted to change was "global navigation". Dotmailer app has several products under the same roof and each product comes with its own sub-navigation. Ans there is also account management, notifications, and more navigation items going on under each sub-navigation field!

The other issue wasthat we had to present the navigation in 9 languages. When it comes to German and Portuguese, you may need lots of space!
So, by keeping the main product (Email) as default, I created a dropdown for a product selection. As you can see below, it gives lots of space for a selected product and its environments, done!

navigations

Help Centre

Creating an email campaign can be very frustrating. We had a great help library was ready to present to the users and our developers suggested to create a contextual help system so regardless which page the user on, they always would find related help topics without leaving the page.

The help system we had was Zendesk and it gave us a chance to use on-the-fly features in this Help section, such as ticket creation and live chat. That was the time we had to consider minimal screen sizes and this Help section was designed as an adaptive view.

help-centre

Dashboards, listings and grid views

This is where the real action takes place. Every single section on these pages are interchangeable since some while label clients have different features than others and some sections are not visible to everyone. 

The following pages show a default dashboard, grid view and listing examples created by anything we designed from the ground. Working on tab designs was really interesting!

dashboard
gridview
contact-listing

Icons, loads of icons

Creating a custom icon library was the best part of this project. The existing library had gradients, different stroke weights so I revised every single icon with pixel-perfect precision.

We decided to use SVG icons and it was a relief not to worry about pixel density and resolution. However, we ended up creating the entire set in a 16px grid as a fallback.

icons

Selected Works

D / RACINGWeb & Tablet UI/UX Design

WesleyanDesktop UI Design

hayuVideo on Demand mobile and tablet app

DotmailerWeb App UI and Ux

Acremonte DistilleryResponsive Web Design

Deviant RobotBranding and Illustrations

WorkPlace - iPad AppMobile/Tablet Design

Better FacilitiesUX and Information Architecture

TicketmasterUX study on search functionality

Battle CrownGame 3D and Texture Design

Logofolio 1Logo and Branding 2010-2017