MailOnline Showcase
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.
Project background and description
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 and built 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.
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.
PROJECT OVERVIEW
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 problems 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
PROJECT OVERVIEW
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.
RESEARCH & 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.
RESEARCH & PLANNING
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.
RESEARCH & PLANNING
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.
RESEARCH & PLANNING
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.
DESIGN PROCESS
Testing Design 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.
DESIGN PROCESS
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.
DESIGN PROCESS
Final Product
EVALUATION
Results
- We tested the Creative Showcase web app on a variety of users, from tech savvy to non tech savvy and the most common comment was that the site was intuitive, easy to use and well organised, which allowed them to quickly find the information they needed. The filters allowed for quick navigation and the persistent URLs made it easy to share information with others, which was one of the main objectives of the site.
- Increased efficiency and productivity.
- Better communication and collaboration within the business.
- Overall, users were able to quickly find the information they needed and perform their searches efficiently, which was our main goal. We also noticed that the navigation feature allowed for quick navigation and easy disabling of all active filters.
- Creation of a more organised and streamlined process for managing data and information and accessible for internal and external stakeholders.
- Improved client satisfaction and retention.