Configurable UI || Flipkart || Swiggy || System Design || iOS

Swiggy or Flipkart visitors will see that the UI interfaces are updated based on certain events, preference, history, geography, interest

• Depending on your preferences, you can customize your homescreen
• According to your history, you receive customiz categories
• Unlike other users, your homepage will be unique.
• An AI-based algorithm will update your preferences

How to get a configurable UI for different users:-

Divide the home screen into different widgets

Widgets are small windows that provide interactive and dynamic content.

Flipkart widgets:-

Popular items
Carousel
Recent visited items
Category carousel
Sales carousel
Sales ads
Announcement
Offer & discount

Similarly Swiggy can have different widgets:-

Popular food
Carousel
Recent visited restaurant
Food category carousel
Sales ads
Announcement
Offer & discount

Each widget has certain properties:-

Widget Size:- Height and width
Item Size:- Height and width
Items
Title & Header
Background
Category

Category will tell you about widget inner structure.

Each item has certain properties:-

Size
Origin
Name
Item Info
Destination page
Actions
Color
Background
Image

Let’s check JSON Structure for different Widget

Carousel

{
  "data": [
    {
      "widgetSize": {
        "height": 200,
        "width": "Full"
      },
      "itemSize": {
        "height": 200,
        "gap": 10,
        "width": 200
      },
      "items": [
        {
          "image": "https://www.flipkart.com/carousel1.png",
          "caption": "Big Sale: Up to 50% Off"
        },
        {
          "image": "https://www.flipkart.com/carousel2.png",
          "caption": "New Arrivals: Trendy Fashion"
        }
      ],
      "title": "",
      "background": "https://www.flipkart.com/background.png",
      "category": "Carousel"
    }
  ]
}

Product

{
  "data": [
    {
      "widgetSize": {
        "height": 200,
        "width": "Full"
      },
      "itemSize": {
        "height": 100,
        "gap": 2,
        "width": 200
      },
      "items": [
        {
          "image": "https://www.flipkart.com/product1.png",
          "title": "Trending Product 1",
          "price": "$99.99",
          "rating": 4.5
          "distination": "/product/id",
        },
        {
          "image": "https://www.flipkart.com/product2.png",
          "title": "Trending Product 2",
          "price": "$149.99",
          "rating": 4.8
          "distination": "/product/id",
        }
      ],
      "title": "",
      "background": "https://www.flipkart.com/background.png",
      "category": "products"
    }
  ]
}

• In iOS, we can create different scrollable section/Widget. Based on the configuration of widget, we can set different size and structure of widget.
• Each section act as separate generic UI, which can be used around the application.
• Different categories of widgets should be fixed along with UI properties to build robust configurable UI.
• Nested widget is the next level in configurable UI, which need greater effort and calculation.
• To improve scroll performance widget size need to be pre-calculated and stored for future use.