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.dialog...
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...
A few things to understand
about web design
D I A L O G U E T H E O R Y
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
tho...
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
coll...
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
cha...
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 onl...
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 ...
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...
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 ...
Banking and theWeb
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, grad...
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 an...
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
k...
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
untr...
Building a strong foundation
D I A L O G U E T H E O R Y
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...
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 stren...
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...
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
d...
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 requi...
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-b...
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 Interv...
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
 Desig...
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
 Conte...
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.com
chris@dialoguetheory.com
Upcoming SlideShare
Loading in …5
×

How to Build a Better Bank Website: Best Practices for Financial Services Web Design

7,490 views

Published on

Learn how to better connect with bank and credit union customers online by creating a better website experience.

Published in: Design

How to Build a Better Bank Website: Best Practices for Financial Services Web Design

  1. 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. 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. 3. A few things to understand about web design D I A L O G U E T H E O R Y
  4. 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. 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. 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.
  7. 7. Banking and the web in 2015 D I A L O G U E T H E O R Y
  8. 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. 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. 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. 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
  12. 12. Banking and theWeb D I A L O G U E T H E O R Y
  13. 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. 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. 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. 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
  17. 17. Building a strong foundation D I A L O G U E T H E O R Y
  18. 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. 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. 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. 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. 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.”
  23. 23. Case Study: Chemical Bank D I A L O G U E T H E O R Y
  24. 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
  25. 25. The site D I A L O G U E T H E O R Y
  26. 26. The site D I A L O G U E T H E O R Y
  27. 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. 28. Wireframing D I A L O G U E T H E O R Y  Sitemap / Information Architecture  Functional Requirements  Wireframes
  29. 29. Wireframing D I A L O G U E T H E O R Y  Sitemap / Information Architecture  Functional Requirements  Wireframes
  30. 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. 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
  32. 32. Before: D I A L O G U E T H E O R Y
  33. 33. After D I A L O G U E T H E O R Y
  34. 34. After D I A L O G U E T H E O R Y
  35. 35. After D I A L O G U E T H E O R Y
  36. 36. After D I A L O G U E T H E O R Y
  37. 37. Questions? D I A L O G U E T H E O R Y www.dialoguetheory.com chris@dialoguetheory.com

×