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.
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:
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.
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.
As our final piece, we designed and implemented Sunblock's brochure site on Squarespace.