A multi-currency, multi-payment type purchasing and payment platform targeted at non-native English speakers/readers purchasing high value University services such as fees and accommodation.
WPM Education wanted to improve the UI and UX of their payment processing platform and create a UI framework that was more flexible to their customer’s needs.
On the surface, there weren’t any great issues; there was no stream of negative feedback or abandoned carts, payments were made and money was taken. Clients were happy. Sure it looked a bit out-dated and the UI was a bit clunky and unpredictable at times, but it did the job OK. Tens of millions of pounds are processed through it each year.
Designing for context
The payment platform is used largely by universities to take payment for tuition fees and accommodation.
These are large payments that can be paid for via many different methods including the usual credit and debit cards as well as PayPal, Direct Debit and continuous payment authority. There can be multiple payment plans enabled simultaneously. If enabled, users can choose which currency to pay in too. As each product can have a different payment method, things can get complicated quickly.
Gestalt & design
With all the demands placed on the UI – signpost all the options, show the current state and make clear the expected next action – it takes time to get the balance right, especially when designing for variable amounts of items. Being judicious about form labels, placeholders and help text, showing ‘just enough information’ to get it feeling right. ‘Gestalt’ is a term I come back to again and again in design. It conveys more than design as a balancing act, it intimates design as a visual/mental, dare I say spiritual balance.
Accessibility and low literacy
Many users are from the Far East and English is not their primary language so we paid attention to keeping the language simple and instructive. In addition and perhaps surprisingly, folks in the Far East are much less used to paying by cards online than we are in the UK. So although the university brand affords assurance, we can emphasise this visually to put our users further at ease. Knowing that this could be an issue means our design can address these issues. We were explicit showing the 128-bit encryption and provided a link so the customer could verify its authenticity.
The client wanted a responsive website that would work well on a range of devices and this took much consideration. It’s not a simple matter of breakpoints, it is much more involved than that. The flow of information often needs to change, labels and forms need to be treated differently given the range of input controls and the way various operating systems deal with input. Ensuring the platform is light and downloads quickly over the air is also a major consideration and this effects the approach to responsive design. It’s very simple to toggle visibility of sections for specific devices but the intention is not to duplicate functionality where possible – reflow the data using CSS as much as possible to keep the page light and agile.
The platform makes use of Fontawesome for a small set of icons which gives us scalability, perfect for responsive design. By creating our own font containing just the required FontAwesome icons and a few custom ones using IcoMoon and then compressing this means we shave of an additional few bytes of data.
This clickable prototype demonstrates the purchasing and fulfilment processes in a desktop web browser.
You may also be interested in these other prototypes.