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.

 

my ROLE

Researcher

UX Designer

Visual Designer

TEAM

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

stakeholders

Managing Director + Analytics Director + Head of Marketing

 

DURATION

2 Months 


GOAL

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.

Group 5@3x.png

DESIGN AUDIT

Group 14@3x.png

HEURISTIC ANALYSIS


header OPTIMISATION

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 

menu OPTIMISATION

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.

Menu 1.png

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.

Group.png

Slide 1 : Brand Focused

 

Slide 2 : Price Focused

 

Slide 3 : Product Focused

 

mobile banner OPTIMISATION

 

Group 2.png

Footer 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.


INTERACTIONS


roi score card


what next