{"id":996,"date":"2015-05-27T16:38:46","date_gmt":"2015-05-27T11:08:46","guid":{"rendered":"http:\/\/blog.instamojo.com\/?p=996"},"modified":"2021-01-21T19:17:02","modified_gmt":"2021-01-21T13:47:02","slug":"designing-instapay-instamojo-online-payments","status":"publish","type":"post","link":"https:\/\/www.instamojo.com\/blog\/designing-instapay-instamojo-online-payments\/","title":{"rendered":"Designing Instapay \u2013 Thought process and research behind Instamojo’s new release"},"content":{"rendered":"

Releases are scary. Timing them well is very important and there goes a lot into the preparation before such an occasion. This week, we bring you the newest thing we built here at our cosy den – Instapay.<\/p>\n

Instapay is a feature on Instamojo that takes the process of making online payments to a different paradigm\u2014to an approach that we think is very easy, fast and secure\u2014essentially how online payments should\u2019ve been from the beginning.<\/p>\n

With the goal of making payments more natural, more human and more personal<\/strong>, we put a lot of thought into how the process itself can be revised.<\/p>\n

Our idea is\u2014In an ideal world, we would want online payments to work as seamlessly as paying cash in hand.<\/p><\/blockquote>\n

With Instapay, we reveal a new method of making payments. We eliminate the step of exchanging your banking pleasantries\u2014i.e. your account number, IFSC code and such. All you do is share your unique Instamojo @username<\/strong> and anybody can directly pay you money with his preferred method (sounds so darn simple, right? That\u2019s because it is simple!).<\/p>\n

This is a lot easier than usual NEFT and IMPS transfer gateways banks provide. Having Instapay means you don\u2019t have to log in to the bank gateways every single time and worry about connections timing out while you fiddle to find your login details.<\/p>\n

No more exchanging bank-pleasantries like Account Number and IFSC code for paying or sending money. We handle that for you. Your @username becomes your and your business\u2019s financial identity.<\/p>\n

Design and Details<\/h2>\n

Always begin your design with a necessity<\/strong> (the reason for building something), then check the usefulness<\/strong> (testing if what you built is useful and is solving the problem) and then focus on beauty<\/strong>.<\/p>\n

\"\"<\/a><\/p>\n

For Instapay, we started pretty much with a blank slate with a\u00a0mobile-first<\/strong> approach in mind. This was because we were solving a problem for a different set of users – the buyers<\/strong> (instead of the regular Instamojo folk) or the customers of our customers (the merchants).<\/p>\n

Hence, the visual language, written copy and product message – all had to take into account this shift. Simplicity and speed of making payments were key.<\/p>\n

Colour palette<\/h2>\n

For picking colours for the palette, we experimented with a few different options. Our priority was to choose soothing, neutral and assuring colours. We decided to go with a shade of navy blue (#255578<\/a>) for the vast background around the card. The hexagonal pattern<\/strong> represents a network of payments while maintaining distance from the action card in prominence. For the Pay<\/strong> button, we wanted a very inviting, friendly and distinct colour – a delicious shade of red made the final cut (#FF555A<\/a>). The clean and spacey layout was chosen carefully to be that way. The fonts used are Whitney<\/a> from Hoefler & Co. for their stability and ridiculously beautiful and curvy ‘@’<\/strong>\u00a0character (not joking!).<\/p>\n

Interface<\/h2>\n

 <\/p>\n

We started with the bare minimum that was required from the user as input, and we packaged it in a coherent card-shaped interface. The reasoning here was the key fact that we were targeting on-the-go payments when you\u2019re out and about. We don\u2019t want you to have to open up bulky pages and scripts to pay. Hence the interface is minimal and loads quickly on mobile browsers even on Edge (2G) networks (we tested this along the way).<\/p>\n

The card-shaped layout holds its shape and structure well on the mobile screens and expands a little for the widescreen desktop monitors. Although on wide monitors, actionable region remains the same maintaining uniformity in payment experience and lightweight asset bundles.<\/p>\n

 <\/p>\n

Here, I have shown some of the further screens in the flow. As you can see, the card layout is where the action happens. You have a chance to go \u2018Back\u2019 in the flow as well.<\/p>\n

\"\"<\/a><\/p>\n

So here\u2019s how we ported the 3 stages of design to Instapay:<\/p>\n