Project summary
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.
