How to Build a Better Bank Website: Best Practices for Financial Services Web Design
1. 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
www.dialoguetheory.com
chris@dialoguetheory.com
2. Best Practices in Online Banking
D I A L O G U E T H E O R Y
1. A few things to understand about web design
2. Banking and the web in 2015
3. Building a strong foundation
4. Case Study: Chemical Bank
5. Questions?
3. A few things to understand
about web design
D I A L O G U E T H E O R Y
4. A FewThings to Understand About Web Design
D I A L O G U E T H E O R Y
Information can be art, and therefore demands a
thoughtful, present approach.
5. A FewThings to Understand About Web Design
D I A L O G U E T H E O R Y
Great design is born out of research and close
collaboration, and it is crystallized by a relentless
pursuit of excellence.
6. A FewThings to Understand About Web Design
D I A L O G U E T H E O R Y
Web design is an organic process. New ideas and
changes in direction are opportunities to sharpen a
story, not roadblocks to completing it.
8. Best Practices in Online Banking
D I A L O G U E T H E O R Y
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
9. Best Practices in Online Banking
D I A L O G U E T H E O R Y
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
10. Best Practices in Online Banking
D I A L O G U E T H E O R Y
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
11. Best Practices in Online Banking
D I A L O G U E T H E O R Y
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
13. Best Practices in Online Banking
D I A L O G U E T H E O R Y
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]
14. Banking and theWeb
D I A L O G U E T H E O R Y
Minimalism is
bold and conveys
confidence
Value proposition
is front and center
Design is
immaculate
Strong calls to
action focus user
on goals
15. Banking and theWeb
D I A L O G U E T H E O R Y
Efficiency of information
and navigation is key
Beautiful photography
keeps visual interest
Interactivity subtly builds
ownership
Contact and help options
are clear
16. Banking and theWeb
D I A L O G U E T H E O R Y
Combination of
photography and
graphics create depth
Navigation is
untraditional but
immediately intuitive
Customer testimonials
convey credibility
Big prompts
immediately involve
user in process
18. TheTeam
D I A L O G U E T H E O R Y
• 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.
19. The Story
D I A L O G U E T H E O R Y
• What does your brand stand for?
• How was your bank founded?
• What are your strengths – what makes you
remarkable?
20. Technology
D I A L O G U E T H E O R Y
• What content management system will be used?
• What third-party solutions need to be integrated?
• Online banking
• Application
• Calculators
• Maps
• Social media/marketing applications?
21. The Goals: High-Level
D I A L O G U E T H E O R Y
“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.”
22. The Goals:Tactical
D I A L O G U E T H E O R Y
“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.”
24. The Bank
D I A L O G U E T H E O R Y
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
27. Discovery
D I A L O G U E T H E O R Y
Onsite kickoff
Project Management
Content/Technical Audit
Stakeholder Interviews
Voice of Customer
Competitive Analysis
DATA:
Web Analytics
Published Research
SEO and traffic data
28. Wireframing
D I A L O G U E T H E O R Y
Sitemap / Information
Architecture
Functional Requirements
Wireframes
29. Wireframing
D I A L O G U E T H E O R Y
Sitemap / Information
Architecture
Functional Requirements
Wireframes
30. Design
D I A L O G U E T H E O R Y
Typography, color, custom
graphics and iconography
Homepage design
concepts
Design of inner pages
31. 4. Development
Our Approach
D I A L O G U E T H E O R Y
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