dotmailer
Web App UX and UI - Client: dotmailer
Dotmailer is one of the leading global email marketing platforms. Over a year and a half, I worked across multiple initiatives—including the creation of a marketing automation tool, a full redesign of the core web app, and the development of a comprehensive design system and brand toolkit.
The platform was both multilingual and white-labelled, with hundreds of interconnected pages and use cases. Designing for it meant accommodating a wide range of layout and interaction patterns while maintaining consistency and scalability across the entire system.
Redesign Kickoff
Six months into my time at dotmailer, I was invited to collaborate with the Creative Director to redesign the entire app. It was a rare opportunity to put long-standing ideas into practice. I had been working deep within the Product team, fully embedded in sprint cycles, feature rollouts, and technical constraints. But while I had first-hand insight into the platform’s inner workings, there was little visibility into what the Marketing team had been planning.
After reviewing Marketing’s proposed direction, I approached my Product Lead and asked for a few days to explore an alternative vision. Within hours, I assembled a mood board and began designing key screens, starting with the dashboard, list view, and automation builder. The result struck a balance between strategic design and product realism. The proposal was well received across teams, and the redesign moved forward on solid ground.
The Foundation
What followed was the creation of a new pattern library and set of style guides, my first time working with a design system at this scale. We introduced forward-thinking solutions (at the time!) like modular UI patterns and an entirely new icon set built in SVG.
The platform had grown organically over time, resulting in a patchwork of inconsistent components and legacy styles. There were guidelines in place, but with new features constantly being introduced, the visual and interaction language needed to evolve. I decided to strip everything back and rethink the system from the ground up.
Complexity of a Navigation
The navigation also needed to scale across nine languages, some like German and Portuguese, required significantly more space. To solve this, I restructured the top nav with a product switcher dropdown. The default view prioritised the core product (Email), while giving other environments a clear and scalable entry point.
One of the biggest UX challenges was rethinking the global navigation. The app housed multiple products under a single roof, each with its own structure, functionality, and user needs. On top of that, there were layers of account settings, notifications, and secondary navigation scattered across the experience.
Contextual Support
We built the system using Zendesk, which allowed us to incorporate live chat and ticket submission directly within the app. The interface was designed to be adaptive, with layouts optimised for minimal screen sizes and responsive to the user’s current task.
Creating email campaigns can be overwhelming, especially for first-time users. We had a large volume of support content, and our developers proposed integrating it contextually. The goal was simple: users should be able to find relevant help articles without ever needing to leave the page they were working on.
Dashboards - Dynamic by Design
The following examples highlight default dashboard layouts, list views, and grid displays, each built from scratch using the new design system. One particularly fun challenge was refining the tab components to handle multiple use cases while keeping the UI clean and navigable.
The dashboard was where most of the action happened. Every section on the page was modular and interchangeable, depending on client type, feature access, or account permissions. This flexibility meant designing layouts that could adapt to a wide variety of configurations without breaking coherence.
Icons - SVG first, pixel-perfect
We adopted SVG as the default format, which meant no more worrying about pixel density or resolution across screens. As a fallback, the entire set was also crafted on a consistent 16px grid to support legacy rendering scenarios and ensure visual harmony at small sizes.
The original icon library had evolved over a decade, resulting in an inconsistent mix of styles. I created an entirely new icon set from the ground up, built to align with the updated brand guidelines and tone of voice across the product.
