I’ve had the pleasure of working on lots of ESL collateral over the years. From creating banner ads and email templates to spending time working from the ESL office to support the re-launch of their website in the 2010s.
One of the first projects I got to work on for them was a guide to their online banking application. Among friends and co-workers at the time, ESL’s banking application was one of the best that they’ve used from a customer experience standpoint. Part of being one of the best was making sure people knew where they were going and how to accomplish the tasks that are important to them.
We created a guide that could be summoned as a popup window from various places around the website. The guide covered several topics using text or videos to explain things like how to make payments on your mortgage or how to download statements.
The guide was built using Flash and it had a navigation bar along the top that swapping in different pages of content. Some pages looked like a screenshot from the online banking application and clickable outlines overlayed the screenshot. Some buttons displayed text or a link to take you to a longer knowledge base article. Other buttons played a screen-captured movie that included voiceover walking you through what was happening on screen.
Here is what the guide looked like:
What I Did
I worked with our designers and video editors to put this guide together in Flash. I adding the little transitions and hover effects, and I remember feeling it was important to break up the mask on the buttons to make sure that when the screenshots faded to highlight the guide content, the buttons didn’t fade with it.
I worked with the team at ESL to help launch this and make sure the popup window worked correctly.
Fin
This was our approach to the kind of thing you might use a tour JavaScript library for nowadays. ESL, along with our other financial clients, made it very clear where the line was between their secure banking sites and marketing properties were divided. For security purposes, we never touched source code within the banking apps, but this was as close to that as we got.
Probably the coolest part about this project for me was that I heard from a couple of people around that time that didn’t know I worked on it and had used this guide.