E-Commerce Web App For A Retail Giant

Project Type

Design and development

Industry

E-Commerce App Development Services

Tech Stack

ABOUT THE CLIENT

Founded in the land of the Americans, the client has been deemed as North America's biggest bag making company, that has ventured into making insulated bags of the top-most quality. Their products are also environment friendly and 100% recyclable and reusable.

The Problem

Having worked with the client on a previous project, they were aware of the quality of work and the excellence that we strive for and deliver, which made them take the decision of returning to us and gracing us with another project in December, 2019. With their previous experience, they thought of us to be a good fit for the project. An e-commerce website was already in place for the client's services but it was outdated, both design and tech wise. The client also wanted the CMS to be designed in such a way that the non-technical people on the team would be able to use it without any hiccups.

The initial plan was discussed and was detailed. In the beginning, three weeks would be spent on revamping the entire visual design of the project based on a Time & Material Engagement plan. With the other project still in its final phases and being the priority, work on this project was held and continued after almost two months. The client preferred the Fixed time & cost model, spread over three major milestones. With development complete, another switch was made to the T&M engagement model for the finishing touches.

TEAM ON CALL

As the project was carried out over a larger span of time, with different features implemented in different phases, the team kept changing in relevance to the work being done. For the design phase, one designer, overseen by the Design head, the design head were appointed. For the first part of the development phase, one developer, one Q&A engineer were appointed, being supervised by our Engineering Manager, followed by two web developers finishing the project and delivering the final touches.

<div><span style="font-family: inherit;">Their e-commerce web app revamped and rebuilt.</span></div>

The app would keep all existing functionalities with new features.

The app would feature a new look and an overhauled design.

A CMS, supporting the app, simplified for non-technical users.

OUR APPROACH

Strategy Analysis Planning UI/UX Development Testing Delivery

Strategy

This venture of ours led us to create an e-commerce platform for a retail giant based in North America. The collaboration was initially based on a time and material engagement model but was changed to the fixed cost model as work on the project extended during its final phases.

Analysis Planning

The primary goal of the project was to revamp the existing CMS and make it more comprehensible for those who are not tech savvy by implementing a drag and drop option while also enhancing the user experience of the app by integrating it with Shopify.

UI/UX

The application was also designed to provide a great experience to the customer which the design team did by implementing UI/UX designs using Adobe XD.

Development

As per the client’s requirements we enhanced thee-commerce app by integrating Shopify which gave it additional functionalities like easy content management, user-friendliness, theme support, custom themes, easy deployment, integration of payment gateways and high security.

Testing

As per the client’s requirements we enhanced thee-commerce app by integrating Shopify which gave it additional functionalities like easy content management, user-friendliness, theme support, custom themes , easy deployment, integration of payment gateways and high security.

Delivery

Each feature, after the end of its creation, was put through intensive manual checks throughout the course of the project to fix bugs at the earliest.

OVERCOMING CHALLENGES

In the quest to achieve an easy to use e-commerce platform with a brilliant CMS, a lot of challenges were anticipated by the teams working on the project. Surprisingly, Shopify, with PageFly, made is ever so easy for us to work on and achieve what was required by the client. Some challenge was posed by the project in the designing phase. Everything was to be redesigned from the ground up. it was very important to keep everything in tandem with the mission of the company and the brand, which required a lot of input from the client and a lot of iterations from the designers. In the end, we were able to achieve the perfect UI for the web app.

In bird's eye view

Shopify was the tool used to achieve ease of development.
PageFly plugin was used to implement feature specific to the user.
Adobe XD was the choice of design tool to create UI/UX.

DEVELOPMENT

From the surface, the project appeared to be quite a simple one. A simple revamping of the entire e-commerce platform with. a design overhaul. Pretty straightforward requirements. The tricky part of the entire website lay within the surface. The app was already running in production and according to the client, it was not easy to manage and update content on the app. So the actual requirements of the client were to rebuild this website in such a way that non-technical people could operate and maintain content on the website, while being user-friendly and easy to understand, involves an inventory management service and the entire CMS must be drag-and-drop based.

These requirements made this project a lot more interesting than it already was and our team set out to find the perfect ways to create this app, tailored to the client's expectations. The first step was to redesign the entire experience. The old design was completely done away with and a new experience was created from scratch. They were built in Adobe XD and were built, keeping, in mind, the ser experience and user stories created for the customers. In three weeks, the design was created with multiple iterations and with the client's liking and approval, the best one was finalized and the development phase was kicked off.

While scouring the internet for ways to implement an easy to use e-commerce website, we came across Shopify. Shopify is an online development tool, specially designed for e-commerce websites. It provides all salient features of an e-commerce app like easy content management, user-friendliness, theme support, custom themes , easy deployment, integration of payment gateways and high security. The feature that drew us towards using Shopify for this project was its ability to manage content by simply dragging and dropping elements and writing comments without focusing on HTML/CSS codes. This was perfectly in line with what the client was looking for in the app and made the process of integration, deployment, routing and backend setup quicker and easier so that more focus can be given to designing a great customer experience.

Within Shopify, PageFly plugin was the one that stood out for us and formed a key technical decision in building the entire app. PageFly is the best page builder tool on Shopify, which provides a reusable widget that can be reused wherever required, tools to manage layout of pages and create nested sections simply by dragging-dropping, widgets to support video players, cards, sliders et cetera and an easy data integration mechanism with the Shopify database.

The migration for the app from the existing technology to Shopify was clear. Analysis of the existing app and marking the key sections was crucial. Next, bottlenecks, unresponsive designs and bad UI were identified and finally user stories were analysed to create a better understanding of how the app should work and feel.

In the development phase, the first step was to identify the common and reusable sections of the web app as well as the complex and critical part of the web-app. This helped us isolate components and create a modular structure of the entire app and find their corresponding widgets in the PageFly plugin for faster and stable development.

QA & testing was done at the end of each developed feature. The QA engineer indulged in manual testing for the features of the app, testing them under all possible scenarios whenever ready and re-iterating tests over already tested features around every turn. After every feature test, the build was shared with the client and verified, with any bugs or discrepancies reported, fixed and tested again for stability.

FINAL IMPRESSION

As per our previous record, the client was immensely satisfied with the end product. The web app is now live and is working flawlessly, delivering amazing user experience and continuing business without disruptions. In the words of the client, they were happy with how everything turned out and loved the Shopify system. Their launch was a full success and they congratulated the team for their efforts and management. They could also retain their order histories which offered no hiccups in the overall functioning and experience for the user and the client as well. Kudos to the team for successfully tackling this project and its technicalities to satisfy yet again.

Case Studies.