Gtrendz Online - A MultiVendor E-Commerce Design and Development
A quick look at the design and development side of a multi-vendor e-commerce platform.
On this page
I worked on this project around 4 years ago. It is one of the biggest projects I have ever been a part of. In this article, I will discuss the design and development process of India's first multi-vendor e-commerce platform, Gtrendz Online. I wanted to write about it after the project was over, but it is currently on hold as we secure funding for the next phase of development.
Project Introduction & Overview
When people think of setting up an online store for their business, they typically start with service-based platforms like Shopify or WooCommerce, or even become sellers on e-commerce giants like Amazon and Flipkart. However, Gunasekar's vision was to create India's first footwear-exclusive multi-vendor platform. Building a multi-vendor e-commerce platform from scratch is serious work, with numerous barriers to overcome. Most of the building blocks were developed by my company, Aroliant Internet Private Limited, especially by our Full Stack Developer, Jacob Samro. He was the project lead, and thanks to his efforts, our team succeeded in delivering a multi-vendor e-commerce platform built from scratch. I contributed to the frontend development and the React Native app.
Here's What I'll Be Covering in This Article
For my part, I'll discuss the design and development process of Gtrendz Online. When we started creating the platform, our team faced many challenges in achieving some of our goals.
My tasks are as follows:
- Purchase an HTML template for the customer website and customize it
- Choose appropriate design templates for the seller and admin dashboards and customize them
Phase 1
Even though my responsibility was solely to customize the designs (which sounds simple, right?), it turned out to be a difficult and tedious process. The templates we bought were not specific to any tech stack; my task was to integrate the static HTML templates into an Angular-based website. Essentially, breaking up the template into pieces and placing them in different sections was very similar to disassembling and reassembling a complex structure. Additionally, I had to incorporate new features into the website that were not present in the original template. Whenever I customized one aspect of the design, something else would go wrong—often due to unused CSS, HTML, and JavaScript from the original template. Carefully removing unnecessary code from thousands of lines was very time-consuming.
I remember arguing with my team lead that we could have saved time if we had started the site from scratch. What did I know? I did not have much experience at that time. In retrospect, I realize I was both right and wrong: yes, I could have saved a lot of time by copying only the major design blocks, but building it from scratch would have taken more time than I had anticipated.
The development of the seller and admin dashboards took a long time because each page had to be meticulously planned and effectively communicated among the team. We started developing both dashboards simultaneously, which made it a bit easier to understand the technical details.
With a lot of help and collaboration from the team, after some time I finalized the frontend for the website and dashboards, incorporating elements of the original theme along with light customizations. The team set up a live beta website to test everything before the final changes were deployed to the production server. I tested the frontend across various devices, while the team handled everything else.
Phase 2
In this phase, we performed extensive customization on the customer website, admin dashboard, and seller panel. We continuously made changes and implemented them following an agile process. This phase went smoothly for me, as I had already built a strong foundation.
Phase 3
After receiving extensive feedback from sellers and admins, we realized that we needed to place a significant focus on user experience and user interface design. Since the dashboards had many functionalities, I wanted a clean and minimalist design. While browsing Dribbble.com, I discovered SetProduct's Material-X dashboard UI Kit, which offered nearly every feature one could desire. I immediately purchased it. You can also read about my design implementation on SetProduct's blog.
Here's a quick look at the Phase 3 design:
Seller Dashboard / Seller Panel UI Design Prototype
Admin Dashboard UI Design Prototype
Redesigned Results
Here are some of the redesigned screens comparing Phase 2 and Phase 3:
These newly designed screens underwent live usability testing with existing users, and the new design was very well received. I'm happy to say that the redesign was highly praised by the GTrendz management. I will write about the design implementation phase once it happens.