Web Development Portfolio

Fonepay

Fonepay Payment Service Limited is a company under F1Soft Group operational since 2004, a diversified Digital Financial Service (DFS) holding company. Fonepay is Nepal's first mobile payment network licensed by the central bank as a Payment System Operator (PSO) and also it is the first Non-card based PSO in Nepal to achieve PCI DSS certification.

Fonepay is Nepal's first mobile payment network licensed by the central bank as a Payment Service Operator (PSO). This interoperable network connects over 55 banks and financial institutions with over 16 million individual customers and 400,000+ merchants in Nepal.

I got the opportunity to design & develop the website for Fonepay during my working period as Senior Full Stack Developer at Feat International. My role was to lead the entire project on web development and I got a lot of help from my fellow graphic designers along the way on image management and placements.

Project Sitemap

The project got initialized after I started collecting a detailed scope of work from the client. Before executing the development, a clear understanding of what the client are expecting was very crucial. So a clear requirement was a must, inorder to decide how the website will look and function. Likewise, it would help greatly to decide which modules will be required on the backend controllable through CMS. Keeping these core reasons into consideration, we decided to work on the following sitemap for the website -

  1. Homepage/Landing Page
  2. About Us
    • Introduction
    • Board of Directors
    • Management Team
  3. Members
  4. Services
    • For Users
      • Fonepay App
      • Fonepay QR Payment
      • Fonepay Direct
      • Fonepay Online Payment
    • For Business
    • For Partners
  5. Publications
    • Reports
    • Notices
  6. Support
    • FAQs
    • Fees & Charges
    • Complain Manager (Redirecting to the Complain Manager Application)
  7. Legal
    • Terms and Conditions
    • Privacy Policy
  8. Contact
  9. Career Page
  10. Language Selector
    • English
    • Nepali

Backend Modules

Since the requirement was finalized and the scope of work was decided, a clear sitemap of the website was visualized. My next role after that was the challenging part. So, for each site map content, I had to seperate the static sections and the dynamic sections. Static sections meaning that the content will be hard-coded and will remain the same during the entire site navigation. Likewise, dynamic sections meaning that the content will change depending upon new content fed to the website through the CMS.

Seperating the dynamic section and the static section, the following dynamic modules were decided -

  1. Blog Module
  2. Career Module
  3. Services Module
  4. Communication Module
  5. FAQ Module
  6. Pages Module
  7. Testimonials Module
  8. Popups Module
  9. Board Module
  10. Management Team Module
  11. Merchants Module
  12. Partners Module
  13. Reports Module
  14. Vacancy Module
  15. Applicants Module
  16. Messages Module
  17. Partner Registrations Module

Work Process

Step 1 : Initialized the design of wireframes and high-fidelity mockups in PhotoShop to show the client how the pages in the website will look like. We initiated showing them the mockup for the Homepage, Fonepay for Users page, Fonepay for Business page and Fonepay for Partners page.

Step 2 : Upon approval of the page designs from the client, I started coding the frontend of the website with respect to the selected template designs. Parallel to that, I was working on the backend of the website and creating each modules and planning the database structure of the entire website.

Step 3 : Designed and developed a working fully functioning CMS for the website through which the dynamic modules of the application could be manipulated. Likewise, worked on miscellaneous pages of the website; such as, About page, Management Team page and others.

Step 4 : Syncing the dynamic content in the database with the frontend template of the website. By this time the CMS of the website was partially done, all the modules listed could now be manipulated through the CMS. So basically, I worked on showing the changes made on the CMS to replicate on the frontend of the website.

Step 5 : Content push to the website. Once all the templates were finalized and hard-coded, it was time to apply the static content into the website and place the newly designed creative images. Once that was done, the site was now looking much better compared to the old one.

Step 6 : Final system test, scope of work verification and preparation for deployment. Finally it was time to get things into production. So, I gathered the system requirements and all, tested the entire system on local environment, likewise on a test UAT LIVE environment and finalized that everything was good to go.

Step 7 : Deployed the website. Taking into consideration that the scope of work has been met and having received the green signal from the client to go LIVE. I took the website into production.

Closing Stage

Since fonepay already had a website in the past and the new website was a redesign project, some conflict came in the form of broken URLs during deployment. We found a total of 32 broken links, on which I had to take the responsibility of redirecting each of them to their respective new links. These broken URL issues need to be fixed because google searches, which has already indexed the pages will lead the customers to broken links redirected to 404 not found page.

Screenshot Demo

Fonepay - Homepage   About Page - Fonepay   Members Page - Fonepay