Adfawn Communications

Jan 21st, 2015

Launched in 2015, Adfawn Communications wanted to bring a clean, professional, modern experience to their online presence. Being a startup, they wanted to convey their branding in an effective way that focused on their full feature-based services.

Objectives & Approach

The Objectives

Adfawn approached me as a startup requiring their first website. They required the following objectives:

  • Automated invoice and payment system (E-Commerce)
  • Content management with complete customisation (WordPress)
  • Mobile device compatibility
  • Clean, minimalist and animated experience
  • Client login area for profile management, purchases, invoices and personal contacts

The Approach

I began by gathering and understanding Adfawn’s user requirements which effectively translated into the wireframes and designs which I created. These designs would be validated and ultimately translated into a fully functional website.

During the website’s development, testing feedback were core parts of the development lifecycle. This helped to produce a very refined and complete product within the scope and budget. Ultimately effective documentation was created.


Key Features

Within the approach taken, some of the key features included the automated invoice and E-commerce system; as well as, mobile usability. A mobile-first approached was taken to effectively produce a fluent and consistent experience.



Require.js and the development of a custom jQuery plugin was used to make code maintenance and feature activation / deactivation very simple. Ultimately all JavaScript code was written in an object oriented way using the Module Pattern.

WordPress along with PHP and MySql were used to power the E-Commerce system. Server-side Open Office and the PHPPDF library enabled me to developed an effective automated invoice system.


The Adfawn website was well fitted with a host of robust features which were developed over 6 week period. Though the website hosts a very clean and minimal design, its core features are hidden within the client area. Well pleased with the result, we would soon see the results of the developed website.

Technologies & Tools

This project branched into many varying aspects of modern web development technologies and a few tools to aid in greater productivity.

  • HTML5
  • CSS3 (SASS / LESS)
  • jQuery
  • Responsive
  • Mobile
  • UX / UI
  • PHP
  • MySQL
  • WordPress
  • Photoshop
  • Illustrator
  • SEO
  • Logo Design
  • Website Templates
  • Wireframes
  • Adobe Photoshop
  • Adobe Illustrator
  • Coda
Responsive Design
Responsive Design
Desktop home page design
Desktop home page design
Navigation Design
Navigation Design
Portfolio Page Design
Portfolio Page Design
Services Call-To-Action Button Designs
Services Call-To-Action Button Designs
Services Core Features
Services Core Features