Cyberfraud website prototypes

Project summary

Beyond, a design and technology ideas company based in London Bridge, had a requirement from one of their clients in San Francisco, to produce new designs for their 'Ad Traffic Quality Resource Center' website. That client was non other than Google.

The Challenge

The current website was very text based, and needed an updated look with more imagery. I was commissioned to work closely with Beyonds' UI team in London, and create a working prototype showcasing the new designs.

The Approach

After reviewing the designs I applied the Atomic Design methodology and quickly deconstructed them into a number of reusable common patterns. I implemented a component library called PatternLab which enabled everyone to track the progression of development online.

PatternLab allows you to develop small components and assemble them to create many different page designs without having to duplicate code. A very handy tool indeed.

These reusable snippets of HTML code would be implemented into Google’s very own internal CMS called Goro, that uses the Django templating language.

The Result

A fully functioning prototype contain mostly sample designs with the standard “Lorem Ipsum” placeholder text all developers are familiar with.

I created the Home page, ‘Click Fraud Protection’ and ‘Display Advertising Protection’ landing pages, along with the ‘Understanding Online advertising fraud’ and ‘Click fraud protection for publishers’ pages.

The working prototype can be viewed here.

Would you like to work with me?
Get in touch.