![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M 83.017 338.209 L 16.714 338.209 C 1.335 338.209 -5.851 319.167 5.694 309.007 L 352.114 4.158 C 358.552 -1.507 368.236 -1.368 374.508 4.479 L 701.528 309.329 C 712.606 319.655 705.298 338.209 690.154 338.209 L 629.3 338.209 C 620.088 338.209 612.62 345.677 612.62 354.891 L 612.62 628.031 C 612.62 637.243 605.152 644.711 595.94 644.711 L 460.412 644.711 C 451.198 644.711 443.73 637.243 443.73 628.031 L 443.73 445.589 C 443.73 436.377 436.262 428.909 427.05 428.909 L 291.522 428.909 C 282.31 428.909 274.842 436.377 274.842 445.589 L 274.842 628.031 C 274.842 637.243 267.374 644.711 258.162 644.711 L 116.378 644.711 C 107.166 644.711 99.698 637.243 99.698 628.031 L 99.698 354.891 C 99.698 345.677 92.229 338.209 83.017 338.209 Z" fill="rgb(245, 245, 245)" height="644.7111231069853px" id="bPxo3qcTR" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4.17" stroke="rgb(245, 245, 245)" transform="translate(47.49 85.823)" width="706.8676896632352px"/></svg>)
Creating system components
Creating system components
Creating system components
Created scalable components for essential and frequently used elements in the platform like title bars, product cards and communication banners.
Created scalable components for essential and frequently used elements in the platform like title bars, product cards and communication banners.
top flavours
top flavours
Visual Design, Design Systems
Visual Design, Design Systems
Visual Design, Design Systems
spice level
spice level
Associate Designer
Associate Designer
Associate Designer
cook time
cook time
Jul ‘23 - Aug ‘23
Jul ‘23 - Aug ‘23
Jul ‘23 - Aug ‘23
best paired with
best paired with
Front-end Engineers
Front-end Engineers
Front-end Engineers
chef’s notes
chef’s notes
Pushed for these components additions, which helped us improve visuals significantly, even at an early stage
Pushed for these components additions, which helped us improve visuals significantly, even at an early stage
Pushed for these components additions, which helped us improve visuals significantly, even at an early stage
Title bar
Title bar
Title bar
Anatomy of the component
Anatomy of the component
Anatomy of the component
I helped define the anatomy (placement of the atoms, padding and type of visuals and asset support) and also helped define how it would scale for various usecases.
I helped define the anatomy (placement of the atoms, padding and type of visuals and asset support) and also helped define how it would scale for various usecases.
I helped define the anatomy (placement of the atoms, padding and type of visuals and asset support) and also helped define how it would scale for various usecases.
Size variations- Expandable title bar
Size variations- Expandable title bar
Size variations- Expandable title bar
Since the expandable title bar can be used for visual communication and delight, we defined various sizes (aspect ratios) depending on the kind of communication and interaction to be provided.
Since the expandable title bar can be used for visual communication and delight, we defined various sizes (aspect ratios) depending on the kind of communication and interaction to be provided.
Since the expandable title bar can be used for visual communication and delight, we defined various sizes (aspect ratios) depending on the kind of communication and interaction to be provided.
Lottie Title animations
Lottie Title animations
Lottie Title animations
We did multiple Lottie animation title bars to add delight to the platform, especially on the homepage
We did multiple Lottie animation title bars to add delight to the platform, especially on the homepage
We did multiple Lottie animation title bars to add delight to the platform, especially on the homepage
Current designs- new additions
Current designs- new additions
Current designs- new additions
A few new sizes were also added apart from the above mentioned 4, to accommodate for further use-cases.
A few new sizes were also added apart from the above mentioned 4, to accommodate for further use-cases.
A few new sizes were also added apart from the above mentioned 4, to accommodate for further use-cases.
Product Card
Product Card
Product Card
Anatomy of the component
Anatomy of the component
Anatomy of the component
I helped define the anatomy of the product card (placement of the atoms, padding and type of visuals and asset support) to make sure it scales for different use-cases.
I helped define the anatomy of the product card (placement of the atoms, padding and type of visuals and asset support) to make sure it scales for different use-cases.
I helped define the anatomy of the product card (placement of the atoms, padding and type of visuals and asset support) to make sure it scales for different use-cases.
Product card types
Product card types
Product card types
We also defined how the card would look and scale for different use-cases like when a product is out-of-stock or what will the maximum information limit be.
We also defined how the card would look and scale for different use-cases like when a product is out-of-stock or what will the maximum information limit be.
We also defined how the card would look and scale for different use-cases like when a product is out-of-stock or what will the maximum information limit be.
Current designs- changes and improvements
Current designs- changes and improvements
Current designs- changes and improvements
Going forward, we also changed the product card structure to be able to accommodate more information in lesser space (vertically and horizontally)
Going forward, we also changed the product card structure to be able to accommodate more information in lesser space (vertically and horizontally)
Going forward, we also changed the product card structure to be able to accommodate more information in lesser space (vertically and horizontally)
