Banking with Personality Campaign Landing Pages

ClientWestern Financial Credit Union
DateJune 2015
Category
Tags, , , ,

As part of a larger campaign that the Creative team at Bluespire created (read more about the campaign here), I developed a series of landing pages for Western Financial Credit Union to promote different contests that encouraged members to log in to eBanking and showcase their new eServices video campaign.  The campaign focused on humanizing individual services in the campaign to show the ‘personality’ of each service and create a connection with Western’s member-owners.  This campaign was awarded a Platinum 2015 MarCom Award in the Digital Marketing Campaign category.

The first phase of the campaign included a landing page to promote the launch of the campaign and show all of the new videos. A rollover effect was incorporated into the area at the top of the page to add interactivity to each persona.  When an individual personality is hovered over by a user, a speech bubble with a greeting introducing that personality appears nearby.  All other personalities turn grayscale to decrease their focus.

When a user hovers over a personality on the desktop view, a talk bubble will appear for that personality and the other personalities will turn to grayscale.
On the mobile view, the personalities are shown on a rotating carousel.

Since this effect would not work as well on mobile or touch devices, the mobile version of the site displays the speech bubble without the need to click.  The mobile version of the site also includes a rotating carousel to show fewer personalities at one time.  Arrows are displayed so that users can navigate through all of the personalities.

In phase 2 of the campaign, a series of landing pages was created to ‘feature’ each of the personalities and different contests. I updated the top of the landing page to showcase each personality, including a ‘profile’ picture that faded between three different images of a personality.

The updated page featuring the ‘eStatements’ contest.
After all quiz questions are correctly answered, an overlay shows that encourages members to log in to win.

In Phase 3 of the project, we updated the page with a dynamic quiz related to each eService that encouraged members to engage with the site in a fun way. The page showcased a different eService each week with quiz questions related to that eService and their personality. To keep the quiz feeling ‘fresh’ and new, three quiz questions from a selection of twenty were randomly shown on the page after each page load. Users who answered quiz questions received a notice if they were correct or a prompt to re-try if incorrect. After answering all questions correctly, an overlay appeared encouraging the user to log in to their eBanking site to enter a contest.

Answering a question either encouraged a user to try again or confirmed that the answer was correct.

Challenges

There were several dynamic components that made this development a little more difficult for this site.  A major challenge was that Western’s mobile site was not responsive and the mobile WAP system could not be updated for new promotions. For the first phase of the campaign, the ‘mystery’ part of the contest was intended to be revealed to the user when they log into the eBanking site, so mobile users would not be shown each week’s prize through this system.

The mobile contest page.

I solved this issue by creating an ASP.net page that redirects a user based on their user agent.  This was necessary because their current mobile redirect has very specific device redirections; for example, tablets are redirected to the mobile site, except for iPads.  The ASP.net page redirects the user to an intermediary page that shows this week’s prize.  I created a series of eight responsive pages that displayed each prize and then allows a user to click and continue to the eBanking system.

Full Page Samples

Phase 1
Phase 2
Phase 3