dotmailer

Web App UI & UX ▸ dotmailer

logo

dotmailer is one of the biggest email marketing companies in the world. During a year and a half I worked there, we created a marketing automation tool, redesigned entire app and created brand new materials materials; so many challenges!

Web app itself is multilingual and also a white label product. Behind the scenes, there is thousand of pages so I had to create designs by considering several variations. But first, I spent a month to understand 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 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 was mostly internal so there wasn 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 couple of days so I could come up with my own designs. I had a go and created a moodboard 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, web app was a bit mess. There was several different styles for almost everything. They had their guidelines but they were keep adding new features which required new patterns naturally. So I wanted to start over, from basics.

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 which were "evolutionary" then; such as SVG icons!!

colours
PL-01

Navigation

The first thing I wantd to chage was the global navigation. Dotmailer app has several products under the same roof and each product comes with their own sub navigation. Ans there is also account management, notifications, and more navigation items going on under each sub navigation fields!

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

navigations

Help Centre

Creating an email campaign can be very frustrating, believe me. we Had a great help library was ready to present to the users and our developers suggested to creae a contexual 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 interchangable since some while label clients have different features than others and some sections are not visible to everyone. 

Following pages show a default dashboard, gridview an 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. I always wanted to be an illustrator and I still do. Whenever a UI project requires an iconografic side work, I'm always there first!

We decided to SVG icons and it was a relief to not to worry about pizel density and resolution. However, we ended up creating the entire set in 16px grid as a fallback. I'm still a bit blind since then!

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