Post on 08-May-2015
description
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.comchris@dialoguetheory.com
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 20153. Building a strong foundation4. Case Study: Chemical Bank5. Questions?
A few things to understand about web design
D I A L O G U E T H E O R Y
A Few Things 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.
A Few Things 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.
A Few Things 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.
Banking and the web in 2015
D I A L O G U E T H E O R Y
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
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
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
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
Banking and the Web
D I A L O G U E T H E O R Y
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]
Banking and the Web
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
Banking and the Web
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
Banking and the Web
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
Building a strong foundation
D I A L O G U E T H E O R Y
The Team
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.
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?
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?
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.”
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.”
Case Study: Chemical Bank
D I A L O G U E T H E O R Y
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
The site
D I A L O G U E T H E O R Y
The site
D I A L O G U E T H E O R Y
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
Wireframing
D I A L O G U E T H E O R Y
Sitemap / Information Architecture
Functional Requirements
Wireframes
Wireframing
D I A L O G U E T H E O R Y
Sitemap / Information Architecture
Functional Requirements
Wireframes
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
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
Before:
D I A L O G U E T H E O R Y
After
D I A L O G U E T H E O R Y
After
D I A L O G U E T H E O R Y
After
D I A L O G U E T H E O R Y
After
D I A L O G U E T H E O R Y
Questions?
D I A L O G U E T H E O R Y
www.dialoguetheory.comchris@dialoguetheory.com