Some months ago, we held a major review of our mobile app product as a whole, to identify any inconsistencies in design; colour use, language, buttons and element behaviour to name a few.

With each new iteration it felt we were going around in circles, producing a large batch of screens, holding meetings and discussions for sign-off that only resulted in more change requests. We knew something needed to change and that the creation of a more formal design standard was crucial to the progress of this project.

So, we decided to take a step back and completely rethink how we could improve the user experience within our app, starting with the My Cards feature:

Prioritising before positioning

Reducing real estate use on the dashboard screen

The first step was thinking of the app as a separate entity to deliver our product from our website, whilst still keeping in line with the brand’s look and feel. For example, real estate on a mobile screen is very limited compared to a desktop, so we questioned everything: Why is this here? Does this make sense? Is this essentially needed on the screen? Laying out requirements for what was essential and needed to be shown cleared up an otherwise very cluttered screen.

Increasing consistency

Keeping consistency across the product

Consistency and repetition are essential for a customer to feel comfortable and avoid any confusion whilst using the product. So we defined element states and hierarchy by strengthening the basic design elements found across the app; for example, what colours, icons, or language should be used. It went as far as identifying what makes a button look like a button. Clarity in everything was key.

Creating logical journeys

Many of our journeys had become disjointed and had little to no feedback when an action was carried out by the user, ending up with an inconsistent journey. With the My Cards feature, the user had the ability to block their card and order a new one. However, once this had been done, there was no immediate indication or acknowledgement of the action that had just taken place. So we set about making sure that every action ensued a consistent reaction.

Creating a reaction for every action

One element that we felt was very strong was our swipe to confirm action. We recognise that pattern consistency is important to avoid confusion, so we wanted to define higher level actions that require a deliberate motion from the user. Something that would take more effort than just “tapping” a button, because confirming these could potentially cancel the user’s card. This would also reduce the user journey from three steps to two, which simplifies interaction and allows for a more straightforward process.

To keep in mind

It has been a drawn-out process to come to a final outcome that we felt would deliver the best experience for our users. And during this time we’ve learned a lot about correct UX practices for failproof designs and consistent user journeys. As we grow and update our product, it’s a process we want to put into practice, not only onto our app but across our platforms. Here’s some of what we’ve picked up so far:

  • Scope out requirements specifically targeted at the desired platform
  • Use product journeys and user flows to visualise and prioritise functional aspects of the project
  • Build, sketch, discuss - whatever works for you: wireframes are your design’s foundation
  • Make sure to question the purpose of everything as real estate is limited
  • Keeping consistency and repetition throughout the platform matters
  • Do Beta testing to gather user feedback on what works and what doesn’t

The new My Cards, as seen above, will be heading into a customer Beta phase shortly. We think it’s worth the wait.