Web app for Barclays Bank

Web apps are always a challenge, more so than native apps, as they must not only have responsive layouts for different devices but allow both touch and mouse interaction to have equal priority.
In the case of Barclays Personal Debit Card Designer there was an existing app, but it had been written in Flash and had been designed for desktop use only as well as having more focus on gallery features than process features. I was about to change all that.

Desktop To Mobile

The first step was to analyse the function, features and interaction of the desktop version of the app and simplify them for mobile usage. The differences between mobile usage and desktop are often a surprise to stakeholders and the rationales for my findings often were longer than the evaluation itself. A significant part of being a UX is education and breaking apart, gently, preconceptions and old thinking.

Variation Designs

I started a series of rapid wireframe designs, as opposed to a prototype, as stakeholders requested printed documentation. These complete with rationales were then part of the Specification documentation I produced, it also allowed for easy dissemination of my designs as stakeholder were behind a lot of security, as you would expect in a massive banking environment, and often had legacy systems to view designs on.

Defining Functionality

An agreed functional flow was produced, which eliminated the a lot of new feature requests, none of which were needed. Again one of the core tenants of Mobile Design is to strip away the unneeded, leaving a sharp focus on what users want and need, adding desktop features simply 'because we can' is not a good idea.

Iterative Designs

A series of iterative designs were produced and tested, streamlining the functionality. Until a final version was agreed by all Stakeholders.

High Fidelity Wireframes

The final design was fully documented and handed over to development in November 2012, going live with a major advertising campaign in 2013. in October 2011.