Project Sunblock

Expediting fraud prevention in online advertising

Project Sunblock promises you won't get "burnt on the web." The company provides ad verification technology, so advertisers can avoid undesirable impressions. The platform can filter by domain, keyword, category, location or device. We worked with Hereford Technologies to update their brand, imagine the application experience, and launch a simple promo website.

Research

The project involved a heavy data visualization component — charts and data tables. Accordingly, the team put together some sample info graphics for inspiration. This led to a fruitful directional discussion. A few of the examples we looked at:

Architecture

Once inspired, we need to figure out Sunblock's users and their stories. 

After we cemented user stories, we aimed we determined the work flow for each different user. We realized some were pretty straightforward, but managing accounts was going to be a challenge because of data dependences.

Branding + Design

Once inspired, we set our minds on designing the experience. Because of deadline, we choose a very a very simple to design the initial interface within. Later we went back and applied fonts, colors, icons and updated some layouts.

To update the branding, we began with some pretty straightforward values, then grouped them. Once we had the groups, we assigned "look and feel" language.


We then created directions per group, and Sunblock ultimately decide on "the accurate brand," valuing precision, analysis and control

Functionally, our team did a fair amount of research on responsive tables.

Font-wise, we chose to use Bernini Sans because its tabular figures are perfect for all the data to be displayed. It took us a bit of time to activate the OpenType styles, both in Illustrator and CSS. It was worth it, though! Look at how nicely the numbers line up. Commas all in the same place — great for readability.

Screen Shot 2014-03-04 at 4.02.01 PM.png

Development

When our prototype was mostly cemented, we moved to creating a clickable HTML prototype. 

Versus previous projects, this time we embedded with the Hereford's team to work directly on their codebase.

For charts, we used FLOT due to prior experience.

Website

As our final piece, we designed and implemented Sunblock's brochure site on Squarespace. 

Published on by Anthony Ina.