CodePay is a B2B payments system that assists businesses to accept a wide range of online payment methods as well as overview business expenses, manage clients, products and coupons, create reports and invoices and follow up on inventory and deliveries.
.png)
The mission was to design the following screens:
.png)
A snapshot of clearings and clearing income for the business
Coupon management
Invoice design
.png)
My inspiration for illustrating a payments system came from the colors blue and green. Those colors represent reliability, loyalty, growth, and convey the message I was looking for in the application.
A simple navigation and a clear view on main subjects.
.png)
As part of UX, I have added an open transaction display while hovering on transaction line.
Here, I have decided to add a clear and simple onboarding process for the user about using the document design feature at the app.
The user can continue or skip steps and navigate directly to the document design screen.
.png)
.png)
A clean view at the different coupon states.
The secondary color was selected to emphasize the selected and active coupon.
The user can easily edit coupons by filling several fields and toggle between enable and disable field.
.png)
In addition to the given UX, I have added an open product card display option while the card is checked at the checked button.
Choosing what will be the Primary color was easy, I knew from the beginning that the blue color will be the appropriate color to convey the message of the application to its users. A color that reflects reliability, security and stability, as well as elegance, formality, and associated with Hi-tech and financial institutions.
As for the Secondary color, well, my thought was to combine the things that associated with the primary color to a color that convey a message of harmony and growth, therefore the green color was the right color for it.
After choosing the Primary and Secondary colors,
I went from being a designer to a pharmacist – the design process included at least 3 color changes, until the right colors were found, and I was happy with the result.
The power of research. There is no such thing as too much research. Ohhh, and coffee, right? :)
Adherence to gestalt principles, proximity between objects and user eye flow made the decision-making process much easier.
From a designer's perspective, I tried to create a clear and simple design for the user. Bringing a clean, classic design tone, as well as utilizing current design trends. Hope I have succeeded in delivering it!