how to build a better bank website: best practices for financial services web design

D I A L O G U E T H E O R Y

Best Practices for Financial Services Web Design

How to Build a Better Bank Website

[email protected]

mailto:[email protected]

Best Practices in Online Banking


1. A few things to understand about web design

2. Banking and the web in 20153. Building a strong foundation4. Case Study: Chemical Bank5. Questions?

A few things to understand about web design


A Few Things to Understand About Web Design


Information can be art, and therefore demands a thoughtful, present approach.



Great design is born out of research and close collaboration, and it is crystallized

by a relentless pursuit of excellence.



Web design is an organic process. New ideas and changes in direction are

opportunities to sharpen a story, not roadblocks to completing it.

Banking and the web in 2015




Confidence and trust are paramount Banking – especially online – is a closely personal

experience: be personal Privacy and security concerns abound Driving confidence in the brand is as important

as delivering an excellent user experience



Expectations are changing

Online services and apps such as Mint.com and Simple.com are building a heightened level of expectation from customers about what it means to manage finances online



Domain expertise should transcend your domain Consumers are looking to

be educated – be a domain expert

Making valuable content sharable will extend your reach – and credibility

Designing around “social artifacts” like infographics enables conversation



Responsive is crucial

Mobile devices are ubiquitous

It’s no longer a value add, it’s a requirement

A responsive site will adapt well to all devices

The investment is amortized

Banking and the Web




Aesthetics and user experience drive perception Flash, gradients, and gratuitous drop shadows are

out Minimalism and purpose-driven design are in

Simple, clear readable navigation Perfection in typography and imagery Crafting the experience to customer segments

and user’s goals Aligning look and feel to your organization’s

identity [CONSISTENCY IN BRAND/ALIGNMENT, MULTI-

CHANNEL]

Banking and the Web


Minimalism is bold and conveys confidence

Value proposition is front and center

Design is immaculate

Strong calls to action focus user on goals

Banking and the Web


Efficiency of information and navigation is key

Beautiful photography keeps visual interest

Interactivity subtly builds ownership

Contact and help options are clear

Banking and the Web


Combination of photography and graphics create depth

Navigation is untraditional but immediately intuitive

Customer testimonials convey credibility

Big prompts immediately involve user in process

Building a strong foundation


The Team


• Project owner• What key stakeholders will you involve in

the process, and what will be the level of involvement?

• What other third-parties need to be involved?

and

• A good project manager makes the magic happen.

The Story


• What does your brand stand for?• How was your bank founded?• What are your strengths – what makes

you remarkable?

Technology


• What content management system will be used?

• What third-party solutions need to be integrated?• Online banking• Application• Calculators• Maps

• Social media/marketing applications?

The Goals: High-Level


“Re-invigorate the consumer experience by upgrading the current, older design”

“Fuel increased customer engagement and amplify lead generation by making the website a destination.”

“Empower marketing to drive website changes and act rapidly on market opportunities.”

“Increase services per household by helping customers see how our various offerings work together.”

The Goals: Tactical


“We have 500 pages of content that needs to be migrated.”

“Compliance requires specific disclaimers across the website.”

“We support several key industries that we want to highlight.”

Case Study: Chemical Bank


The Bank


Chemical Bank has a legacy

The brand is 95 years strong Second-largest Michigan-based bank Strong community focus Excellent customer service powered by local-

decision making and buttressed by financial strength

The site


Discovery


Onsite kickoff Project

Management Content/Technical

Audit Stakeholder

Interviews Voice of Customer Competitive

Analysis DATA:

Web Analytics Published

Research SEO and traffic

data

Wireframing


Sitemap / Information Architecture

Functional Requirements

Wireframes

Design


Typography, color, custom graphics and iconography

Homepage design concepts

Design of inner pages

4. Development

Our Approach


Development onto Percussion CM1 OWASP alignment/review Content population QA/Testing: IE, Firefox, Chrome, Safari,

smartphones, tablets Delivery of live site Delivery of assets and implementation walkthrough

Before:


After


Questions?


[email protected]