Cyberfraud website prototypes

Project summary

Beyond, a design and technology ideas company based in London, 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 Google.

The challenge

The current website was very text based, and needed an updated look with more imagery. We were 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 we applied the Atomic Design methodology, and quickly deconstructed them into a number of reusable common patterns.

A component library called PatternLab was implemented 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.

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

Yes, I want you to help me
Grow My Business!


We only take on 3 - 4 new clients per month, so don't miss out on this opportunity.