dotmailer
Web App UX and UI - Client: dotmailer
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 hundreds of pages so I had to consider numerous variations to work with.
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 a few critical pages such as a dashboard view, list view and automation cycle.
They liked them, everyone was happy! The end!
First things first
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!!
At its current state, the web app was a busy platform with many branches that have been created over the years. 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 language. So I wanted to start over, from basics.
Global navigation
The other issue was that 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!
One of the main components that needed a rethinking was "global navigation". Dotmailer app has several products under the same roof and each product comes with its own content and function. And there is also account management, notifications, and more navigation items going on under each sub-navigation field!
Help Centre
The help system we had was built on 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.
Creating an email campaign can be very frustrating. We had massive content that includes several help topics and our developers suggested creating a contextual help system so regardless of which page the user was on, they always would find related help topics without leaving the page.
Dashboards, listings and grid views
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!
The dashboard was the real action takes place. Every single section on these pages is interchangeable since some label clients have different features than others and some sections are not visible to everyone.
Icons, loads of icons
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.
The existing icon library was a mixture of different sets that had been created over the 10 years of period. I created a brand new set of icons that aligns with the new brand guidelines and tone of voice.
