At a Glance

With the rise in popularity of mobile website viewing, mobile web design provided an alternative to the main desktop viewing experience. Thus, responsive web design was born as a solution to having to create multiple web designs – one for desktop, one for mobile, etc.

The method of designing for mobile first takes this one step further, and is based on the idea that the optimal viewing experience should be on a mobile device vs. a desktop device.




UX Designer

Visual Designer


Customer Journey and Conversion Executive + Frond-End Developer + me ( Product Designer )


Managing Director + Analytics Director + Head of Marketing



2 Months 


Group 5@3x.png


Group 14@3x.png



Most Effective Header = Simplistic + Minimalist + Brand Focused

The primary goal is to be instantly recognisable. Since the preview panel for most desktop and mobile browsers is 400-500 pixels height, it is important to keep the header below 70 pixels to maximise the available area for the hero section and the important CTA’s 


Good Mobile Navigation = Easy for people to find what they need without cluttering the screen

The menu will be accessible to our visitors by clicking on the hamburger menu on the top left side on the header.  

The goal is to give a consistent experience on all our devices and to provide all the important CTA’s and page links without cluttering the screen and by following the industry best practices.

importance of HERO BANNER

It is important that we track Heat Maps to identify individual clicks & how far users have scrolled down. Hero images can be a very valuable asset to any business. Incorporating these can not only primp up the design of a web page, but also build depth into page content. They are an integral part of our websites’ landing pages and the most important component of a successful website. 

Research shows that, the homepage often decides whether a visitor is going to be a potential conversion. 

When used well, they can make the difference between a longer visit and a bounce.


Click-through heat maps confirm that striking content showcased center stage in the browser’s window receives the most attention and that only 54.8% visitors scroll below fold.

By combining the banner and the Let Us call You form and placing it above the fold, we can expect more user engagement resulting into more lead generation.

Slide 1 : Brand Focused


Slide 2 : Price Focused


Slide 3 : Product Focused


mobile banner OPTIMISATION



Historically, the footer has been the afterthought, but click through heat maps confirms user engagement. 

By designing a footer with a responsive framework and by re-arranging the links based on the engagement we can actually generate major click-throughs.

Group 4@3x.png

People often assume application processes are long and time consuming. Making it clear how easy and how close they are to the end drives conversion. This panel would be attached to the footer on all the pages and will act as a last hook for the customers to convert.

roi score card

what next