Your SlideShare is downloading. ×
  • Like
How to Build a Better Bank Website: Best Practices for Financial Services Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 985 views
Published

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

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

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
985
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.
  • 7. Banking and the web in 2015 D I A L O G U E T H E O R Y
  • 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
  • 12. Banking and theWeb D I A L O G U E T H E O R Y
  • 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
  • 17. Building a strong foundation D I A L O G U E T H E O R Y
  • 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.”
  • 23. Case Study: Chemical Bank D I A L O G U E T H E O R Y
  • 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. The site D I A L O G U E T H E O R Y
  • 26. The site D I A L O G U E T H E O R Y
  • 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
  • 32. Before: D I A L O G U E T H E O R Y
  • 33. After D I A L O G U E T H E O R Y
  • 34. After D I A L O G U E T H E O R Y
  • 35. After D I A L O G U E T H E O R Y
  • 36. After D I A L O G U E T H E O R Y
  • 37. Questions? D I A L O G U E T H E O R Y www.dialoguetheory.com chris@dialoguetheory.com