Aadhavan M

Product Designer

Back
Projects
Blogs
Profile

Wireframing

Sketched and tested multiple wireframe structures for Zepto’s Quick-Add Feature โ€“ enabled usability feedback loops before moving to high-fidelity design.

During the Zepto case study, my focus was to help users quickly add frequently purchased items without interrupting their primary shopping flow. This required wireframing a lightweight yet visible module that balanced utility with simplicity.

What I did:

1. Conducted competitor scans (Blinkit, Swiggy Instamart) to understand different ways of handling quick-add scenarios.
2. Brainstormed multiple layout patterns:
– Horizontal scrollable chip-style product cards at the top of homepage
– Static grid below the fold with 2-click add-to-cart
3. Sketched these ideas on paper to understand how elements like images, names, quantities, and pricing could be grouped efficiently.
4. Created low-fidelity wireframes in Figma for both mobile and tablet views.
5. Included:
– Product card layout with image, short name, price, and + button
– Badge overlays for offers or out-of-stock status
– Optional CTA to view all frequently purchased items
6. Tested layouts with peers and mock users to validate visibility and intuitiveness:
– Users preferred the top placement for faster access
– Some found the horizontal scroll easy to miss, so I added a label to draw attention
– Ensured tap target size met mobile accessibility guidelines

These wireframes helped catch early confusion around visual hierarchy and placement. It saved time before jumping into detailed UI styling and allowed quick changes based on user feedback.

Case Study: Zepto Project

Visual Reference:

Aadhavan M

Product Designer

Wireframing

Sketched and tested multiple wireframe structures for Zepto’s Quick-Add Feature โ€“ enabled usability feedback loops before moving to high-fidelity design.

During the Zepto case study, my focus was to help users quickly add frequently purchased items without interrupting their primary shopping flow. This required wireframing a lightweight yet visible module that balanced utility with simplicity.

What I did:

1. Conducted competitor scans (Blinkit, Swiggy Instamart) to understand different ways of handling quick-add scenarios.
2. Brainstormed multiple layout patterns:
– Horizontal scrollable chip-style product cards at the top of homepage
– Static grid below the fold with 2-click add-to-cart
3. Sketched these ideas on paper to understand how elements like images, names, quantities, and pricing could be grouped efficiently.
4. Created low-fidelity wireframes in Figma for both mobile and tablet views.
5. Included:
– Product card layout with image, short name, price, and + button
– Badge overlays for offers or out-of-stock status
– Optional CTA to view all frequently purchased items
6. Tested layouts with peers and mock users to validate visibility and intuitiveness:
– Users preferred the top placement for faster access
– Some found the horizontal scroll easy to miss, so I added a label to draw attention
– Ensured tap target size met mobile accessibility guidelines

These wireframes helped catch early confusion around visual hierarchy and placement. It saved time before jumping into detailed UI styling and allowed quick changes based on user feedback.

Case Study: Zepto Project

Visual Reference:

Back
Projects
Blogs
Profile
Scroll to Top