Back
Momentum

UI/UX design of a multi-platform app

August 5th, 2012

This is an appendix post, related to the TSB Bank [my]bank project, to give a little background (and some tasty treats!) to the process of UI design. Not sure if I should provide a narrative all the way, but here we go..

We began – as you do – with the brief. Did a whole lot of research, of course, but had to begin along certain fixed guidelines. First off, we all hated the usual graphic representation of an account, which is tables and rows of numbers. We wanted to graphically anchor the user to one or the other account (expecting very high numbers of accounts as well). The other core principe was customisation, the ability for the user to create a very individualised experience in keeping with the mybank brand . From my perspective this meant systemmatically thinking in terms of custom themes, and colours – ┬áright from the get-go. And that means thinking in terms of a PSD structure that makes this feature accessible to app developers. So from that, our first concept was born. The wallet!

Now another thing to mention at this point are the platforms we planned for. An iOS app, with a web (Flex) alternate interface were core. But early on the possibility of an Android version was floated. For those of you who have done UI design for Android know well, it can be challenging. As capable as Android is (and I really DO like it as a mobile OS), the lack of restriction on screen resolutions creates an environment in which you pretty much have to prepare for every combination of widths and heights in the world. So having pushed that off into the future, we could start work with the fixed screens of iOS, to structure a look and get the app into the world.

Enter widgets! Arguably the ultimate, when it comes to customisation. First we tried to reconcile the two concepts by having widgets mixed in with accounts inside the wallet.

It was a start, but proved to be quite a hindrance moving forward. First there was an issue of keeping layouts consistent over platforms (ie you arranged your widgets one way on your ipad, we needed to show those changes on your iphone). And second, it was agreed that it was stretching the mataphor a bit too far. So suffice it to say that 43 litres of caffeine later, we arrived at a core interface much like the final product. Widget “wall” and accounts-related split down the middle.

Now from this point on, it was getting all our features / functions embedded in a way that would feel natural, and work with the least effort. So let me just share a few of our functionality-boards here, to give you an idea of what’s involved in a single screen / feature of such an app!

For example : to get image re-sizing for each platform mathematically lossless ( and not have a pixel go astray here or there) you needed to pick your sizes very carefully.

Or think about showing a time interval (from / to dates) in a more intuitive way than two input fields.

Or.. My favourite, and also the most complex part of the app : Think about creating a payment system that accomodates easily paying new people, bump-enabled devices, saved people, companies (saved and new), and taxes (saved and new).. Here’s the dissected version!

And just a few other boards to soothe that UI designer appetite..

Peace!

*

To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.

Click to hear an audio file of the anti-spam word

* All marked fields are required