Credential Direct - Persona Switcher

The concept for this interaction is quite simple: click on the avatar to change the page’s content. Not just the hero image and supporting copy, but below-the-fold content as well. But the implications for technical implementation required a little extra work.

Since all of the content was related to a persona, we decided to break this out into its own content type that exists independently of the home page where they are displayed. In the CMS, the content manager has the option to select which personas to display on the home page.

Because we knew this would be a JavaScript based implementation, we opted for a progressive enhancement approach, so we could still show a default persona without it, and help out search engines crawling the page. The page displays the first of the selected personas by default, but it also outputs all of the content from each persona into a JSON object, which is output directly to the page to leverage browser caching. This was the most time consuming part of the implementation, because the actual JavaScript would be fairly simple and require the lowest effort.

We opted to use Handlebars.js as a template system so we can replace the content with the data contained in our JSON on the click event. Since the data is already on the page, this will happen really really quickly - no calls to the database needed. Even though it looks like only small parts are switched out, in reality entire blocks of html are replaced seamlessly.

Check it out in action.