New feature development
Discovery
Design processes
Design system
UX design
UI design
Animation
Graphic design
Design review
Wireframing
Testing
Presentations
User flow
Mobile app
Low-end prototyping
Hi-end prototyping
There is still no co-payment service in Canada
How did it happen
Right after dinner
The guys received a joint bill and Rob paid it through the mobile application
*They agreed to share tipping equally among all
User flow
First, let's build a user flow map to show all the possible steps along the path to completing the current task for a better understanding of all possible nuances in development.
Wireframes
1.
At the first stage, Rob chose the option of joint payment.
2.
Next, Robert selected all the friends from his contact list. He could also add a new contact if these were his new acquaintances who are not yet in the address book or find an exist one via phone number.
When Rob finish entering all the digits, if this number is not in the contact list, he will be prompted to add a new contact.
In addition to the checkbox, we will highlight the selected contacts in a different color for better identification.
3.
In the next step, we give the opportunity to check the list of selected contacts for co-payment. We automatically call the payment with the name assigned by the payment system, but you can change it manually.
You can also upload a photo of the receipt or the product itself and add some text for a better understanding of what to pay for.
4.
By default, joint payments are divided equally among all, but you can manually enter the required amount for each participant.
Missed payment?
Arlene and Jane paid their share right after dinner
It was very fast and simple.
Ammie was waiting for a paycheck
So she paid the next day as soon as she can
But Guy did not stop at two mugs of beer that day
He continued the fun, while he was having fun, he forgot about this payment, perhaps he simply missed or skipped the notification
I'm too shy for this
Robert is a very kind and shy young man by nature and would be uncomfortable reminding Guy to pay $25 for dinner. Therefore, our application itself will remind Guy of his payment, and will do it in the most friendly way so as not to spoil the internal relations of the guys.
Wireframes
1.
On the last data verification screen, we give the opportunity to once again check the name and amount of the total payment, the list of participants, we show the date by which the application asks to pay this bill
2.
In the list of past transactions in the monthly report section, you can check the progress of the co-payment process
3.
The automatic reminder after 5 days checkbox is enabled by default, you can disable it manually and then if you need to manually send notifications to those who have not yet paid with one click.
No shame and ruined relationships!
4.
Guy is actually a nice guy, and he didn't mean to cheat you with this payment at all, he just forgot. And so, having received our friendly notice, he immediately paid his part. Everyone is happy =)
After the full payment of all participants, the payment default icon or photo changes to a cheerful smiley, relieving stress from the account owner
What will Robert’s friends see on their screen?
1.a
On the last data verification screen, we give the opportunity to once again check the name and amount of the total payment, the list of participants, we show the date by which the application asks to pay this bill
2.a
In the list of past transactions in the monthly report section, you can check the progress of the co-payment process
3.a
On the last data verification screen, we give the opportunity to once again check the name and amount of the total payment, the list of participants, we show the date by which the application asks to pay this bill
4.a
In the list of past transactions in the monthly report section, you can check the progress of the co-payment process
1.e
The automatic reminder after 5 days checkbox is enabled by default, you can disable it manually and then if you need to manually send notifications to those who have not yet paid with one click.
No shame and ruined relationships!
Negative scenario. The Guy refused his payment and Jane just did not pay
1.a
Robert will receive an email message about the canceled payment.
1.a
Robert will receive such notifications when the payment is refused. He will immediately see the name of the payment for which the refusal came, the amount and who refused.
In order to smooth out the negative message a bit, we added a sad emoticon in the messenger so that the user thinks that we are going through with him
2.a
At this point, Robert can select all those who refused to pay the bill and send them another reminder, while changing or adding the accompanying text and photo.
Robert can also pay the rest of the total payment himself
1.c
If Robert decides to check the payment later, he can view the details through the monthly payment history.
Incomplete payments will be fixed at the top of the list after a month.
The names of payments will be executed as a scrolling line with a rollback.
2.c
On the last data verification screen, we give the opportunity to once again check the name and amount of the total payment, the list of participants, we show the date by which the application asks to pay this bill
3.c
By choosing to pay himself, Robert can choose which of the remaining payments to pay himself
Low-end prototyping
Final layouts and Hi-end prototyping
After working through all the possible interaction scenarios, it's time to make the final versions of the interface.
This involves creating the final designs for each screen in the app, taking into account the feedback received during the development process. Once all the designs have been completed, it's time to create a final prototype that visualize the app in action.
Creating a prototype is important because it allows you to see how the app will look and feel before it's actually built. This helps you identify and potential issues or areas for improvement, and make any necessary changes before the app is released. The prototype should be as close to the final product as possible, so that stakeholders can get a clear idea of what the app will look and feel like.
Resume
To date, none of the banks in Canada offers co-payment services. We will be pioneers and leaders
User goal:
Make joint payments with other bank users in Canada without the need for cash or checks. Save savings, better manage current loans
User goal:
By launching this service and making it as user-friendly as possible, I expect to climb 2-3 points in the ranking of the best mobile banking applications in Canada. Now Scotiabank is in the 6th place in the list:
BMO Mobile Banking App
Tangerine Mobile Banking
PC Financial Mobile
RBC Mobile
CIBC Mobile Banking App
Scotiabank Mobile Banking
I expect to increase the total number of Scotiabank customers by 10-15% and increase current loyalty by 20-25%. Our values: respect, honesty, responsibility and passion. Therefore, I designed all the stages on the way to making joint payments as transparent and easy to understand
Let's grow together!
Alexey Yarkin © 2025