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.
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.
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.
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.
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 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.
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.
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.
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.