NatWest Rapid Cash website

Rapid Cash is a NatWest platform that allows business customers to borrow against their unpaid invoices.

User research showed that there was a lack of clarity and understanding about the product, so the main strategic goal was to simplify the visual and written communication of the product's value in order to convert more businesses looking for credit.

To make the technical information easier to absorb and less daunting for the user, I firstly looked at how the colour palette could be used to create a more friendly look than the existing dense dark purple backgrounds. I then changed the sharp edges to rounded, added more white space and simplified the icons and illustrations.

Mobiles_intro.jpg
Mobiles_pricing.jpg

To communicate what the product is in a clear and simple way, I worked with a copywriter to come up with a homepage hero section where the headline clearly and concisely explains the product and the corresponding animation is simple and explanatory yet lighthearted. This easy-to-understand introduction was accompanied by helpful micro-interactions incorporated throughout the site.

Desktop homepage header.jpg
Desktop homepage x2.jpg
Desktop pricing x2.jpg

As much of the information was financial and therefore in the form of calculators and tables, it was important to keep the design clean and spacious to ensure the data was easy to digest.

Mobile-insitu.jpg

UX and UI process

Familiarise myself with the current website and define the strategic goals for the redesigned site

Old site.jpg
Strategy.jpg

Study UX research data and strategy documents to identify all relevant and important user insights

Analyse the websites of competitors and industry peers

Competitors.jpg
amended-wireframes.jpg

Recommend changes to client-supplied desktop wireframes based on project objectives and UX research

Gain a solid understanding of the NatWest brand and illustration styles

brand guidelines.jpg
simplification.jpg

Working with a copywriter, simplify complex and cumbersome information into easily digestible user-friendly designs

Come up with ideas to solve the UX problems then create mobile wireframes and revise based on feedback

Wireframes.jpg
Prototype.jpg

Design working prototypes, learn from feedback and iterate. Once designs are approved for build, create a component library and style guides for colours, typography, icons, imagery, button & link states, sizing and spacing.

After launch, carry out regular A/B testing on page designs, page elements and imagery to discover what works best and ensure success. 

 

Macbook insitu-5 steps.jpg