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.
Customer Journey and Conversion Executive + Frond-End Developer + me ( Product Designer )
Managing Director + Analytics Director + Head of Marketing
OUR APPROACH = MOBILE FIRST
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.
DESKTOP BANNER OPTIMISATION
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.
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.
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.