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

Shrawan K Sharma
2 min readJun 7, 2023

--

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.

--

--

Shrawan K Sharma

iOS App Developer - Frontend(ReactJS) - Building innovative products - MNNIT