1. Introduction
To enhance the Zepto app by introducing a user-friendly feature that allows customers to effortlessly add entire pre-made shopping lists to their cart with a single click. This feature aims to streamline the shopping experience by bundling frequently purchased items into themed lists, thereby reducing the time and effort required for users to manually search for and add individual items to their cart. By providing curated shopping lists that cater to common needs and occasions, we seek to improve user satisfaction, increase engagement, and drive higher conversion rates. This objective includes ensuring the new feature is seamlessly integrated into the existing app interface, maintains consistency with the overall design language, and delivers a smooth, intuitive user experience.
About Zepto
- Zepto is a mobile app designed to enhance the grocery shopping experience by offering quick, convenient, and reliable service. Users can browse products, create shopping lists, and have items delivered to their doorstep.
User Pain Point
- Users often spend excessive time searching for and adding frequently bought items individually to their carts, leading to a cumbersome shopping experience.
2. Project Overview - Feature Description
Adding entire pre-made shopping lists to the cart with one click:
This feature allows users to quickly add a curated selection of items to their shopping cart without having to search for and add each item individually. Pre-made shopping lists are grouped by themes or frequent purchase patterns (e.g., “Baby Care Essentials,” “Morning Rush,” “Movie Night Munchies”). Each list is designed to meet specific needs or occasions, making the shopping experience more convenient and efficient for users.
Purpose
To simplify the shopping process by bundling frequently bought items: The main goal of this feature is to reduce the time and effort users spend on grocery shopping. By providing pre-made shopping lists, users can quickly add all necessary items for specific needs or occasions with just one click. This convenience encourages users to shop more frequently and enhances their overall experience with the app. Additionally, bundling items together can introduce users to products they might not have thought to purchase individually, potentially increasing sales and user engagement.
Scope
Enhancements to the home screen, pre-made shopping list cards, and a detailed shopping list page:
- Home Screen Enhancements:
- Placement: The pre-made shopping lists feature will be prominently placed above the “Your Favorite Picks” section and below the “Offers” carousel.
- Heading: Labeled as “Quick Add” for easy recognition and access.
- Pre-made Shopping List Cards:
- Design: Each card includes an image/icon, title, brief description, number of items, item details, total price, and an “Add All to Cart” button.
- Interactions: Cards can be expanded with a “See More” option and clicked to navigate to a detailed shopping list page.
- Detailed Shopping List Page:
- Layout: Displays a header, back button, item details, and a real-time updating summary of total items and cost.
- Editing Functionality: Users can edit item quantities, delete items, and add new items. Changes can be saved with a confirmation message.
- Actions: Includes a “Save Changes” button and an “Add All to Cart” button to add the entire list to the cart with one click.
These enhancements aim to provide a seamless and efficient shopping experience by making it easy to add pre-made lists to the cart and manage shopping lists effectively.
3. Research and Insights
User Research
Surveys and Interviews:
We conducted surveys and interviews with a group of users of the Zepto app to gather insights on their shopping habits and preferences.
Key Findings
- 70% of users frequently purchase the same set of items.
- 65% expressed interest in a feature that could save time by bundling frequently bought items.
Secondary Research
Competitive Analysis:
Analyzed similar features in apps like Amazon Fresh, Instacart, and Blinkit to understand their design processes and best practices for usability and design.
Key Observations:
- Amazon Fresh: Effective use of pre-made lists with clear item details and seamless integration into the cart.
- Instacart: User-friendly interface with expandable and collapsible list options.
- Blinkit: Efficient design and easy navigation for adding bundled items to the cart.
4. Design Process
Initial Brainstorming
- Sessions: Conducted brainstorming sessions to generate ideas focused on user convenience and seamless integration with the existing app design.
- Focus Areas: Ease of use, quick access to frequently bought items, and consistent user experience across the app.
Secondary Research and Competitive Analysis
- Analysis: Examined similar features in Amazon Fresh, Instacart, and Blinkit to understand their design processes and identify best practices.
- Amazon Fresh: Effective use of pre-made lists with clear item details.
- Instacart: User-friendly interface with expandable and collapsible lists.
- Blinkit: Efficient design and easy navigation for adding bundled items.
Ideation and User Flow Mapping
- Ideation: Incorporated insights from competitive analysis into wireframes, ensuring a user-centered design.
- User Flow: Mapped the user flow from discovering a pre-made list to adding items to the cart, ensuring a smooth and intuitive process.
Wireframing - Key Components**
- Home Screen Placement: Positioned the pre-made shopping lists feature prominently above the “Your Favorite Picks” section and below the “Offers” carousel for high visibility.
- Pre-made Shopping List Cards: Designed cards featuring images/icons, titles, descriptions, number of items, individual item details, total price, and a clear “Add All to Cart” button.
- Shopping List Detail Page: Developed a detailed page layout with comprehensive item details, editing functionality, and real-time summary updates.
Prototyping
- High-Fidelity Prototype: Developed a high-fidelity prototype based on feedback from initial wireframes.
- Integration: Ensured the prototype included all key interactions and functionalities, such as expanding/collapsing lists, editing items, and adding lists to the cart.
- Consistency: Refined the user interface for consistency with the overall app design.
Feedback and Iteration
- User and Stakeholder Feedback: Gathered feedback from users through usability testing and review sessions.
- Iterations: Made several iterations to improve the design and functionality based on feedback, focusing on enhancing user satisfaction and ease of use.
By following this comprehensive design process, we ensured that the new feature was user-centered, intuitive, and effectively addressed the identified user needs and preferences.
5. Design Details
Home Screen Integration:
- Placement: The feature is prominently placed above the “Your Favorite Picks” section and below the “Offers” carousel to ensure high visibility.
- Visibility: The heading “Quick Add” is used to draw attention.
Pre-made Shopping List Cards:
- Design: Each card includes an appealing image/icon, title, brief description, number of items, individual item details, total price, and a clear “Add All to Cart” button.
- Interaction: Users can expand or collapse the list with a “See More” option and navigate to the “Shopping List Detail Page” by clicking on the card.
Shopping List Detail Page:
- Layout: Features a header with the list title, a back button, clearly displayed items with names, quantities, prices, and small icons.
- Editing Functionality: Users can edit item quantities with ‘+’ and ‘-’ buttons, delete items with a trash can icon, and add new items with an ‘Add Item’ button.
- Real-time Updates: The summary of items and total cost updates in real-time as changes are made.
- Save Changes and Add to Cart: Buttons for saving changes and adding all items to the cart, with a confirmation message “Your list has been updated” upon saving.
Error Handling:
- Design: Clear, non-disruptive error messages for issues like out-of-stock items, e.g., “Item XYZ is currently out of stock. Try adding the list again later.”
- User Guidance: Messages guide users on how to rectify errors.
User Feedback:
- Consistency: Ensured consistent feedback throughout the app for user actions, such as animations and confirmation messages.
6. Final Project
Please see below for the Prototype from Figma.
7. Lessons Learned
- Challenges: Faced challenges with ensuring real-time updates and handling out-of-stock items gracefully. Overcame these by implementing robust error handling and feedback mechanisms.
- Team Collaboration: The project highlighted the importance of effective communication and collaboration among team members, ensuring everyone was aligned with the project goals.
- Future Improvements: Potential improvements include adding personalized pre-made lists based on user purchase history and further optimizing the UI for better user experience.
8. Conclusion
- Summary: The project successfully met its objective of simplifying the shopping process for Zepto users by allowing them to add entire pre-made shopping lists to their cart with a single click.
- Final Thoughts: The project was a valuable learning experience, enhancing our skills in user-centered design, technical implementation, and team collaboration. The positive user feedback and business impact underscored the value of the new feature.