Web App

Web apps are always a challenge, often 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. It also had a focus on gallery pictures rather than process and engagement features. I was about to change all that.

Step One

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, of preconceptions and old thinking is what we do.

Design analysis picture

Step Two

I started a series of rapid wireframe designs, as opposed to a prototype, as stakeholders requested printed documentation to present to their teams and to create a paper trail for audit reasons. These, complete with rationales, were then part of the specification documentation I produced, it also allowed for easy dissemination of my designs whichoften had legacy operating systems and plugins to view designs on.

Sketchy wireframes

Step Three

I produced a functional flow eliminating a lot of new feature requests, none of which were needed or wanted by the user. Again, one of the core tenants of Mobile Design is to strip away the unneeded, leaving a sharp focus on essentials, adding desktop features simply 'because we can' is not a good idea.

Flow document

Step Four

I went through a lot of fast iterative designs for usability testing, streamlining the functionality, until a final version was agreed by all stakeholders.

Iterative Designs

Final Step

I worked extensively with the developers and the UI designers to make sure that the experience we had arrived at was maintained. The final app tripled the existing usage inside of a month, I'd be lying if I didn't feel a little smug about that.

Final designs

What would I change in retrospect?

A lot of the UX decision made were based on technology constraints, which were less than ideal. The timelines were arbitrary as well, leaving little room for testing with users. This is one of those projects where you are largely constrained to using established UX patterns because there isn't the will or the budget to adapt the correct tech for the job. It still worked and user feedback was phenomenal but I still suspect it could have been better.