SCHEDULE PAYMENTS UX/UI

Youtap limited

Role

UX / UI designer

UX researcher

Skills

Early concept

Wireframing

Prototyping

User Testing

Team

Project manager

Developer

Tools

Figma

Timeline

2 Months

Role

UX / UI designer

UX researcher

Skills

Early concept

Wireframing

Prototyping

User Testing

Team

Project manager

Developer

Timeline

2 Months

My role

Strategies and execution of the design system, working with designer and developer to align and update our workflows, and the wrote the design documentation

The project is to lead a new schedule payment design to allow users to create and manage repeat payments for the consumer mobile application

PROBLEM STATEMENT

The white-label product lacks a scheduled payment feature, hindering users' ability to manage payments efficiently. This results in missed payments and late fees, impacting customer retention.

OBJECTIVES

Design a scheduled payment feature that seamlessly integrates into the white-label product, empowering users to schedule recurring payments, manage payment schedules, and gain control over their payment arrangements.

Design a schedule payment feature that seamlessly integrates into the white label product, empowering users to schedule recurring payments, manage payment schedules, and gain control over their payment arrangements.

USER NEEDS

User-friendly interface to schedule recurring payments.
Loan and bill payment management system
Enable seamless viewing, editing, and cancellation of scheduled payments.

User-friendly interface to schedule recurring payments.

Loan and bill payment management system

Enable seamless viewing, editing, and cancellation of scheduled payments.

User-friendly interface to schedule recurring payments.
Loan and bill payment management system
Enable seamless viewing, editing, and cancellation of scheduled payments.

User-friendly interface to schedule recurring payments.
Loan and bill payment management system
Enable seamless viewing, editing, and cancellation of scheduled payments.

1715 transaction configuration

New possible transactional options including
Loan repayment
Term deposit
Automatic withdrawal & deposit and more.

New possible transactional option including
Loan repayment
Loan consolidation
Term deposit
Automatic withdrawal & deposit and many more.

Templated schedules for customisation

Dedicated schedule pages for complete review and edit of Past - Present - Future

Dedicated schedule pages for complete review and edit of
Past - Present - Future

81/100 usability rating

Successfully created accessible and user friendly design solution

Understanding the market and the users' behaviour is was the key starting point to inform myself about what should be the requirements for schedule payment design

Understanding the market and the users' behaviour was the key starting point to inform myself about what should be the requirements for schedule payment design.

Understanding the market and the users' behaviour is was the key starting point to inform myself about what should be the requirements for schedule payment design

Research findings

70% people use schedule payment

From the user research conducted on 30 people around the globe, large number has shown to use schedule payment

Two extreme data of number of schedules people manage

One extreme of 0-2 schedules active, another extreme shown to have 7+ schedules

Some applications have requirements

Competitive analysis on global digital application was conducted. Number of application showed required field of information, restricting certain types of schedules

No app that can do all and more

None of the competitior has shown full flexibility of schedule payment to the users. Opens up for niche market that can be tackled

Affinity mapping

User flow

Testing outcome

The result of usability test came back positively with score 81.

UX and UI design had positive response of easy usability and readability, achieving the outcome intended with new schedule management system
Prototyping requires more optimisation
Further testing with more optimised testing is to be conducted.

The result of usability test came back positively with score 81.

UX and UI design had positive response of easy usability and readability, achieving the outcome intended with new schedule management system
Prototyping requires more optimisation
Further testing with more optimised testing is to be conducted.

The result of usability test came back positively with score 81.

UX and UI design had positive response of easy usability and readability, achieving the outcome intended with new schedule management system
Prototyping requires more optimisation
Further testing with more optimised testing is to be conducted.

The result of usability test came back positively with score 81.

UX and UI design had positive response of easy usability and readability, achieving the outcome intended with new schedule management system
Prototyping requires more optimisation
Further testing with more optimised testing is to be conducted.

DESIGN CREATION

Schedule payment UI empowering the user in complete review and management

Design system & prototype

Use of instance to create components that can cater for all scenarios

Clean layering system and correct naming for organised file system

The components were built upon the existing styles and components to ensure a cohesive design language. They were created with instances to minimise the number of variants while enabling flexible customisation through instance controls.

I optimised the auto-layout structure with clear and consistent naming conventions, making it easier for developers and designers to understand and reference the component structure when needed. This approach streamlined collaboration and improved the overall efficiency of the design system.

Breakdown of prototype by different flows for easier reference

Schedule UI breakdown

Group payment indicator

Group icon indications present the pre-set group in the contact list with transactable details.

It indicates the number of people. In detail page, the contact expands to reveal contact nested in the group

Foreign exchange rate indicator

Currency indicator, is a measure of the relative value of one currency to another. Depending on which foreign currency account transaction is made from the rate will automatically calculate the rate which will be multiplied to the sender’s currency.

Schedule status indicator

To allow better accessibility of indication of schedule types.

Icon indication for easy understanding of status, catering for the colour-blind users.

Colour to indicate different states

Transparency to indicate transaction status

To allow better accessibility of indication of schedule types

Icon indication for easy understanding of status and and colour blind users

Colour to indicate different states

Transparency to indicate transaction status

CTAs

Depending on the schedule status features relevant to them have been explored. Users' are given complete flexibility in the edit

CREATE SCHEDULE

One UI to plan 3 different future payment set-ups

Schedules
Review & edit

Dedicated schedule pages

Toggle and swipe to navigate between Active schedules and Inactive archives.

All actives in a single glance

Schedule date and periods
Transaction amount per payment
Easy ‘From’ & ‘To indication
Accessibility proof visual indication

Easy access to archived schedule templates

User can resend/re-request schedule
Use past schedule as template for new

Request schedules

“Can you send request scheduled payment with pre-filled info?”

YES

“Can you send request scheduled payment with pre-filled info?”

"YES"

ACCEPTED

Users can request schedule payment by selecting the payee contact detail from the favourites. Creates pending tile under the active collection. The recipient accepts it and creates an active schedule tile on their account.

DECLINED

Users can request schedule payment by selecting the payee contact detail from their favourite.

Recipient rejects, the sender receives notification and the pending tile becomes declined in inactive collections.

Reflection

Overshare your process
Oversharing design process through daily stand-ups and dedicated meetings uncovered valuable insights I would have missed. Team exposure to features early on reveals oversights and informs other disciplines of the product's direction and idea significance.

Respect but never limit design to industry standard
Working in start-up environment, having ambition to find new solution to solve the problem is fundamental nature. This provided me opportunity to explore design outside the stand solution of competitor for a unique appeal to the users. Having unique solution can differentiate the business value to the competitors by providing improved or alternative experience, which can further personalise experience.

Reflection

Overshare your process
Oversharing the design process through daily stand-ups and dedicated meetings uncovered valuable insights I would have missed. Team exposure to features early on reveals oversights and informs other disciplines of the product's direction and idea significance.

Respect but never limit the design to industry standards.
Working in a start-up environment, having the ambition to find new solutions to solve the problem is fundamental. This provided me with the opportunity to explore design outside the stand solution of competitors for a unique appeal to the users. Having a unique solution can differentiate the business value from the competitors by providing improved or alternative experiences, which can further personalise the experience.