Uploaded byHuman Interface Group
ADM: Mobile banking and trading website - Keytrade Bank
Keytrade Bank, established in 1998, launched a mobile banking and trading website in 2008, with Paul van Diepen and Tommy de Kimpe evaluating the design's relevance in a rapidly evolving mobile environment. The mobile site aimed to facilitate banking and brokerage transactions while ensuring simplicity and ease of use. Despite initial success, the site requires further optimization for touch interactions and a transition towards native apps to enhance user experience.
More Related Content
Similar to ADM: Mobile banking and trading website - Keytrade Bank
More from Human Interface Group
ADM: Mobile banking and trading website - Keytrade Bank
- 1. Mobile banking &trading @ Keytrade Bank Paul Van Diepen Tommy De Kimpe
- 2. The project Paul Van Diepen In 2008, Keytrade Bank pioneered with a fully functional mobile banking and trading website. Paul Van Diepen is ICT Specialist at Perceptive Consultancy and led the Keytrade mobile website project as CTO for Keytrade Bank. Together with Usability Consultant Tommy De Kimpe, he looks at the design decisions that were taken at that time, and evaluates if they still hold true in a rapidly changing mobile world.
- 3. Keytrade Bank Foundedin 1998 as online investment site Bank since 2002, offering banking and brokerage products side-by-side Member of Crédit Agricole Group since 2007 Remote Channel Focus Only one “brick and mortar” office Strong in-house web-development team PC web-site for all products Mobile web-site launched early 2009 Near future: Apps
- 4. Keytrade Bank KeytradeBank PC website Banking Current account, savings account, money wires, domiciling, debit and credit cards Trading Transactions on major European and US cash and derivatives markets Market news Real-time price information Analysis tools Insurance Life insurances
- 5.
- 6.
- 7.
- 8. Pioneers Keytrade Bankpioneers in mobile banking WAP site launched in 1999 Mobile banking (and brokerage) web-site launched early 2009 Brokerage-only mobile products already existed from BinckBank (web) and Saxo Bank (Blackberry App) Most banks got on the mobile train in 2011
- 9. The design Paul Van Diepen
- 10. Mobile site requirements Keytrade Bank mobile site Support all banking and brokerage transactions Informational services limited to the essential Support all mobile devices with browser capabilities Support touchscreens as well as keypad devices Not a just miniaturized version of the PC site Keep it simple Easy navigation Avoid information bloat Recognizability between PC and Mobile site
- 11. Design principles Tommy De Kimpe
- 12. Let‟s talk… In 2008mobile really was in its infancy. It‟s already hard to imagine what it was like.
- 13. Let‟s talk… iPhone Unveiled to the public on January 9, 2007 On sale in the US on June 29, 2007
- 14. Let‟s talk… Android Androidbeta released in November 2007 dd Android 1.0 releaseddd September 2008 in
- 15. Let‟s talk… mobilebanking Itext like to be able to deal with my bank on the move would 31% 69% Agree Disagree/neutral In 2012, can you imagine almost 70% of respondents declaring not to be interested in dealing with their bank on the move?
- 16. My personal mobiletimeline 2002 2004 2007 2009 2011 2012 +1 As a designer, you are also determined by your own personal (mobile) experience.
- 17. In hindsight… Whatwe dowe do then? did What did dd then? Would we do it differently now? Would we do it differently now? dd Reduce functionality Keep navigation simple Optimize forReduce functionality * touch dd * Keep navigation simple dd * Optimize for touch dd These principles were considered good practices at the time. Do they still hold true?
- 18. Reduce functionality Keytradedesign vision: All transactions Banking Trading So we limited the information Only information needed to execute a transaction
- 19. Reduce functionality Assimple as possible, but not more simple either
- 20. Simple As simpleas possible, but not more simple either The standard Stocks app on the iPhone was an example of simple “Trading”. But that app is purely informational, we had to deal with more complex interactions.
- 21. Reduce functionality Challenged: same functionality required The first Facebook app did not include “Likes”. On my first Palm, I could read mails and reply, but not open attachments. And that was OK. Such limitations are simply unacceptable today.
- 22. ti on :Spri n gboard updat es & ext ras n : Spri n gboard simple es & ext ras Keep navigation updat Springboard Evernote Google Plus Pages vernote Google Plus Pages wit h summary dat a wit h drill down Good practice: keep navigation simple; so we used a springboard.
- 23. Keep navigation simple Main navigation always visible We kept the navigation visible at all times.
- 24. Keep navigation simple On a tablet, use extra space for navigation Trend: on a tablet, don‟t use the additional space for content, but for navigation.
- 25. Keep navigation simple On a tablet, use extra space for navigation Another example of using the additional space for navigation.
- 26. Keep navigation simple Content over navigation Other Trend: pull content up front and hide navigation.
- 27. Keep navigation simple Content over navigation Windows Metro: “content before chrome”
- 28. Touch Gestures are a very intuitive way to interact. You should see my three year old, swiping and pinching on the iPad.
- 29. Touch vs. We were up against the stylus and jog dial… We found gestures too revolutionary to apply to the full extent. We had no idea things would go that fast.
- 30. Touch Designs are still “click” However Not cover functionality with hand or fingers Optimized for fingertip controls Scrollbar Even considered scroll buttons The designs still feel “click”. We applied good „touch‟ design practices, but we didn‟t grasp immediately how scrolling would work. Luckily, our “scroll buttons” never made it to the final design…
- 31. Did we getit? Did we get it? Well, we did a pretty decent job, considering.
- 32. What did welearn? * Follow good practices dd * Good practices change dd * Change is fast, dd really, really fast #fh If you're not busy being born, you're busy dying
- 33. The road ahead Paul Van Diepen
- 34. Four years later The Keytrade mobile site has been refined, but no major changes were required Penetration of mobile vs PC site About 1% of all logins are on the mobile site About 3% of customers use the mobile site Currently around 0.5% of all brokerage transactions done on mobile site. Until mid 2011 this was 0.2% Mobile site not optimized for touch/gestures Web App good for all devices, but a strong demand for native apps emerged
- 35. The Road Ahead Optimize Web App for touch/gestures Upgrade to HTML5 when devices are ready Offer native apps for the most popular devices to increase visibility and user experience Apply UI design principles of the Mobile site to the PC site
- 36. [email protected] De Regenboog 11 2800Mechelen +32 (0)15 40 01 38 www.higroup.com @higroup Human Interface Group Human Interface Group
Editor's Notes
- #13 It’s already hard to imagine what it was like in 2008. To research for this presentation, I did a quick lookup of what the mobile world was like at the time, and I was stunned. Mobile really was in it’s infancy
- #14 Jobs unveiled the iPhone to the public on January 9, 2007 at the MacWorld convention in SF.It went on sale in the US on June 29, 2007.In the meantime, the famous tech website Dutch Cowboys, in their mobile trends 2008 forecast, are rejoicing themselves, because the iPhone is coming to Holland in 2008 (the 3G)
- #15 Android then. Well, Android beta was only released at the end of november 2007 and only went commercial in September 2008. That is 1.0.
- #16 Let’s talk mobile banking now. We all think it naturally that we have our online banking on the go, and we’re disappointed when our bank does not provide an optimal solution, right?Wel, reseraching this presentation I ran into this survey. The question was if the respondents would like to deal with their bank on the move. And almost 70% did not think it necessary…
- #18 What did we do then. Would we do it differently now?Let’s look at three principles that were considered good practices then, and whether these principles still stand. Reduce functionalityKeep navigation simpleOptimize for touch
- #19 Typical pitfall: trying to shrink your website to fit on a smaller screenBalance between making the application simple, and at the same time meeting the clients’ demands
- #22 This principle still stands but more and more challenged. People want the same functionality.Image this:The first Facebook app did not inlude any “Likes”On my Palm Tungsten E, initially, I could read and answer e-mils, but I could not open any attachments…How useful would you think this is.Think well about your core functionality, and make sure it is offered.
- #27 Add interactivity
- #28 Add interactivity
- #29 Nowadays, gestures are very well known. They are a very intuitive way to interact.Meet Julie. She’s my three year old. You should see her browsing through photo’s on my iPad and piching to zoom in and out… if she get hold of my iPad that is…
- #30 What we were up against, was the stylus, and the jog dial…We found gestures at the time too revolutionary, so we didn’t go all the way. We had no way of knowing things would go that fast.
- #33 What we learn:We followed good practicesGood practices change over timeChanges are really, really fast. This can be a burden, but it is a reality.So you work with what you’ve got and you try to follow along