Yapily. Hosted Pages
About team and my role in project
The Design team consisted of Design 3 members. We all were collaborating together with PO, VP, PM and development team.
My responsibilities:
Taking part in Research & Analysis.
Taking part in Ideation.
Prototyping & testing.
Creating UI.
Handoff to developers.
Design review.
Team members:
Alejandro Velazquez (designer)
Valeriia Bulharu (designer)
Alona Petrukhina (designer)
Mathias Dewert (PM)
Hosted Pages
About
For B2B. Yapily Hosted Pages is a fully out-of-the-box, hosted solution that provides a pre-built user interface on top of our existing single payments API.
It enables you to quickly and easily utilise Yapily’s API to accept open banking payments from users as well as test and experience Yapily’s open banking services.
The UI is available on web and mobile browsers, optimised for a seamless user experience and compatible with all supported institutions. It is fully hosted and maintained by Yapily.
For B2C. Hosted Pages guides your users through the payment authorisation process, collects the necessary information to make a payment and executes the payment once consent is granted by the user.
Why Hosted Pages?
Stay relevant and competitive. Most of competitors offer low code solutions and Yapily have lost RFP because do not offer hosted page solution.
Market opportunity. Every business needs an easy and efficient way to collect payments.
Making integration cost lower.
Improving speed of integration cost.
What are benefits for clients?
Improve conversion. Reduce cart abandonment and failed payments with a follow-up ‘pay by link’ where customers get the flexibility to pay at their own time.
Out of the box solution. Focus on your core business with a low code ‘pay by link’ and ‘pre-built UI’ capabilities to collect payments
Safer and convenient. Reduce fraud and provide your customers with a safe and convenient way to pay online using Open Banking
Tailored experience. Customised landing page with your logo and personalise it to make it relevant to your customers
Define the problem
Before creating any wireframes, it's good to know what competitors have and run interviews with businesses to understand their pain points. It was done successfully by PO and VP.
After running the competitor research was complied a comparative table of pros and cons. After the Define and Ideation phases, there was a final decision on what to display in the MVP version to get the maximum result with minimal effort.
Problems
Limited resources and time;
Hard to run tests or interviews with business;
Finding a balance between desirable and what possbile to do;
What does success look like
Reduced time spent by prospects to assess our open banking payment solutions
Reduced time spent by our clients to go live with our payment solutions
Increased payment completion rate through high quality UX and bank integration
All above culminate in happier prospects and clients, and therefore more deals being made.
Metrics:
% payments originated from each integration options and payment conversion rates;
% abandoned journeys (clicked or landed on hosted page and not paid).
Design Process
Wireframes
The decisions that allow solving the problem of time consumption:
to re-use logic and partially adapt existing FE from the demo version. It will help to speed up and reduce the cost of the process on the developer's side and allows the designer to work on a tool for Hosted pages in Console.
to avoid creating new components and use the components from the current design system.
It was also necessary to think about the next things:
UI Customization tool for Hosted Pages in console and admin panel.
Hosted pages layout for mobile and desktop resolutions;
This is the start point of the process.
Pay by link
There were all the requirements to create a Pay by Bank screen.
To provide a positive user experience, it was important to design a clean and user-friendly interface that is easy to navigate.
We also conducted user tests with people who were not involved in the HP development, using the Hallway method. This allowed us to test with friends and colleagues, as the end user could be anyone. In total, I interviewed 14 people to confirm that users correctly interpreted the interface and would engage with it by clicking on the CTA button. The results of the testing were positive, indicating that our efforts were successful.
User testing process:
First of all, I created the clickable version in Figma.
Half of the interviewees were shown the desktop version, and the other half was shown the mobile version on their mobile phone.
The situation description:
"You received an SMS/email with a link to pay the bill from a source you know. Look at the screen and describe what you see and what your actions are." The order in which interviewees described the interface elements made it clear what exactly they notice first, what is secondary, and what remains unnoticed.
Initial design. What was not obvious for customer?
Due date was not enough visible for most customers;
Too much attention on support fields;
Not enough accessible button on mobile;
Final Design after user testing:
was added icon for date. It helps to notice the due date much easier;
support section was combined into one block and instead of two icons only one, which save more space;
general layout was changed from center to left side because of future enhancements;
List of the Banks
The page with the list of banks has undergone some changes, which were caused by requirements from management like the number of displayed banks or navigation. It was important to keep in mind the UI customization of each component on the page.
The rest of the screens remained unchanged.
Final design
Here is the completed flow.
I've organized the screens into sections to make it easier to link to a ticket and included arrows to show the order of the steps. Plus, there were clickable prototypes available for both mobile and desktop versions.
Here is the link on Miro, which allows to see details