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.