Mobile payments for the enterprise
UX/UI Design and redesign
About the project
I was working for a small but enthusiastic startup called Blackthorn for a bit more than 2 years. Tons of different enterprise applications have been designed during this time. One of these was a very interesting project for me because I love to use my mobile on my daily basis.
Blackthorn wanted to have a unique solution to pay with mobile using a card reader in Salesforce environment. My responsibility were creating a research and UX/UI design.
There are many solutions to pay with your mobile and using a card reader like Square, PayPal, Shopify…etc. But they use their own solutions and own softwares and hardwares as well. The company didn’t want to create a special card reader for this app so they’ve found a cheap but working tool for this.
Quick research
I took a research and I analyzed Square and Shopify apps. I wanted to know what kind of functions they have and actually how those apps are working. Basically it’s a simple flow so I didn’t have to take long time to find it out.
Get it done
Because the company uses Angular Material framework to build their applications, I had to use Google’s Material Design Library to get the UI design done based on the components what MD contains. The company wanted to get this app done as soon as possible so I focused on this expectation.
The core functions
- Log in with your salesforce account
- Direct payments within the app
- Enter the description, amount, currency, and process
After taking the payment, pass the device to your customer to enter their email to send a receipt. The Transaction will be in your Stripe dashboard and in Salesforce.
Redesign
After the basic version has published, I wanted to make it more lovable and a bit playful. This time I left Material Design behind in order to have a bit more lovable UI Design for this app. It’s always hard to make an app more interesting which mainly contains inputs and controls only. It was a challenge but I thought it would be a good way to create small and informative but not too highlighted illustrations, unique icons and cute animations on those screens where it’s needed and avoiding to distract the focus. On the website, I use different logos and colors for each product. The payments’ logo colors are magenta and pink, and it has other brand elements as well so I decided I will use them.
You can find more information about this app on the following links:
