SuperShuttle is a transportation service that offers shared rides to and from airports. It allows multiple passengers traveling in the same direction to share a ride and split the cost. They began operating in 1983 and are now available in over 50 cities, providing an affordable and convenient option for airport transportation.
STEP #1: CHALLENGE
In travel and tourism, social networks are really important. Beautiful pictures on Instagram might entice people to bring those vacation plans closer to the current day. People also share travel updates on Facebook and ask for help on Twitter. Having a lot of followers on social media can make travel companies popular and keep them in people’s minds even when there’s a lot of competition.
Because of this, SuperShuttle wanted to make their social media links more noticeable on their website. They wanted more people to use their social media pages and they thought their social media icons didn’t stand out enough in the old design, which stopped them from reaching more people on social media.
STEP #2: ATTENTION INSIGHTS
Here’s how the website footer design with the social media icons looked like:
Let’s look at the AI-generated attention heatmaps analysis of this design:
The Connect column with the social media icons gets quite a big attention hotspot. It’s far from invisible. However, only 4.7% of the viewers’ attention went specifically to the social media icons, and it’s obvious that this percentage could be increased quite easily.
These icons could be positioned separately in a different column or row. For example, an additional row could be added above these link columns in this footer, and these icons could be placed on that row, which probably would be seen before the link columns.
The first insight: position social media icons separately from other links and logos to differentiate and highlight them.
Also, the icons are quite small. They could be increased. Instead of these minuscule circular icons, SuperShuttle could introduce social media buttons with a logo and the name of that social media network. They would take up more area on the screen, and this might make them more eye catchy.
The second insight: convert circular icons to larger social media buttons with the logo and the name of the social media network so they catch more attention.
The SuperShuttle team decided to remove their LinkedIn and mobile app page icons and draw more focus on their main social network pages, which are Facebook, Twitter, Google Plus, and Instagram.
The design team implemented the changes, and afterward, SuperShuttle conducted a straightforward A/B test. Over a period of ten days, half of their website visitors saw the original design, while the other half saw the new design. They tracked all clicks on these icons to determine which design was more effective.
STEP #3: RESULTS
This is how the predictive eye-tracking attention heatmap of the improved design looks:
In this new footer version, the social media buttons became quite a separate focal point. Putting them on a separate row visually differentiates them from other elements and thus draws more eyeballs. Furthermore, social media buttons take up much more space, which also helps to stand out in this case.
The percentage of attention on social media icons increased by 1.55 times (from 4.7% to 7.3%). It’s a 55% improvement compared to the initial design.
The A/B test results were incredible:
It seems that, in this case, more attention on these icons meant more clicks on them.
If you would like to find out how Attention Insight heatmaps could help improve your designs, you can reserve your spot in an individualized consultation with our specialist.
Source: AB Tasty
