Case study

MailOnline Creative Showcase

Timeframe:

September-January 2016

Tools:

Sketch, Invision, Slack, Trello, Adobe CC

Website:

www.mailmetromedia.co.uk

My role:

I led the design process from research to final implementation. I collaborated closely with the Project Manager, Head of Creative, Ad Operations Manager, Sales Director, and Account Managers. My responsibilities included user research, competitive analysis, data gathering and organisation, concept development, and UI/UX design.

TL;DR:

The MailOnline Showcase was developed as a portfolio for MailOnline’s Creative Team to centralise and streamline access to ad format specifications and examples. This platform enables potential advertisers and media agencies to easily explore and understand the wide range of digital ad formats available, addressing previous inefficiencies and improving client satisfaction. By providing a centralised repository for ad specifications, the project resolved issues related to disorganisation, errors, and client frustration. Ultimately resulted in a user-friendly platform that boosted productivity, standardised ad format data, and strengthened client relationships.

Increased Efficiency:

reduced the time spent searching for and sharing ad specifications

Enhanced Client Satisfaction:

higher client retention rates

Improved Ad Data Management:

reducing miscommunication

Streamlined Collaboration:

improving overall project workflow

Design Process

⬇️Jump directly to these sections:

1. Business Research

2. Project Overview

3. Research

4.Ideation

5. UI Design

6. Project Outcome

1. Business Research:

The MailOnline Showcase site serves as a portfolio of what the Creative Team has historically produced so that potential new advertisers can have a better understanding of what they would be buying into in terms of execution.

MailOnline has a very large and diverse offering of digital display and native products. There are about 40 different ad formats ranging between desktop, tablet, mobile, across web and apps. Not to mention all the new formats currently in development.

Part of the projects that are sold to clients are designed and built in-house by the MailOnline Creative team. However, a lot of the time, clients, media agencies and their creative agencies prefer to build things themselves.

This web app was designed from the ground up to fill this necessity. It aggregates all of the digital offerings and fleshes out every little detail the external creative teams might possibly need in order to complete their work.

2. Project Overview

🩺The problem

The email conversation below illustrates a common scenario we were trying to solve. In short, our clients would often want to get a sense of what formats they could place on the MailOnline website, how to build them and ideas of past executions so they could get their campaigns up and running and set basic metrics to track and figure out whether their campaigns were returning their investments.

🎯 Main goals

This was a real problem in terms of productivity because as simple as it may seem, the MailOnline did not have a centralised source for such data. Account executives had to rely on their own backups and would often send out outdated specs to clients who would in turn become very frustrated once they realised they were sold (and paid a lot for) the wrong thing.

In summary, our challenges were:

Information in too many different formats (spreadsheets, presentations, PDFs).
Not easily accessible.
No central repository.
No one owns the data.
Too many different versions scattered around the business.
Not easily kept to up-to-date.
Spec sheets are not standardised or comparable.
Client does not fully know what they bought.
Ads are built and delivered to Traffic based on wrong specs.
Clients end up frustrated due to mismanaged expectations.
Disappointed clients tend not to give us repeat business.

What I did

I worked with a Project Manager, the Head of Creative, the Ad Operations Manager, the Sales Director, one of our Account Managers and a few of his clients to run some basic research, competitive analysis, set design goals in response to this fundamental need of the business.

I also gathered the ad formats data from various sources, structured and normalised it into a concise and easy to digest spec sheet, common across all formats before solving the underlying problem through visual, UX and interaction principles by designing the Ad Specs web app from the ground up.

3. Research and planning

🔎Personas

I started this project by analysing what types of users we were trying to communicate with. The primary users being creative/agency types and therefore familiar with the technical ins and outs of ad serving platforms and rich media, it was safe to assume the information should be easily accessible and using technical terms wouldn’t necessarily get in the way. Non tech savvy users also had to be catered for however, so clearly stating format names as recommended by the IAB was a great way to make sure they knew exactly where they were.

The rest of the team and I created a few proto-personas that we would often come back to during the development of this tool. We found having these proto-personas was a great way to remove ourselves and our own biases and ideas from the process, allowing us to approach it more objectively and with the end users in mind.

The main users of the site would include MailOnline’s own sales team, brands, media and creative agencies working for their digital clients, each having their own unique set of goals. The internal sales team would be after simple specifications: where formats sit on the MailOnline page, their dimensions and where these formats are available on the site. They’d also constantly have to show clients what formats they had sold in, this is why the site creates unique persistent URLs for each format.

🔎Competitive Analysis

Looking at what other similar sites did to organise their data, I noticed most of them seemed to have trouble classifying information in a way that made it easy for the user to compare between different formats – ie. not all formats used the same fields, even naming conventions and some of those websites weren’t even public, forcing you to request access and wait for a response.

🔎Data gathering

I then started collecting all the ad format data. Some of it came from our Ad Operations team and some had to be collected from other departments. There was a lot of back and forth at this stage since some of the data was missing and it was important to fill those gaps and provide full spec sheets for every format. Once collected, this data was then used to generate the downloadable packages that also included build guides, Photoshop / Flash templates and printable versions of the spec sheets.

🔎Data sort

I sorted all the data into categories and normalised them into the same spec sheet so they could be easily compared and clients could get a better understanding of what they were buying into.

4.Ideation

🧪Testing concepts

Now I had a good grasp of what we were trying to accomplish, I then started sketching out ideas and coming up with ways to navigate and represent this data structure.

My concept involves arranging images of past campaigns in tiles and providing users with complete control over what they see through a filtering system. The challenge was to make the content accessible to navigate regardless of the variety of categories of information available. I came up with two different options for the navigation component.

OPTION1: Since the user would be able to use several types of filters – channel, format, device, category – my main concern was in keeping navigation simple instead of overwhelming the user with options. Additionally, the switch toggle OFF button provides a quick way to disable all active filters.

OPTION 2: To simplify navigation, I created a list of dropdown menus for the filters, allowing users to select multiple options and chain them together to expand their search. To prevent overwhelming users with options, my main concern was keeping navigation simple. The initial state option provides a quick way to disable all active filters.

Feedback

Option 1 received much more positive feedback, mostly due to the fact it requires fewer interactions in order to access the content, and the overall layout makes it a lot easier to compare them.

The two-panel selector layout also makes it very easy to navigate through formats. Having one panel containing a list of dropdown menus selectors and a second area, next to it, to display the content of the selected item/s.

I wanted the user to see the overall structure of the list and keep that list in view all the time, but I also wanted them to be able to browse through the items easily and quickly. At this stage they won’t need to see the details or content of more than one item at a time. They will need to select an item in one panel to see its contents in the other.

5.UI Design