I worked on this project around 4 years ago; It is one of the biggest projects I have been part of; In this article I will talk about the design and development process of the India's first multi-vendor e-commerce platform, Gtrendz Online. I wanted to write about it after the project was over, but the project is on hold for funding the next phase of development.
Project Introduction & Overview
When people think of setting up an online store for their business, they start with service-based platforms like Shopify, Woocommerce, etc. or even become sellers with e-com giants like Amazon and Flipkart. But Gunasekar's vision was to create a multi-vendor platform which is footwear-exclusive and India's first. Building a multi-vendor e-commerce platform from scratch is serious work; there are so many barriers to come through. Most of the building blocks were built by my company Aroliant Internet Private Limited, especially by our Full Stack Developer Jacob Samro. He was the project lead, and thanks to him, as expected, our team succeeded in delivering a multi-vendor ecommerce platform built from scratch. And myself contributed to the Frontend development and react-native app.
Here's what I'll be covering in this article.
For my part, I'll talk about the design and development process of gtrendz online; When we started creating the platform, the team faced many difficulties in achieving some parts of the goal.
My task are as follows:
- Buy an HTML template for the customer website and customize it
- Pick the right design templates for the seller and admin dashboards and customize it
Phase 1
Even thought my tasks were to just customize, sounds simple, right? But it turned out to be a difficult and tedious process. The templates we bought were not tech-stack specific; my task was to implement the static HTML templates to the Angular framework-based website. Basically, breaking up the template into pieces and putting it up in different places, the process is very similar to disassembly and assembly of something that is built complicated. Also incorporating the new features into the website that did not exist in the original template. Whenever I were to customize something in the website design, something else would go wrong; caused by unused CSS, HTML & Javascript styles from the original template; carefully removing unused code from a very long lines of code in the thousands took a lot of time.
I remember arguing with my team lead, we could have saved more time if we had started the site too from scratch. What did I know, I did not have much experience during that time. Realizing now, I was both wrong and right, Yes, I could have saved a lot of time if I had copied only the major blocks of design to the website. But building it from scratch would have taken more time than I'd deduced.
Development of seller and admin dashboards took very long, since each page had to be planned in detail and well communicated with each other. We started the development for both dashboards simultaneously; it made it a bit easier to understand what's going on, from a technical point of view.
With a lot of help and collaboration from team; After quite some time, i finalized the frontend part for the website, & dashboards incorporating some original theme design and also included light customization. Team had setup a live beta website to ensure and test the website before the final changes made it into production server. I tested the frontend for all the devices, and the team tested everything else.
Phase 2
Here we had super heavy customization on customer website, admin dashboard, and the seller panel. Continuously making changes and implementing them in agile process. This phase went smooth on my part, since I had already finished building a strong foundation.
Phase 3
After much feedback from the sellers and admins, we needed a significant focus on the user-experience and user-interface design. Since there are so many things to do in the dashboards, I needed a clean and minimal design; While i was going through Dribbble.com, I discovered SetProduct's Material-X dashboard UI Kit, which had extensive features one could ever want; Immediately I went ahead and purchased it. You can also read about my design implementation on setproduct's blog.
Here's a quick look at 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 went under live usability testing with existing users and they loved the new design. And I'm happy to say the redesign is highly praised by GTrendz management. Will write about the design implementation phase after it happens.