ATMs, design and XAML

I’ve been a Wells Fargo customer for a long time.  As a financial institution it has served me well.  I’ve never really put much thought into the services I use and the interactions I have with their systems.  Actually I take that back – I make heavy use of the online banking system and have noticed some likes/dislikes, but overall pleased.

Over the past year, the automated teller machines (ATM) have undergone some design changes that, while subtle, have been impressive and welcome additions to the ATM experience for me.  It really made me actually notice a change in the ATM experience whereas before I hadn’t stopped to notice in appreciation, but rather notice that ‘the buttons changed.’  This time really is different.

One of the members of the design team, Holger Struppek, wrote about the project (link at end of post) and the design process they went through working with one of the largest financial institutions in this redesign.  To me as the end user I can see that a lot of thought went into what is really a simplistic design.  But that’s the genius of it to me…it is so simplistically elegant that it caused me pause when I first noticed it.  Even the simple login screen is so much more appealing and welcoming:

Holger talks through some key aspects of the design process and shows some before/after pictures like this one:

to demonstrate the efforts and appeal of the new visual design.  Perhaps one of the surprising behind-the-scenes aspect of this next generation is that the ATMs are using XAML as the user interface…more specifically Windows Presentation Foundation (WPF).  While Holger’s article talks about the design process, there is no mention of technology there.  One interesting note, however, is when looking at the presentation of alternate color pallettes:

Holger makes a comment that the decision was to use the blue tone one even though the blue wasn’t a part of the official color pallette for Wells.  He then adds:

Surprisingly, Wells Fargo recently switched the UI to the current tan color scheme. I don’t know what prompted that decision, but it does bring it back in line with their brand.

What I find really great about this comment is that this was probably a trivial effort for the Wells technology/design team.  The use of XAML and the separation of UI from code probably had to make that process of changing the color scheme elementary.  WPF, like Silverlight, has the ability to use content templates and style resources that are separated from the application design.  This makes for a great designer-developer separation that seems to be the buzzword these days.  The case study (link below) mentions that the ATM team also felt that the use of Expression Blend (when they implemented it was called Interactive Designer still in beta) creating a faster process in collaboration that increased their overall productivity.

In the end, the discussion of the design process from Holger is an interesting one and a good read.  As a consumer of Wells services, I like when these subtle investments are made and hope that Holger’s team might have some influence in the online banking aspect redesigns…Silverlight perhaps ;-)

Related links:

• That design is money! – Holger Struppek
• Next Generation ATM Experience with WPF/XAML – Case study

I can’t wait to see more implementations of things like this in the ‘real world’ outside of firewalled communities.