SlideShare a Scribd company logo
Put a UI Developer in a Bank
See what happens
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/mobile-banking
Presented at QCon London
www.qconlondon.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Form follows function. For financial firms, function is so fortified and secured that no pretty
form could come close to it.
“Form follows function” Louis Seville.
Who’s from London?
http://blog.archpaper.com/wordpress/wp-content/uploads/2010/11/Louis-Sullivan-4.jpg
@hdragomir
me
I’ve built a lot of simple apps that rely heavily on user interaction.
And I’ve built lots of apps that hide complex data models in the background, presenting the
user with something that’s meaningful and easy to comprehend.
Using clever tricks, those kinds of apps empower users - make them feel like superheroes
When I use a typical banking app, I don’t feel like a super-hero. In fact, I feel quite dumb.
So I thought I could do something about the typical banking apps.
I thought the problems were easy to tackle like
browser support
“I heard you like security”
Why?
But that cake was a lie.
I have journeyed deep into the belly of the beast to learn about how the evil gets brewed,
baked, packed and packaged as an app, put in the user’s lap as happy managers clap.
On my first day, I got the access cards and got asked if I would be working from home.
Like a first date where you already have to watch a football game with her dad.
Because Developers
Banks are a safe haven for backend developers.
He who has rank gets his way.
More Developers!!
Trying to solve a design problem by throwing more developers at it is as effective as trying to
solve an algebra problem by chewing bubble gum.
A year ago I was saying this. Banks didn’t get this memo
[0..1) In-house Designers
banks rely on agencies to do episodic design work
spec changes don’t get communicated to designers and instead are shoehorned into the
current design.
So then the Bank says...
and that's the way it's always been. Until people REALLY started to complain
We Fix it!
Especially the mobile apps - which at first were just the desktop app served straight up to the
mobile clients.
Near-cool Mobile Webapps
... mostly made by Java Developers
Java and C# devs are really good at building Java and C# apps.
If you have to work in Eclipse or Visual Studio you start believing those are good interfaces.
Those interfaces are good for editors, but make for poor inter fæces for webapps.
Java + JavaScript = <3
Raise your hand if you believe this to be true
Banks are moving
As you will see later in this track.
http://www.cusai.ie/wp-content/uploads/2011/08/CAT_0676.jpg
Release Cycles
A Bank is No Startup
2weeks vs. 6months release cycles don’t always sync up
Use Before Re-use
“The other team are building a thing like what we will need, let’s wait to use that.”
Talk the talk, rewrite the spec!
I sat down with the Project Owner and verbally agreed on some changes; implemented them
only to see them reverted by another dev because QA said they did not match the spec.
Prey the other team will
deliver
Dependencies are a hell without having to add OTHER TEAMS to the list. Plus, their delays
also become your delays. Especially if they deliver something slightly different than what you
were expecting.
Not All Requirements are
Born Equal
Their list of supported browsers might not be the same as yours. They might be targeting
mobile webkit while you’re stuck with supporting IE7...
Polyfill is the transition!
Tooling
Firewalls!
they will make researching for answers a living hell. Google is not blocked, but stackoverflow
is because it is a “social network” ?!?!
Then there's the issue of installing software
You are not an admin!
Heck, you can’t even install a different browser to test on.
Browserstack?
While I love Browserstack and tools of the sort, you cannot possibly begin to use them from
behind a super restrictive firewall.
Especially the local tunnelling
You Get aVM
You get a VM that has IE6 on it, maybe Firefox, maybe Safari, that is managed by a sysadmin
that’s grumpier than a mountain lion in heats gone hungry. And you have to time share it
with all the other teams.
dynaTrace
You go to the knife store and ask for a knife.
http://www.equalreviewer.com/wp-content/uploads/2011/12/gerber_gator_machete.jpg
http://media2.shop57.org/628-1047-large/baionette-garand-m1.jpg
Nonono, a steak knife
http://www.colt22rimfire.com/uploads/images/m16rifle/left.jpg
We also have you the gun so you can kill your own cows to make steaks yourself.

"whining scripting guy who needs a macs to ‘debug.’ Why can't he debug like real men?"
Getting a Mac on your dev network. I still think that was my biggest ripple in that bank.
Having a mac helps with debugging webapps on iDevices
Made sense because we were focusing on iDevices...
It felt like the good old days; you didn't have device labs back then. You'd have to go to the
mall and prey the WiFi was working in the phones department that day.
When we got our first bug on iDevices, I had to discover the problem at home on my Mac.
And I couldn't charge the bank for the time because I said I would not be working from home
macnetizados.blogspot.com
Who DoYou Work For?
Your manager or your user?
50 Shades of Grey
Managers are happy with an app like this.
When I joined the bank, other teams were making fun of the project I was on by calling it 50
Shades of Grey
Managers want people who are good at building stuff like this
And who are very good at defending their code, decisions and poor performance with cool
PowerPoints
v1
And that’s how the first versions were built
theSuperFunctionNameThatTellsYouWhatItDoes() {
by bank-experienced developers who write well functioning code
theSuperFunctionNameThatTellsYouWhatItDoes() {
return window.a={asd:{b:”c”, d:’4’+2}.s(fda)}().asd
}
that is unmaintainable, in order to secure their senior position in the bank.
“When a junior can’t work with the code, it’s obviously because he’s a junior”
http://farm5.static.flickr.com/4016/4439159065_f81cb4474d_o.png
And they are very good at stuff like this
But don't let them decide the layout of your app
But they wanted to go mobile, and heard that HTML5 is cross platform. Like Java - and that
was the winning argument.
They also heard that Android users are poor.
So they made HTMiOSL5 apps that replicate iOS UI styles poorly
And ended up with apps that made sense to no-one, were confusing and felt odd and
sluggish
Senior guys in banks know how to tickle their bosses.
do your thing
do your thing
do your thing
do your thing
do your thing
This is how I changed the main copy style more or less without telling anyone
Fight for your right to CSS
Safest place you can make changes. Changes that improve the UI.
Changes most other devs will not understand, though.
main.css
Maindotcssitis
Policy, Policy, Policy
Do they do progressive enhancement or graceful degradation?
Do they guard for failure first or as a last resort?
That mentality needs to be in your code.
Safely do your thing
Start with the lowest IE
Once that is covered, you can use whatever you want to conditionally load stuff smarter
browsers can use. IE10 is included in smarter browsers.
Oh, and let me tell you how the devs in the bank finally got Chrome and Firefox...
Your desktop app is probably your main focus, but you’re going to have to provide the same
functionality to your mobile users. Especially iPad users.
Once iOS is done, you can start covering the corner cases that Android will come with. Your
bank will probably not pay you for this as they might still not see value in Android.
Common Sense
Feature Priority
You’d imagine you get a crazy amount of metrics in banks... nope
Find out what your users are doing and make it easy for them to do it.
Like transactions, transactions overview.
Do not simply remove the other features. Everything you can do on your desktop you should
be able to do on your tablet. Don’t dumb it down.
Hire In-house Designers
And keep them involved in the product’s lifecycle.
Let them adapt the design over time, as features and needs evolve
Platform Awareness
Don’t reinvent the wheel, or force skateboarders to use bikes. Harness what each platform -
iOS, Android, Windows Phone, Linux - offers and make it easy for your users to understand
what your controls do.
Proper Dev Environments
I hate visual studio, yet so many banks’ workflows are so closely tied to it that it’s almost
impossible to use something else. This needs to change.
❤$
Once banks start covering those 4 areas, not only will their banking apps get better, it will be
easier for them to find people willing to make their apps better.
Maybe, in a not so distant future, we will actually be able to smile and be pleased with the
universe while sending money to our loved ones from our super cool mobile banking apps.

More Related Content

PDF
Challenges Developing Realtime Web Apps
PDF
Designing better user interfaces
PDF
How good is your software development team ?
PPT
Passionate Product Ownership
PDF
Architects and design-org
PDF
Responsive Web Design & the state of the Web
PDF
Freelance Designer Guide - How To Be A Successful Freelance Designer
PDF
Smart Housekeeping Apps
Challenges Developing Realtime Web Apps
Designing better user interfaces
How good is your software development team ?
Passionate Product Ownership
Architects and design-org
Responsive Web Design & the state of the Web
Freelance Designer Guide - How To Be A Successful Freelance Designer
Smart Housekeeping Apps

Similar to Put a UI Developer in a Bank; See What Happens (20)

KEY
Why Do Mobile Projects Fail?
PPTX
Codemash 2.0.1.4: Tech Trends and Pwning Your Pwn Career
PDF
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
PPTX
IT Technologies Career perspective
PDF
Cross Platform Mobile Development
PPTX
It career paths
PPTX
Consider Starting Small
PDF
Predicted! Top Software Development Trends for 2021
PDF
10 Quick Tips to Speed Up Android App Development.pdf
PDF
Betty Blocks On Stage 2018: The Roadmap
KEY
Infotec 2010 presentation
KEY
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
PDF
BLUG 2013 - Mobile Application Delivery - Choices, choices, choices
PDF
Mobile User Interface Development Challenges and Trade-offs
PDF
Web application development full &amp; detailed guide for 2022
KEY
Mobile Apps for Businesses
PPTX
Codestrong 2012 breakout session mobile platform and infrastructure
PPT
Connect 2014 JMP 104 Mats Jansson and Fredrik Paulsson
PPTX
Windows store app development V1
PDF
Your first web application. From Design to Launch
Why Do Mobile Projects Fail?
Codemash 2.0.1.4: Tech Trends and Pwning Your Pwn Career
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
IT Technologies Career perspective
Cross Platform Mobile Development
It career paths
Consider Starting Small
Predicted! Top Software Development Trends for 2021
10 Quick Tips to Speed Up Android App Development.pdf
Betty Blocks On Stage 2018: The Roadmap
Infotec 2010 presentation
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
BLUG 2013 - Mobile Application Delivery - Choices, choices, choices
Mobile User Interface Development Challenges and Trade-offs
Web application development full &amp; detailed guide for 2022
Mobile Apps for Businesses
Codestrong 2012 breakout session mobile platform and infrastructure
Connect 2014 JMP 104 Mats Jansson and Fredrik Paulsson
Windows store app development V1
Your first web application. From Design to Launch
Ad

More from C4Media (20)

PDF
Streaming a Million Likes/Second: Real-Time Interactions on Live Video
PDF
Next Generation Client APIs in Envoy Mobile
PDF
Software Teams and Teamwork Trends Report Q1 2020
PDF
Understand the Trade-offs Using Compilers for Java Applications
PDF
Kafka Needs No Keeper
PDF
High Performing Teams Act Like Owners
PDF
Does Java Need Inline Types? What Project Valhalla Can Bring to Java
PDF
Service Meshes- The Ultimate Guide
PDF
Shifting Left with Cloud Native CI/CD
PDF
CI/CD for Machine Learning
PDF
Fault Tolerance at Speed
PDF
Architectures That Scale Deep - Regaining Control in Deep Systems
PDF
ML in the Browser: Interactive Experiences with Tensorflow.js
PDF
Build Your Own WebAssembly Compiler
PDF
User & Device Identity for Microservices @ Netflix Scale
PDF
Scaling Patterns for Netflix's Edge
PDF
Make Your Electron App Feel at Home Everywhere
PDF
The Talk You've Been Await-ing For
PDF
Future of Data Engineering
PDF
Automated Testing for Terraform, Docker, Packer, Kubernetes, and More
Streaming a Million Likes/Second: Real-Time Interactions on Live Video
Next Generation Client APIs in Envoy Mobile
Software Teams and Teamwork Trends Report Q1 2020
Understand the Trade-offs Using Compilers for Java Applications
Kafka Needs No Keeper
High Performing Teams Act Like Owners
Does Java Need Inline Types? What Project Valhalla Can Bring to Java
Service Meshes- The Ultimate Guide
Shifting Left with Cloud Native CI/CD
CI/CD for Machine Learning
Fault Tolerance at Speed
Architectures That Scale Deep - Regaining Control in Deep Systems
ML in the Browser: Interactive Experiences with Tensorflow.js
Build Your Own WebAssembly Compiler
User & Device Identity for Microservices @ Netflix Scale
Scaling Patterns for Netflix's Edge
Make Your Electron App Feel at Home Everywhere
The Talk You've Been Await-ing For
Future of Data Engineering
Automated Testing for Terraform, Docker, Packer, Kubernetes, and More
Ad

Recently uploaded (20)

PDF
MIND Revenue Release Quarter 2 2025 Press Release
PPTX
A Presentation on Artificial Intelligence
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Encapsulation theory and applications.pdf
PDF
cuic standard and advanced reporting.pdf
PPTX
Programs and apps: productivity, graphics, security and other tools
PPTX
Machine Learning_overview_presentation.pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Electronic commerce courselecture one. Pdf
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PPTX
sap open course for s4hana steps from ECC to s4
PDF
NewMind AI Weekly Chronicles - August'25-Week II
MIND Revenue Release Quarter 2 2025 Press Release
A Presentation on Artificial Intelligence
Mobile App Security Testing_ A Comprehensive Guide.pdf
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Encapsulation theory and applications.pdf
cuic standard and advanced reporting.pdf
Programs and apps: productivity, graphics, security and other tools
Machine Learning_overview_presentation.pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
The Rise and Fall of 3GPP – Time for a Sabbatical?
Electronic commerce courselecture one. Pdf
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Review of recent advances in non-invasive hemoglobin estimation
Dropbox Q2 2025 Financial Results & Investor Presentation
Assigned Numbers - 2025 - Bluetooth® Document
sap open course for s4hana steps from ECC to s4
NewMind AI Weekly Chronicles - August'25-Week II

Put a UI Developer in a Bank; See What Happens

  • 1. Put a UI Developer in a Bank See what happens
  • 2. InfoQ.com: News & Community Site • 750,000 unique visitors/month • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • News 15-20 / week • Articles 3-4 / week • Presentations (videos) 12-15 / week • Interviews 2-3 / week • Books 1 / month Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations /mobile-banking
  • 3. Presented at QCon London www.qconlondon.com Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide
  • 4. Form follows function. For financial firms, function is so fortified and secured that no pretty form could come close to it. “Form follows function” Louis Seville. Who’s from London? http://blog.archpaper.com/wordpress/wp-content/uploads/2010/11/Louis-Sullivan-4.jpg
  • 6. I’ve built a lot of simple apps that rely heavily on user interaction.
  • 7. And I’ve built lots of apps that hide complex data models in the background, presenting the user with something that’s meaningful and easy to comprehend. Using clever tricks, those kinds of apps empower users - make them feel like superheroes
  • 8. When I use a typical banking app, I don’t feel like a super-hero. In fact, I feel quite dumb. So I thought I could do something about the typical banking apps. I thought the problems were easy to tackle like browser support “I heard you like security”
  • 9. Why? But that cake was a lie. I have journeyed deep into the belly of the beast to learn about how the evil gets brewed, baked, packed and packaged as an app, put in the user’s lap as happy managers clap. On my first day, I got the access cards and got asked if I would be working from home. Like a first date where you already have to watch a football game with her dad.
  • 10. Because Developers Banks are a safe haven for backend developers. He who has rank gets his way.
  • 11. More Developers!! Trying to solve a design problem by throwing more developers at it is as effective as trying to solve an algebra problem by chewing bubble gum.
  • 12. A year ago I was saying this. Banks didn’t get this memo
  • 13. [0..1) In-house Designers banks rely on agencies to do episodic design work spec changes don’t get communicated to designers and instead are shoehorned into the current design.
  • 14. So then the Bank says... and that's the way it's always been. Until people REALLY started to complain
  • 15. We Fix it! Especially the mobile apps - which at first were just the desktop app served straight up to the mobile clients.
  • 17. ... mostly made by Java Developers Java and C# devs are really good at building Java and C# apps. If you have to work in Eclipse or Visual Studio you start believing those are good interfaces. Those interfaces are good for editors, but make for poor inter fæces for webapps.
  • 18. Java + JavaScript = <3 Raise your hand if you believe this to be true
  • 19. Banks are moving As you will see later in this track.
  • 22. A Bank is No Startup 2weeks vs. 6months release cycles don’t always sync up
  • 23. Use Before Re-use “The other team are building a thing like what we will need, let’s wait to use that.”
  • 24. Talk the talk, rewrite the spec! I sat down with the Project Owner and verbally agreed on some changes; implemented them only to see them reverted by another dev because QA said they did not match the spec.
  • 25. Prey the other team will deliver Dependencies are a hell without having to add OTHER TEAMS to the list. Plus, their delays also become your delays. Especially if they deliver something slightly different than what you were expecting.
  • 26. Not All Requirements are Born Equal Their list of supported browsers might not be the same as yours. They might be targeting mobile webkit while you’re stuck with supporting IE7... Polyfill is the transition!
  • 28. Firewalls! they will make researching for answers a living hell. Google is not blocked, but stackoverflow is because it is a “social network” ?!?!
  • 29. Then there's the issue of installing software
  • 30. You are not an admin! Heck, you can’t even install a different browser to test on.
  • 31. Browserstack? While I love Browserstack and tools of the sort, you cannot possibly begin to use them from behind a super restrictive firewall. Especially the local tunnelling
  • 32. You Get aVM You get a VM that has IE6 on it, maybe Firefox, maybe Safari, that is managed by a sysadmin that’s grumpier than a mountain lion in heats gone hungry. And you have to time share it with all the other teams.
  • 34. You go to the knife store and ask for a knife. http://www.equalreviewer.com/wp-content/uploads/2011/12/gerber_gator_machete.jpg
  • 36. http://www.colt22rimfire.com/uploads/images/m16rifle/left.jpg We also have you the gun so you can kill your own cows to make steaks yourself.
  • 37.  "whining scripting guy who needs a macs to ‘debug.’ Why can't he debug like real men?" Getting a Mac on your dev network. I still think that was my biggest ripple in that bank.
  • 38. Having a mac helps with debugging webapps on iDevices Made sense because we were focusing on iDevices... It felt like the good old days; you didn't have device labs back then. You'd have to go to the mall and prey the WiFi was working in the phones department that day. When we got our first bug on iDevices, I had to discover the problem at home on my Mac. And I couldn't charge the bank for the time because I said I would not be working from home macnetizados.blogspot.com
  • 39. Who DoYou Work For? Your manager or your user?
  • 40. 50 Shades of Grey Managers are happy with an app like this. When I joined the bank, other teams were making fun of the project I was on by calling it 50 Shades of Grey
  • 41. Managers want people who are good at building stuff like this
  • 42. And who are very good at defending their code, decisions and poor performance with cool PowerPoints
  • 43. v1 And that’s how the first versions were built
  • 44. theSuperFunctionNameThatTellsYouWhatItDoes() { by bank-experienced developers who write well functioning code
  • 45. theSuperFunctionNameThatTellsYouWhatItDoes() { return window.a={asd:{b:”c”, d:’4’+2}.s(fda)}().asd } that is unmaintainable, in order to secure their senior position in the bank. “When a junior can’t work with the code, it’s obviously because he’s a junior”
  • 47. But don't let them decide the layout of your app
  • 48. But they wanted to go mobile, and heard that HTML5 is cross platform. Like Java - and that was the winning argument.
  • 49. They also heard that Android users are poor.
  • 50. So they made HTMiOSL5 apps that replicate iOS UI styles poorly
  • 51. And ended up with apps that made sense to no-one, were confusing and felt odd and sluggish
  • 52. Senior guys in banks know how to tickle their bosses.
  • 57. do your thing This is how I changed the main copy style more or less without telling anyone
  • 58. Fight for your right to CSS Safest place you can make changes. Changes that improve the UI. Changes most other devs will not understand, though.
  • 60. Policy, Policy, Policy Do they do progressive enhancement or graceful degradation? Do they guard for failure first or as a last resort? That mentality needs to be in your code.
  • 61. Safely do your thing
  • 62. Start with the lowest IE
  • 63. Once that is covered, you can use whatever you want to conditionally load stuff smarter browsers can use. IE10 is included in smarter browsers. Oh, and let me tell you how the devs in the bank finally got Chrome and Firefox...
  • 64. Your desktop app is probably your main focus, but you’re going to have to provide the same functionality to your mobile users. Especially iPad users.
  • 65. Once iOS is done, you can start covering the corner cases that Android will come with. Your bank will probably not pay you for this as they might still not see value in Android.
  • 67. Feature Priority You’d imagine you get a crazy amount of metrics in banks... nope Find out what your users are doing and make it easy for them to do it. Like transactions, transactions overview. Do not simply remove the other features. Everything you can do on your desktop you should be able to do on your tablet. Don’t dumb it down.
  • 68. Hire In-house Designers And keep them involved in the product’s lifecycle. Let them adapt the design over time, as features and needs evolve
  • 69. Platform Awareness Don’t reinvent the wheel, or force skateboarders to use bikes. Harness what each platform - iOS, Android, Windows Phone, Linux - offers and make it easy for your users to understand what your controls do.
  • 70. Proper Dev Environments I hate visual studio, yet so many banks’ workflows are so closely tied to it that it’s almost impossible to use something else. This needs to change.
  • 71. ❤$ Once banks start covering those 4 areas, not only will their banking apps get better, it will be easier for them to find people willing to make their apps better. Maybe, in a not so distant future, we will actually be able to smile and be pleased with the universe while sending money to our loved ones from our super cool mobile banking apps.