Customer web portal redevelopment for Photographer
The project description
30 April 2020
Custom Web Application Development, Project Recovery
illegal ivory report app, Mobile Application
Photography, Portraits, Redevelopment, Web App, Custom Software
Overview
The client had a web-based application with a whole workflow & CMS in the Admin panel. It also included an eCommerce site for customers to order online for various products related to photo prints. But the PHP 4 application went outdated. Moreover, it had a lot of performance issues and made it difficult to run business operations smoothly. Thus, resulting in additional human resources, time, and cost. That needs to get replaced with a smooth software workflow. Since the website was for managing the workflow of Photography, it required a lot of photo uploading and downloading (Around 1000 to 2500 images). It is not an easy task to upload these images one by one. Because the software was incapable of handling a large amount of data transmission.
The client wanted to improve the existing web application. But it got complicated and costly to make the smallest of improvements. Hence, we recommended the client not invest in the old application. The client wanted to run its operation through the application. We decided on improvising the functionality as Phase 1. Then after in Phase 2, we start building the new application from scratch.
Client’s Challenge
- As an old web application was built using Core PHP (PHP Version 4) application’s architecture was inappropriate and the coding was not standardized. This scenario was causing difficulties for the developer to implement new functionalities or solve bugs in existing code.
- An administrator had to wait a lot to perform certain operations because the old application was taking way too long to process and load the data; Also, a lot of operations had to be done manually as it was faster to process manually and accurately compared to let the application do it.
- The user interface was HTML 3.0 based with a lot of third-party JavaScript that did not give a good user experience to customers who were actual users of the application.
- The complete customer portal was not responsive and was breaking on a couple of screens, especially for mac users.
- The old web customer portal workflow was not 100% optimized in terms of business operations which resulted in a waste of time & energy. Certain features were implemented in a way that was causing the problem to generate actual business intelligence data.
- Since the portal was built on outdated technology client had to either use the old shared server and deal with slow response time or invest way more amount for the dedicated server
Project Execution Challenge
- Proof-card Generation
This is a very important functionality for customers where they can see the portrait images. And through this, they can start ordering various printing products. First, we had generated proof-cards through Angular (Front-End) but it was taking a little longer to generate. Because first, it was generating an HTML view and then converting the same view into PDF. Again, when converting in PDF another challenge was alignment when taking a print of the HTML. We did optimize however client needed pixel-perfect prints. Hence, we decided to implement it differently. Then, we used ImageMagick (PHP script) to generate the JPEGs. And then after some calibrated adjustments, we were finally able to achieve the requirement’s solution. - Order Edit
The customer portal also has eCommerce integrated. As the customer order is one of the important features for revenue generation. After placing an order, the customer should be able to edit the order before it gets confirmed. Now, this was more of a business aspect challenge rather than a technical one. But to achieve this, we had to change the flow of the way customers interact with orders and users’ accounts. - Dynamic Product Catalog / Dynamic Angular Forms
Usually, standard behaviors of product catalogs contain Categories >> Products >> Attributes for a specific product. However, here the client wanted everything to be dynamic. For instance, First Administrator can create a product template then assign that template to a product. Once the customer chooses a product then based on the product attributes changes dynamically. Because attributes also had sub-attributes. Based on attributes selections other attributes and sub-attributes were changing values along with the price. This is 100% dynamic form generation based on selected criteria to place an order. This demanded lot of effort to calibrate customer interaction behavior. - Find existing business logic from old sources to replicate them
It was challenging for the developer to find the actual logic and implement the correct logic. Implementation of the simplest functionality or correcting a bug or error demands way too much time and expertise. This also impacted the overall evolution of the application.
Solution
A client was already using this PHP 4-based Customer Portal for his Photography / Printing (Portrait) business. We had to make sure his application kept operating smoothly now and later as well. So, we decided to provide the solution in phases without disrupting his business operations.
PHASE 1: Improvise the old application quickly
We solve the issue of uploading bulk images at once which was the client’s biggest concern by utilizing some third-party JavaScript and customizing it as per need.
We did a few security improvements so the client can use the software without any worry of breaching the confidentiality (GDPR) laws. Eg. Earlier there was a risk of accessibility of images by the public.
Upgraded the PayPal Payment Gateway APIs as it was using an old API that had been deprecated by PayPal.
We debugged and corrected the whole customer portal for Responsiveness and Cross-device compatibility and to make sure it can work smoothly on any device or browser.
PHASE 2: Build a new customer portal
We build a complete portal from scratch with Angular 8 on Front End and PHP 7-based framework Laravel.
We have an improvised business workflow in new software which can reduce the business operation efforts.
Introduced some new features & Functionalities: Dynamic Data Tables with Filters, Sorting, Search, Pagination
Integrated Royal Mail Shipping API to calculate the shipping cost and generate the shipping labels automatically.
Integration of the latest Payment API (WorldPay & PayPal) with correct checkout flow.
The new system is capable of managing customer data properly so now customers can log in and see their past activities like Orders, Payments, Status, Edit Orders, etc. Which ultimately reduced customer support efforts.
We have added live chat support instead of only phone support so now multiple customers can communicate at once without waiting.
To make GDPR compliance more transparent to customers we added functionality so customers can delete their images themselves instead of calling and requesting to Admin.
Admin can perform bulk actions while earlier the client had to do in one by one due to the old system.
PHASE 3: Data Migration (In Progress)
Generate a database script to migrate all previous orders and products from an old database to a new database
Missing Functionality
- Order/Invoice numbers were not in sequence.
- There was the ability to edit the order but it was not adding new orders which were causing a lot of issues for the accounting purpose.
- Certain functionality was not automated properly like firing email alerts to customers when order status changes.
- There was no way for the client to edit the order from the customer portal
It was not possible to upload more than 20 images at a time. - For data records pagination was not used.
- Although this portal was customer-focused there was neither a customer account nor an order history of past purchases.
Technology Stack
Backend System: Laravel, MySQL Database
Frontend System: Angular
Out Come
- Enhanced Data Protection and Privacy with GDPR adherence
In the new system, users have more privacy and better control over their data. They can now delete any of their data at any point by themselves. Also now their data was in a much more enhanced security environment - Rock-Solid enhanced security
With the new system, we have much higher security at Front End (Client-Side) as well as the back-end (Server-side) security. That generates sessions & authentication tokens to help encode/encoding of the token with a secret key. This makes this system extremely difficult for hackers to steal data. And due to new customer account management functionality, even each user can manage their privacy. Along can manage other things themselves. - Uploading & Managing 1000s of the image now take just 1 minute instead of Hours/Days
Earlier after each event client had to upload all the photos (500-3000 Images) in small batches. And also define the batches’ names and types manually. But now all they have to do is just upload an excel file which hardly takes a minute and let the system do the rest. Everything is automatically added to a queue in the system. Moreover, Labeled properly. Proof cards get generated and Images are also converted to everything with a single click. - Find existing business logic from old sources to replicate them
It was challenging for the developer to find the actual logic and implement the correct logic. Implementation of the simplest functionality or correcting a bug or error demands way too much time and expertise. This also impacted the overall evolution of the application. - Customers can now track their history
Earlier users were unable to see what they had ordered in the past. Or which proof cards they have used and more limitations. But now with new customer account management functionality, it became so easy and effective for customers. Also, it reduced efforts for the studio to edit orders since now customers can do it themselves.
