Project Intro and Background
Our Web Analytics Manager Karen noticed from the web data that most of the visitors to our website are Small Business Owners. To answer that, we’d like to create a solution page to help them find out what are our key offering to each of their needs.
Therefore, the objective of this project is to guide small business owners to the products they need, so that they can get started with Salesforce more quickly and easily. This is a great showcase of marketing our “solutions” other than “products”, which is more attractive and relevant to our audience.
Interactive Solution Page
Page designed by APAC Senior Designer — Tricia. It’s aligned with our Small Business’s “Find, Win, Keep, Connect” messaging so as to enable our users to learn about the benefits more effortlessly.
It took me one day to code this design into HTML/CSS/Javascript and another day to make it responsive on mobile devices too. Below are some useful source codes that I gathered during this project. One of which is to pass a parameter through URL. I used to use my colleague’s code in a previous example — the agenda filter for World Tour Melbourne site. But the limitation of that method was, it could only pass a two letter string. So a better (yet longer) version of the code is the below.
Code to pass parameter through URL
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
Create Javascript functions to set the active state
I also used to write individual js code for each of the classes as shown in the example <HTML/CSS /jQuery Agenda filter for SF World Tour Melbourne>. Yet this time with a little more knowledge on Javascript and its functions, I created a function to set all the active states more efficiently, which is “setActive”.
function setActive(n){
$(".pfnav-cat"+n).removeClass("dim").addClass("active");
$(".pfnav-link").not(".pfnav-cat"+n).removeClass("active").addClass("dim");
$(".pfcat.cat"+n).removeClass("dim").addClass("active");
$(".pfcat").not(".cat"+n).removeClass("active").addClass("dim");
}
Then we can easily apply different styles based on which option was selected.
option = $.urlParam('option');
if (option){
switch (option) {
case 'win' :
setActive(2);
break;
case 'keep' :
setActive(3);
break;
case 'connect' :
setActive(4);
break;
default:
setActive(1);
}
Traffic sources
We were participating in Small Business Festival Victoria which drove traffic directly to this Solution page. We also did quite an innovative (and courageous) test on our Australia homepage too, to see whether we can boost the traffic and conversion during the festival period — we embedded direct CTAs to small business solution pages which is as below:
The top 4 navigation items on the left navigation of the banner direct traffic to the 4 sections of the small business solution finder page. However, this test didn’t really work in terms of traffic and conversion, so we had to switch it to the default view within a short time frame. I believe the learnings here are the jumbotron banner is getting too busy and it could confuse the users.
Mobile view
As I mentioned before, the page is mobile responsive and fully accessible and optimised for mobile view. The CTAs under each section are more direct as opposed to the desktop view which fits the mobile users’ behaviors. The whole interface is cleaner with a “Learn More” button should the users need to learn more regarding the solutions.
Project Management and Coordination
This project is a collaborative effort between digital team and field marketing team across different functions such as web data and insights; creative design; web production. We managed to create this within the APAC region all the way from the original initiation from data insights, to brainstorm, to wireframe/mockup, and lastly to web production. A fantastic example of data-centric web project! This is a top-of-funnel page yet I’m still very interested to learn the results from our web analytics manager when it reaches to something solid. Looking forward!
One thought on “HTML/CSS/jQuery Solution Finder for Small Business”