Context
User stories, rough user flows and wireframes were already developed and handed to me when I joined. They had done their research and wanted me to improve their UX and create polished designs. I worked closely with the product manager to bring their vision to life.
The client was clear on wanting a very simple visual style using a white background, few colours and standard information structure. I was handed brand material such as colours, fonts, icons and their logo to incorporate into my designs.
Problem
Digital payments can be confusing. How do we ensure accessibility and streamline the process?
The core flow of the app was incomplete. The client wanted to reduce the steps needed for payments, but was uncertain about details like what elements to display in order to streamline the user-experience and improve accessibility.
Solution
Incentivised action through strategic design
When users launch the app, they immediately land on the payment page which contains a title telling users to “Enter an amount to charge”. The users focus is now pulled to a numpad which takes up most of the screen. Other than telling users what action to take, this also removes the need to tap before typing an amount.
When an amount is entered, the user adds a note by tapping on the input field directly below. Once ready, they may choose between two buttons (Create QR and Send Link), which are styled the same to equalise priority.
We keep this process in a single page to reduce the steps and make payments a quicker process.
Signup Process
3 part onboarding process for merchants. Create an account as a Sole Trader or Limited Company
The client wanted a progress bar so users can track the status. Users can also select between two types of accounts (Sole Trader and Limited Company) which require different information during signup.
They were also adamant about using their red brand colour for buttons during the onboarding, despite the negative connotation. This accent colour changes to cyan in the core app screens.