Opfin

Opfin is a web application that challenges the way small businesses in India handle Payroll. In its core is a team of accountants, designers and developers who worked closely to bring out the best payroll solution that is compliant to India.

Links

Visit website


Visit application


Starting point
I was connected to this project at the very onset in the capacity of a designer and front-end developer. Some of my responsibilities included:-
– Website content architecture
– UX and UI for web application
– Translation of existing branding and brand assets into the website
– Static design of mobile and desktop views (sketch)
– Responsive front end development (html, css, jQuery)
– Tweaking design based on real user feedback
– Design and implementation of emailers (html)
– Implementing feedback from the design audits conducted by branding team
– Collaboration over Github

Application design
The bigger chunk of the work for Opfin was in designing the product itself: the payroll application. Design and development for the product started at the same time and took place in parallel. New features and pages were added to the application shell on a daily basis. The design was implemented in layers so that at every stage of the app, every element in the application looked complete. This process helped us get the product to a good shape for the dry runs that the company would conduct at the start of every month.

Responsive web design
The website was designed and coded mobile first on an 8 column grid. As with every project, the application as well as the website was tested for responsiveness across different widths and viewports.

Front-end development
The website makes use of HTML5 tags like aside, main, section, nav to make sure the markup stays semantic. Sass was used along with gulp to compile and minify all the CSS that is generated. A fun pricing calculator, written in javascript, was added to the pricing page of the website. Web application makes use of some popular jQuery plugins like pickadate. All vector assets are supplied in SVG.

Screen Typography
Based on the recommendations made by the branding team, the website uses the fonts: Canela (a serif typeface from commercial type) for headings and Fira (an open source sans serif typeface from mozilla) in body and tables. All font-sizes are given in Rems so that the fonts can adapt to the each user’s browser preferences.

User Experience
The informative website is kept simple, with clear headings so that the user can quickly understand what Opfin does. Considering the product’s main purpose is to simplify payroll for smaller businesses, the UX for the application needed to be straightforward and easy to use. Every UI decision was guided with a principle of getting things done with as little hassle/clicks as possible.


I tried new things! Designing and coding mobile first before thinking about desktop
This turned out to be a pretty fruitful experiment. For the information part of the website, I chose to work and develop only mobile screens first. Apart from the general advantages of a mobile first approach, what I figured was: Especially since every aspect of Opfin was being worked on parallely (branding, content, illustrations, web design), this approach ensured that hierarchy of information was established in a visual manner and made it easy for all those involved to comment. The feedback gathered from these iterations were crisp and actionable. Something for me to keep in mind for the future!

I learnt lots! Launch early and iterate quickly
Right from the onset, and all thanks to Anuj’s (Opfin founder) previous experience and philosophy in building products: Opfin launched early and iterated rapidly. Dry payroll runs with pilot companies right from a very nascent stage of the app gave us early user insights that helped shape the product week after week.

I built a skill! Collaborating on Github
While I have learned to work and collaborate with Git during my time at HackerYou, this was the first time those skills were truly put to test in the wild (and how!) – From praying that the initial commit doesn’t mess up the entire repository, to finding ease in committing early, resolving conflicts, this was a great journey and I am thankful to the team that supported me through it. Also now that I have it figured, Git has become indispensable to every project I do.

Links

Visit website


Visit application

Credits: Opfin is the brain-child of Anuj Jain, founder and technical head of Opfin. Opfin’s branding partner, Codesign, provided brand identity and guidelines, cues for visual language as well as regular content and design audits.
Tagged in HTML5 & SASS jQuery Web