Marcelo Davanzo

Digital Product Designer

London, UK

Showcase platform

See the live site

About the project

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’d be buying into in terms of execution.


What I did

I came up with the concept of laying things out in tiles containing appealing images of past campaigns, while giving the user complete control over what they see through a filtering system.


Wireframing

It was safe to assume the website would start with only a few projects but would eventually grow to hold several of those tiles. The challenge was to make it visually interesting regardless of how many tiles were on screen. The “empty” slots are marked with placeholders for that reason, so the page never feels empty.

Wireframing

UX

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 OFF button provides a quick way to disable all active filters.

Filters


Design & UI

The concept here is that content itself is what makes the design instead of adding unnecessary elements. The tiles are comprised of the format name, client it was developed for, a short description and upon clicking, a live preview of said format is launched on a new tab.

The filters are basically a list of checkboxes, this way you can tick multiple ones in order to chain them together and expand your search.

Design & UI
This is the loader I created for when the page is loading. It is done with CSS keyframe animations and uses the colours of the different MailOnline channels.

Build

The back-end for this site is a simple JSON feed that can be easily updated by anyone on the design team. All they have to do is generate a thumbnail image and create new nodes in the JSON file.

Code

Mobile specific

Some of the formats we created are better experienced on real mobile devices instead of emulated through a desktop browser.

For this reason, I have also created a separate mobile-only Showcase site.

This is a neat little tool the sales team can use to show clients what the real experience would feel like before closing a sale. You can check it out here.


AdvertisingMailOnlineShowcaseWeb application

Want to see more?

Here are my other case studies.

chevron_right
chevron_left