Disclaimer: This article was written few years ago and may no longer be relevant as software engineering has changed a lot in the last few years. This is what may be more relevant now: Future of Software Engineering - Gaurav ChandakAn e-commerce platform is a website/app that sells some products online. The product could be anything. Most of the websites or apps that we interact with are e-commerce platforms. Even workat.tech is an e-commerce website as you can buy courses from it.
Examples
- General Shopping: Amazon, Flipkart
- Food: Swiggy, Zomato, Uber Eats
- Cabs: Uber, Ola
- Flight Tickets: MakeMyTrip
- Movie Tickets: BookMyShow
- Hotels: OYO, Airbnb
- Grocery: BigBasket, Grofers
- Courses: Coursera, Udemy, workat.tech, etc.
- Movies: YouTube
- Stocks: Zerodha
E-commerce platforms have very domain-specific designs and challenges. The core e-commerce lifecycle is generally the same across platforms. If you learn that, you can create different e-commerce websites across domains.
Follow this order in adding features. Doing even the first three is good enough.
- Create a product detail page/landing page for a digital product.
- Add a way to add the product to the cart and checkout for free.
- Integrate with a payment gateway like Razorpay and allow payments.
- Create a product listing page.
- Add search and filters.
- Add ratings and reviews.
- Add recommendations.
E-Commerce Lifecycle/Funnel
Most e-commerce platforms have a set of common pages each with an aim to facilitate discovery and purchase.
The entire e-commerce lifecycle can be denoted as a funnel. It denotes the journey of a user from landing on the platform to completing a purchase.
The number of users decreases by a huge percentage at every step of the funnel and so most e-commerce platforms try to optimize each step to avoid drop-offs. One such optimization is delaying the login and asking for any information as late as possible. The intent on each page is to increase the likelihood of customers completing the purchase.
Let's look at the most common pages of any e-commerce website.
Homepage
The homepage is the first page most people land on in an e-commerce platform. Here, the idea is to make people discover products based on intent or recommendations, or offers.
Most e-commerce platforms would display the following on the homepage:
- Search Bar
- Category List with dropdowns for subcategories.
- Banner with offers/deals/sale
- Sections with offers/deals/sale
- Recommendations based on certain factors
- Personalized (if logged in)
- Best Sellers
- Dependent on time/location/occasion
- Every product having an option of 1-click 'Add to Cart' and/or checkout.
- The homepage would generally not require a sign-in to avoid drop-off.
Examples
- https://amazon.in/
- https://www.flipkart.com/
- https://www.bigbasket.com/
- https://www.udemy.com/
- https://workat.tech/
- https://www.makemytrip.com/
Product Listing Page (PLP)
The product listing page (PLP) is a page that contains a list of products. This page comes up after clicking on a category or based on search or based on some sale with a set of eligible products.
The idea here is to make the customers see a list of products with the important details, thumbnail, and pricing so that the customer can compare and make an informed decision.
Most PLPs would have:
- List of products
- Each product having the name, thumbnail, basic information, price, ratings, deals, etc.
- Each product would also have an option to 'Add to Cart' and/or checkout.
- Filters and Sorts to make the intent clearer. The page would generally have scroll-based pagination.
- Count of products.
- The PLP would generally not require a sign-in to avoid drop-off.
Examples
- https://www.amazon.in/s?k=mobile
- https://www.flipkart.com/mobiles/mi~brand/pr?sid=tyy,4io&otracker=nmenu_sub_Electronics_0_Mi
- https://www.bigbasket.com/cl/fruits-vegetables/
- https://www.udemy.com/topic/web-development/
- https://workat.tech/programs
- https://www.makemytrip.com/flight/search?tripType=O&itinerary=DEL-BLR-30/11/2021&paxType=A-1_C-0_I-0&cabinClass=E&sTime=1616308252079&forwardFlowRequired=true&mpo=
Product Detail Page (PDP)
The product detail page (PDP) is a page that contains all the available details about the product that the customer might need to know to buy the product.
Most PDPs would have:
- All the details about the products including multiple images.
- Option to 'Add to Cart' and/or checkout.
- Price, Offers, Discounts, Payment Options, Availability, Delivery Slots, etc.
- Different variations of the products. Note: Each variation denotes a different product.
- Warranty and Use Instructions.
- Ratings and Reviews.
- Similar Products.
- More details about the brand/seller to increase trust.
- Social sharing links.
- Breadcrumbs for easier navigation to parent categories.
- The PDP would generally not require a sign-in to avoid drop-off.
Examples
- https://www.amazon.in/New-Apple-iPhone-Mini-128GB/dp/B08L5VN68Y/
- https://www.flipkart.com/redmi-9-prime-mint-green-64-gb/p/itmcccb4b3a6c2e0
- https://www.bigbasket.com/pd/10000148/fresho-onion-1-kg/
- https://www.udemy.com/course/the-complete-web-development-bootcamp/
- https://workat.tech/programs/sde-bootcamp
Cart
Most e-commerce platforms have a concept of a cart where you can add multiple items before placing the order. Digital products generally do not keep a cart as most users intend to buy only a single product at a time so the extra step of going to the cart page before checking out can be removed there.
The cart is generally displayed at the top of most of the pages so that the customer can go to the cart page and complete the order whenever they want to. The cart is instantly updated on adding or removing an item.
Most cart pages would have:
- List of cart items with basic info including price.
- Way to increase/decrease units.
- Way to remove the item from the cart.
- Recommendations based on past orders/added items.
- The total price of the cart (Total MRP, Discounts, Delivery Charges, Final Amount, etc).
- "Place Order" type button to initiate checkout.
- The Cart page would generally not require a sign-in to avoid drop-off.
Examples
- https://www.amazon.in/gp/cart/view.html
- https://www.flipkart.com/viewcart
- https://www.udemy.com/cart/
Checkout
This is the step between cart and payment. The use case of the checkout page(s) is to get all the necessary information for the order like:
- User information by making the customer signin/signup
- Delivery and Billing Address
- Coupons, Bank Offers, etc.
- Any other information
Examples
- https://www.amazon.in/gp/buy/addressselect/handlers/display.html?hasWorkingJavascript=1
- https://www.amazon.in/gp/buy/shipoptionselect/handlers/display.html?hasWorkingJavascript=1
- https://www.amazon.in/gp/buy/payselect/handlers/display.html?hasWorkingJavascript=1
Payment
Most e-commerce platforms use a 3rd-party payment gateway like RazorPay for this step. The user initiates a payment by clicking on the payment button and the payment flow starts between the client, the server, and the payment gateway.
Below is a high-level representation of the Razorpay payment flow.
https://razorpay.com/docs/assets/images/tech_flow_2.png
You can view the complete flow here. You can start accepting payments from RazorPay using this link.
Order Detail Page
This page contains all the details of the order including:
- Basic Product Information with price and quantity
- Shipping/Delivery Information
- Cancel Order Option
- Payment Mode
- Any Other Information
This page would come up after the payment or through the order list page.
Many digital products show a thank you popup instead of the order detail page on successful payment.
Examples
https://www.amazon.in/gp/your-account/order-details/ref=ppx_yo_dt_b_order_details_o00?ie=UTF8&orderID=<enter-a -order-id-here>
Order List Page
Contains the list of all the orders in reverse chronological order.
Each item in the list would contain basic information to make it easy to identify the order.
Examples
https://www.amazon.in/gp/css/order-history
There might be certain pages for managing the account, addresses, etc.
Entities
The entities in your e-commerce platform will be dependent on your specific use case. We've added some entities and their attributes below to give you a rough idea of how to think about it.
- User: id, email/phone, first name, last name, etc
- Product: id, title, description, category, price: {mrp, list_price}, etc
- Category: id, name, thumbnail, subcategories: [id, id, ...]
- Cart: id, items: [{product_id, quantity, ….}], price: {total_mrp, ….}, etc
- Checkout: cart_id, delivery_address, billing_address, coupon, price: {total_mrp, ….}, etc
- Payment: id, amount, status, method, order/payment details from the payment gateway, etc
- Order: id, user_id, items: [...], amount, status, etc
Each entity should have created_at and updated_at as well.
You can have other entities as well based on your use case. You can also add entities like promotions, pricing, etc if you want to extend it further. You should also store the events received from your payment gateway. You will have to use these events to update details in your payment and order entities as well.
You can design the API specs based on the entities and the use case. You can do the UI design by taking inspiration from different e-commerce platforms.
Make sure to deploy your code on Heroku/Netlify or some other hosting service. Add the hosted link to your GitHub repository.
