User Journey Mapping

As a lead designer on this project, I introduced a new tool – the User Journey Map. It is based on 30+ interviews with programmatic specialists and is an outcome of brainstorming done with the design team, product directors and our SMEs. User Journey map provides an overview over the whole process instead of concentrating on specific steps in the workflow. It presents the current workflow, the steps in the process, the pain-points and the possible ways to solve it. 

Ideation Project

When User Journey Map was ready, we kicked off an ideation project together with Product Directors, SMEs, Software Architects, UX Researchers and Designers. The ideation project consisted of several brainstorming sessions followed by concept creation and validation rounds. Validation rounds with clients provided us with valuable feedback and showed the direction.
The first screen to start with is Personalized Home. Personalized Home is the first page a user sees after logging in to Adform. It offers the user an easy overview of what is of most interest to her and provides tools to effectively monitor on-going campaigns and perform needed optimizations based on real-time data and insights. Personalized home can be easily customized by selecting widgets that are most useful to the user.  

First Validation Round

The first validation round confirmed that we were going in the right direction and helped to refine the concept. For example, clients stated they needed to have more data about campaigns, like underdelivering campaigns, examples of best running campaigns etc. While other items that were placed on first mocks (like deals troubleshooting) resulted in being unnecessary. The second validation round was conducted when hifi designs where ready, and brought additional input for adjusting widget arrangement and other details, for instance KPIs.

Content Validation

Content validation and prioritization of widgets in Personalized Home was done by creating a matrix with Personas and all possible widgets. The answers are based on interviews and persona cards. Widgets that got a higher "score" got a better position on the Home Page.

Concept in action

Two common scenarios for Programmatic Specialist will be described here, even if they are only only a fraction of all possible use-cases.

Scenario 1

First Scenario shows a common error, when a strategy (a line item) is missing banners and therefore isn't running. We redesigned the workflow in a way, so that users can get notifications and do the action directly from the home page, resulting in a 64% step reduction.

Scenario 2

The second scenario shows the most time-consuming workflow for a Programmatic Specialist: campaign optimization workflow. We redesigned the workflow based on user feedback and careful analysis of actions that are needed. The redesigned workflow resulted in 82% step reduction.

Lo-fi mocks

We also explored possible scenarios for optimisation, recommendation and campaign creation by designing lo-fi mocks and creating prototypes as well as validating them.

A Prototype with 2 scenarios

This is one of the early prototypes, showing the 2 scenarios – add missing banners and campaign optimization.

Hi-fi Design: Personalised Home

One of the aspects of this project was a complete redesign of platform look&feel. A color scheme was chosen that reflects stability and solidity of a B2B platform. A font with a good readability at all sizes was chosen. Animations and microinteractions were crafted for providing feedback to users and supporting every interaction.

The Personalized Home offers the user an easy overview of what is of most interest to her and provides tools to effectively monitor on-going campaigns and perform needed optimizations based on real-time data and insights. The Personalized home can be easily customized by selecting widgets that are most useful to the user.  

Message from a co-worker

Messages and notifications offer a significant improvement of users' workflow, by providing the possibility to take action directly from the message, that already contains the brief of the campaign.

Campaign creation

We provided pre-population functionality of the fields as well as redesigned completely the campaign creation page. Our aim was to present the most important settings by using progressive disclosure pattern and grouping of related settings.

We also redesigned the data visualization widgets, that now provide a much more clear and immediate feedback whether the targeting settings are good and what is the campaign forecast.

Audiences marketplace

Audiences are pre-populated, so Thomas, the programmatic specialist, can check whether they correspond to the demographic data and fit well campaign's brief.

Inventories marketplace

We used the progressive disclosure pattern for the inventory selection as well - most suitable inventories are already added to the settings based on demographic and other data from the brief, however, user can open the inventory marketplace and acquire new inventory without leaving the campaign setup.

Banners

Banners are also recommended, based on previous campaigns and the brief from the co-worker.

Recommendations

After creating the campaign, back in the personalised Home, user sees a notification, that a campaign is underperforming. He/she can directly apply the recommendation and optimise the campaign.

Design Library

A new design library was created, containing all the colours, fonts, effects and components. The design system comprised interaction patterns, typical workflows, composite and simple components and application states.

Token-based system

Based on the foundational visual concepts, we structured the design system's tokens hierarchically. We began with base and semantic tokens, then proceeded with defining the smallest elements: simple components and their corresponding tokens. This work included detailed specifications for sizes, paddings, corner radius, shadows, and more.

Interaction Patterns

After defining the main page types and component/page templates, we established all core UX patterns. This comprehensive definition spanned everything from list behavior and user messaging to forms, recommendations, entity creation, navigation, and in-progress processes. The complete list ultimately comprised over 50 patterns.