Designing a pre-paid card app

AT A GLANCE

Pre-paid cards are a growing financial product with many different types of customers and reasons for using them. Parents that want to be able to load a child’s card with some pocket money. Travellers that want to load a card with foreign currency at a competitive exchange rate. Security conscious online shoppers who don’t want to risk using their credit or debit card online. CashFlows wanted to exploit this potential market by introducing a new pre-paid card product. I was the lead product designer for the web and mobile apps for this new product.

Working with the in-house development team I created the user journeys and UI designs for the apps, together with a styleguide to establish a new design language.

Defining critical user journeys

Starting with key user journeys, such as registration, putting money on a pre-paid card, using a card and taking money off a card, I defined what a user would see and do. Working with the product owner and development team I ensured that journeys were as simple as possible, whilst still adhering to the necessary business and financial compliance requirements.

Registration user journey — I defined critical user journeys for the app, such as registration

Designing the app look and feel

Taking a mobile first approach, and utilising the visual branding already in place, I designed the look and feel for the apps and created necessary design assets, such as icons and images. The intention was to design a UI that could be utilised for the web app, along with native iOS and Android apps. I used Sketch to rapidly mock-up screens, and Axure to create clickable prototypes and to document interactions.

Mobile app screenshots — I created UI designs and prototypes for the app using Sketch and Axure

Creating a responsive design

As the web app could potentially be used on mobile, tablet or desktop I worked with the development team to define and refine the responsive behaviour, and to establish optimum UI designs across different breakpoints.

Desktop screenshot — I defined how the UI design should respond to different screen sizes

Establishing a design language

Establishing and adhering to a design language is very important for a digital product. It provides users with a consistent experience and supports delivery by providing development teams with UI components and design patterns that can be utilised to quickly build and change screens.

By taking an atomic design approach, I identified the different UI components and visual styling (e.g. colours, branding) required for the apps, and created a styleguide to communicate and document these. I also created a UI component library using Sketch to quickly facilitate design changes, and to be able to quickly mock-up and prototype new screens.

Styleguide example — I created a stylguide for the UI components and design patterns used by the apps

The results

By taking a mobile first and atomic design approach, I created UI designs that can be utilised for web and native apps, and ensured that the development team have the support and resources required to deliver the product.