Smart links

Client: Instamojo

 App Development

Year 2018

Role: Senior UI Developer

App feature for businesses to collect payments smartly!

SmartLinks is a product for businesses through which they can optimize and customize their payment system as required, and with  e-commerce growing at a rapid pace, SmartLinks is a service that can help merchants stay relevant.

 

The main features include:  allowing business owners to auto expire payment links, collect tax details during payments, customize the design of the link, adding post payment options, adding flexibility to modify payment amount for the users and a thank you note after the payment is successful.

Case study

1.0 BACKGROUND

Payment Links,  launched by Instamojo in 2016, proved to be the absolute fit for small and medium scaled businesses. Lakhs of MSMEs in India use Instamojo Payment Links to collect payments every day. Businesses use Payment Links to close sales. They send Payment links to their customer once the price is negotiated.

As these small businesses grow, they become complex. New departments, processes, and software emerge. Payment Links often need tech-effort to make it work.

Here is the UX Case study by a teammate Sidharth, The Product Manager of this project,

2.0 BUSINESS PROBLEM STATEMENT

Payment links are being used by a diverse user base in India. Customers ranging from different backgrounds, different financial and technical resources. The customers were reaching out to Instamojo with hundred's of feature requests as per their needs.

How might we enable businesses to collect payments easily while also giving the flexibility to the businesses to cater to their diverse needs?

Answer:  Smart Links

3.0 MY PROBLEM STATEMENT

The Smart Links project required to update the existing payments links flow and to integrate "Smart Links" features that matched the detailed designs and interactivity.

The UI was conceived with a mobile first approach. So it would be possible to effortlessly launch it into any platform without making any changes to the main application.

The questions for me as a developer are highlighted below:

  • How can we handle the data robustly and keep the link creation and checkout a smooth experience.

  • How can we keep CREATE - UPDATE - DELETE flows consistent, without adding separate flows for each. 

  • How can we minimise UI errors.

4.0 DEVELOPMENT PROCESS

My deliverables were to develop a robust system following the four pillars of software development.

Fast - Responsive - Intuitive - Dynamic

The UX design team at Instamojo provided me with mobile  layouts for each page and relied on my experience to produce suitable layouts and solutions for tablet and desktops. I believe it is important to give desktop devices as good an experience as mobile whilst making appropriate decisions to work around some of their limitations.

 

I used feature detection to reduce the amount of animation and changed layouts slightly to be more mobile-friendly. I relied on hardware acceleration to make animation as smooth as possible.

I followed the Design -> Test -> Iterate cycle for each MVP and did A/B testing to identify flaws and loopholes.

5.0 TECHNICAL SHEET

Code technologies I got involved with while working on this project.

  • UI/UX Architecture

  • UI/UX Animations

  • React

  • Redux

  • Webpack

  • Javascript ES6

  • CSS3 – CSS Modules, SASS, PostCSS

  • HTML5 – semantic, video, canvas

  • Gulp

6.0 RESOURCES

Live Product: www.instamojo.com/create-link