Marcelo Davanzo

Digital Product Designer

London, UK

US Ad Sales website

See the live site

About the project

MailOnline is the world’s biggest English language newspaper website. In August 2014 it had over 180 million global unique monthly visitors with 60 million visitors from the United States.

This website serves as a platform through which the DailyMail US team can communicate announcements, their latest stats and present advertising solutions to potential clients.


What I did

I worked with the Trade Marketing team to come up with the best way of presenting their data and making information as accessible as possible while empowering them to maintain the website and keep it up to date.


Discovery phase

We knew this should be a one-pager from the get go, where data would be broken down into easily digestible chunks.

The trade marketing team had a pretty good idea of what kind of information they would like to showcase and even some creative ideas of how they would like to present them.

We had a few conference calls where we discussed those ideas and how we could bring them to life. We also sorted the data in order of importance so that we could make informed decisions and position things on the page. After nailing all of that down, we moved on to the wireframing phase.

Project image

Wireframing

We knew what sections the website would have and a rough idea of how they would be stacked. This was the stage where we had to decide what type of content each section would hold. Amounts of images, length of copy, and essentially the entire structure of the site onto which we could build all the functionality that would make it usable.

We went back and forth with a few wireframes until we were all happy with the main structure before moving on to hi-fidelity sketches, mock ups and UI elements.

Project image

Visual design

The visual design takes follows MailOnline’s branding guidelines and sticks to a certain colour pallette. The idea is taht the content should make the design, so the UI tries to get out of the way and simply present the content.

That’s not to say it doesn’t introduce delight by means of smooth transitions and animations throughout the journey. I particularly like how we resolved the navigation elements into a burger icon on smaller devices, transitioning the options in a staggered manner when the user clicks to open it.

This is one of my favourite pieces in the UI work I did for this site. You will only see it on mobile breakpoints.

The contact form is quite cool as well: when you try to submit without filling in a required field it indicates that by shaking the fields. Submitting is pretty delightful as well with a nice reassuring confirmation that your message was successfully sent – without nasty page reloads, too.


The header

The header is a chapter in itself. The original concept came from the US team themselves. They wanted a header that would really catch your eye and showcase what DailyMail.com is all about: celebrities, strong headlines and incredible numbers.

I suggested we created a composition with lots of celebrity images, a few stats and headlines from our site and kept shuffling through them every few seconds.

Performance was a big concern to me, so I made sure to optimise images as much as possible while ensuring no unnecessary elements are rendered. I also leveraged CSS transitions rather than JavaScript for the animation effects due to their improved performance in this case.

I used the isotope plugin to order the tiles, CSS to create the background animations and JavaScript for the subtle parallax effect you see when scrolling down the header.

All animations stop once you hit the header threshold, this ensures the site runs as smoothly as possible and performance doesn’t take an unnecessary hit.

Project image


Development

I knew the site should be built on a CMS that allowed it to be maintained by the marketing team themselves without them having to deal with any code or go through any technical hurdles.

I decided WordPress would be the way to go due to its user friendliness and wide array of plugins that would make the site a breeze to update to people without previous experience in managing a website.

I built a custom theme while using a few plugins to facilitate content management that allowed for a truly visual interface for each of the custom fields the team would have to update in the future.

In practical terms this means, for example, that image galleries behave as real image galleries where images can be added or removed through a visual interface, unlike most themes that require the user to input a URL to the image they want to display.

Project image

Post launch

The site has been a success and is proving to be a valuable tool for the American team. So much so that the Australian team have recently shown interest in having their own version of the site with a few minor tweaks to make it more in line with their market.

AdvertisingMailOnlineMarketing websiteNew YorkSalesUnited States

Want to see more?

Here are my other case studies.

chevron_right
chevron_left