Reimagine A confident and "at-home" website experience that is personal, modern, and feature-rich.
Role: Creative Direction / Art Direction / UX/IX/IA Design, Research & Strategy 2017
Redesign a new responsive website for Liberty Bank (liberty-bank.com) to feature a unique user experience concept that is reflective of the client’s desire for the site to stand out from typical bank websites and have appeal to a younger audience while still being accessible and meaningful to older prospects and existing customers. The redesigned site is launching in conjunction with the roll out of new and improved online and mobile banking services How we will achieve this is outlined below. The new website will be designed to be ADA accessible (WCAG Level A and AA).
Approach 1: Financial Control
This concept delivers on the promise of confidence by putting emphasis on security, tools, and information that customers have access to when they bank with Liberty. The message of financial control feels empowering to both emotional goals as well as tactical ones. This direction will borrow UI elements of familiar, everyday digital tools and experiences to express the Liberty Bank brand. We want people to feel that they are in control by having access to the things that matter to them the most—with ease and efficiency.
As a co-creation exercise, I asked the clients to envision a movie character that best exemplifies their brand's personality. Ed Harris from Apollo 13 seemed to resonate for qualities of being cool under pressure and taking control of a difficult situation.
Approach 2: Intelligent Banking
What if there was a bank that was made just for you? It was perfectly tailored to your needs and wants. It’s smart enough to know what you’re looking for and flexible enough to adjust to what you want it to do. This direction is all about a "people-first" mentality. It focuses on an individual's banking needs and aims to prioritize their tasks first. Liberty Bank understands the importance of that and adapts to each user accordingly by being a good listener.
Emma Stone's character from The Help also became a good representation of the Liberty brand. She was smart, empathetic, patient and above all—she just wanted to be helpful. She demonstrated being trustworthy by adjusting to other people's needs.
The challenge visually was to stand apart from other banks by using vibrant, emotional and uplifting imagery that didn't simply focus on finances, but the wonderful things in life that it helps fuel. Liberty Bank's color palette was had some limitations that we overcame by combining their existing colors to create new vibrant gradients without making an already large number of brand colors any larger.
The full team and the Liberty Bank clients collaborated on a 4-day work session to to further define the scope of the website redesign. On the 4th day, the teams shared their findings on the project context , roadmap and ended with a list of action steps to keep the project moving forward successfully.
We designed an approach where we didn't have to rely to heavily on rigid page templates, but rather a more flexible, scalable website system that was informed by three parts. First are the elements, which in this scenario are thought of as ingredients. These are your button styles, image, color, typography, etc… Next is the unique assembly of each element into a component. In our scenario we think of them as ingredients coming together to make something like a cheese burger. Once multiple components are assemble on a page, this becomes a page template or a "meal". This approach allowed the clients to understand how the system gives them a greater range of content types to make unique experiences.
User Experience Testing
Heatmap ran until 10,000 page views were met – analyzing versions with and without the Online Banking Login. As expected, for current customers most access the site and go straight to the Online Banking Login. When isolating to other areas of interest on the homepage (besides the Login), this provides the most insight and conclusions of what else users are interested in:
- Rates – users are looking to find current rates often
- Contact Us – users are looking to get in touch with Liberty Bank
- Locations – users are quick to find Liberty locations by clicking the locations link in the top navigation or by entering a zip code in the ATM/branch locator field
Users had low interaction with the callout slider. Users would scroll to see more but for the actionable buttons for each callout, there was little to no interaction.
User Experience Insights
Account, credit card, and product comparisons are becoming the norm for all large bank sites. They are a dynamic way to show the differences in features and give the user a sense of control throughout the decision making process. Consistency is key as not all users use the same bank for all their needs. Online only bank’s success stems from simplicity and portraying information in the most concise way possible. Priority should be to personalize their arrival to the site from their origin to anticipate their needs immediately vs. the user having to search for what they need. Educational and product information should be to the point and offer a clear call-to-action to eliminate any doubts that more information is available elsewhere. Copy that’s concise, clear and user-centric, and presented in a way that’s easy to scan/compare. Ease of use is a top priority (clear direction, fewer clicks). Educational resources are important, but they must be relevant, current and engaging. Create more ways to make personal connections with the Bank online. Create opportunities throughout the site to promote offers and push products to attract NEW CUSTOMERS. Make it easy for CUSTOMERS to quickly access frequently used info. Quick access to rates is critical. Content needs to be simplified overall – needs to be more customer focused and need-oriented
Build Reference Guide
The purpose of the Build Reference Guide is primarily to capture the purpose and behavior of each component that the entire digital experience is created from. This serves as a hand-off document between creative and the development team, but it also serves as a guide for QA and ultimately a reference guide for people who will have governance over developing future site content. All the components are based on the CMS platform and have specifications according to the CMS properties. The nomenclature matches the copy deck formatting so that everyone will use the same vocabulary in reference.