Who is the Client

A US-based retailer with more than 700 departmental stores and 150 specialty stores, they are a major player in their industry and one of the oldest shopping destinations for their customers.

The Challenge

The client owns a huge e-commerce portal whose success depends on the ease with which visitors can search and browse the products. However, the search and browse pages' responsiveness was deteriorating since they were being managed through an in-house development ecosystem, which accumulated a lot of redundant code introduced due to re-engineering of features multiple times. It was based on an outdated Java technology and Java Server Pages (JSP) templates wherein various components of these search and browse pages (selection, marketing, purchase and order, etc.) were interconnected. They also had frontend and backend tied to each other.

The user interface (UI) of these search and browse pages was tied to web services. The web and mobile site had a separate codebase and were maintained on separate servers. Hence, all the changes were required to be duplicated on both the servers.

The client’s e-commerce business was suffering because of the inadequate responsiveness of these search and browse pages. Different UI components of these pages were also interconnected in a manner that the teams responsible for different components of UI were not able to make changes without impacting each other.

The Solution

GSPANN updated the client’s in-house ecosystem (based on JSP and YUI) to the latest Java version. We developed a responsive design for search and browse pages that is deployed on a single server. We performed componentization of the UI for search and browse pages and separated them from the web service (backend). We further re-architected the UI and took care of stretched banners, added breadcrumb, re-aligned items, and cleaned up the facets.

We split the UI of search and browse pages into multiple components/modules. Each individual component runs in isolation to implement/test functionalities faster and serves a different functionality for search and browse pages. All JSP layouts of each component were converted into Handlebar templates and we rendered the pages server-side using Node.js. This helped in separating the UI layer running on Node.js, which was earlier tied to a Java-based web server (JBoss, Jetty).

Since only a single server is required to maintain the responsive design of search and browse pages, the cost of server maintenance was reduced by 40%. The development and release cycle of backend and UI was separated, which helped the team responsible for different components of the UI to go live in production independent of the backend release. This also made A/B testing on UI easier.

In addition to the responsive design, we also implemented experimental features for a search and browse page that is controlled by a kill-switch if something goes wrong in production.

Business Impact

  • The ‘Add To Bag’ conversion increased from 100K to 200K per month.
  • The page load time for search and browse pages reduced from approx. 13 seconds to less than 3 seconds.
  • Changes can be made to different components of UI in the production environment separately, as the development and release cycle of back-end and UI are separated.

Technologies Used

Node.js. Make http calls, route proxy calls, make changes to the request and response objects
Sass. Create organized and syntactic CSS
Backbone.Marionette. Implement features/functionalities by creating views, models, and events
Handlebars. Create layouts for the views that render on the page
RequireJS. Load modules that exist in separate files based on the requirement
Jasmine. Unit test framework, helps in writing unit tests for the implemented functionality
Webpack. Transform, bundle, and package resources
jQuery. Event handling, animations, making Ajax call, DOM traversal
JAVA 8. For creating web API

Related Capabilities

Optimize Business Operations by Eliminating Inefficiencies and Redundancies with High-Quality Apps.

Develop advanced applications mapped to your strategic goals by utilizing modernize architectures, such as microservices, to seamlessly leverage cloud capabilities. We can help in migrating your applications to a modernized technology platform while keeping your costs in control.

Do you have a similar project in mind?

Enter your email address to start the conversation