ambev

Case Study: Elevating User Experience in AB InBev's Tada & Zé Delivery Apps

Introduction

As a Product Designer, I had the opportunity to contribute to enhancing the user experience of two key AB InBev applications: Tada and Zé Delivery. This case study outlines the product design process behind the implementation of two crucial features: Confirmation Code and Out-of-Stock Product Substitution. These features aimed to improve security, streamline the ordering process, and ultimately increase user satisfaction.

Project Goals

  • Confirmation Code: Enhance account security and prevent unauthorized access.
  • Out-of-Stock Product Substitution: Provide a seamless and user-friendly way for customers to choose alternative products when their initial selection is unavailable, minimizing order cancellations and improving the overall shopping experience.

Design Process

For both features, I followed a user-centered design approach, encompassing the following key stages:

  1. Understanding the Problem & User Research
    • Stakeholder Interviews: I collaborated with product managers, engineering teams, and customer support to understand the business objectives, technical constraints, and existing pain points related to account security and out-of-stock scenarios.
    • User Feedback Analysis: I reviewed existing user feedback, support tickets, and app store reviews to identify common frustrations and areas for improvement related to security and product availability.
    • Competitive Analysis: I analyzed how similar e-commerce and delivery platforms handled account verification and product substitutions to identify best practices and potential innovative solutions.
  2. Defining User Needs & Design Principles

    Based on the research, I defined the core user needs for each feature:

    • Confirmation Code:
      • Security: Users need a reliable and straightforward way to verify their account and prevent unauthorized access.
      • Efficiency: The verification process should be quick and not disrupt the user flow.
      • Clarity: Instructions for the confirmation code process should be clear and easy to understand.
    • Out-of-Stock Product Substitution:
      • Transparency: Users need to be informed promptly when a product is out of stock.
      • Choice: Users should have relevant and convenient options for substitute products.
      • Control: Users should have the final say in accepting or rejecting substitutions.
      • Efficiency: The substitution process should be integrated seamlessly into the ordering flow.

    I established the following design principles to guide the design process:

    • User-Centricity: Prioritize user needs and ensure a smooth and intuitive experience.
    • Clarity & Transparency: Provide clear information and avoid ambiguity.
    • Efficiency & Simplicity: Streamline processes and minimize user effort.
    • Consistency: Maintain a consistent design language across both apps.
  3. Ideation & Wireframing
    • Confirmation Code: I explored various methods for implementing the confirmation code, including SMS, email, and in-app notifications. I then created low-fidelity wireframes to visualize the user flow for each method, focusing on ease of use and clear communication of the verification steps.
    • Out-of-Stock Product Substitution: I brainstormed different approaches for presenting substitution options, considering factors like product similarity, price, and user preferences. I developed wireframes illustrating different stages of the substitution process, such as notification of unavailability, presentation of alternatives, and user confirmation.
  4. Prototyping & User Testing
    • High-Fidelity Prototypes: Based on the refined wireframes, I created interactive high-fidelity prototypes using Figma. These prototypes closely resembled the final UI and allowed for realistic user testing.
    • Usability Testing: I conducted usability testing sessions with target users for both Tada and Zé Delivery. Participants were asked to complete specific tasks related to account verification and product substitution while I observed their behavior and gathered feedback.
    • Iterative Design: The feedback from user testing was invaluable in identifying usability issues and areas for improvement. I iterated on the designs based on these insights, refining the user flows, UI elements, and information architecture.
  5. Visual Design & UI Specifications
    • UI Design: I applied the existing design systems of Tada and Zé Delivery to the final designs, ensuring visual consistency and brand alignment. I paid close attention to typography, color palettes, and iconography to create an engaging and accessible user interface.
    • UI Specifications: I created detailed UI specifications for the development team, including screen flows, component specifications, and interaction guidelines, to ensure accurate implementation of the designs.

Feature Breakdown

A. Confirmation Code

  • Implementation: An SMS-based confirmation code was chosen for its widespread accessibility and reliability.
  • User Flow:
    1. Upon account creation or during a sensitive action (e.g., changing personal information), the user is prompted to enter their phone number.
    2. A unique confirmation code is sent via SMS to the provided number.
    3. The user enters the code in the app to verify their identity.
    4. Upon successful verification, the user can proceed.
  • Key Design Considerations:
    • Clear and concise instructions for receiving and entering the code.
    • Visual cues to indicate the status of the verification process.
    • Error handling for incorrect code entries and resend options.
    • Security considerations to prevent abuse and ensure code validity.

B. Out-of-Stock Product Substitution

  • Implementation: A proactive substitution flow was implemented to address out-of-stock items during the ordering process.
  • User Flow:
    1. If a selected product is found to be out of stock, the user is notified on the cart or checkout page.
    2. Relevant substitution options are presented, categorized by similarity (e.g., same brand, similar product type, different size).
    3. Each substitution option displays key information such as name, price, and potentially user ratings or reviews.
    4. The user can choose to accept a substitution, reject it (leading to removal from the cart), or view more options.
    5. If a substitution is accepted, the cart is updated accordingly.
  • Key Design Considerations:
    • Clear visual indication of the out-of-stock item.
    • Intelligent algorithms to suggest relevant and appealing substitutions.
    • Clear presentation of substitution options with essential information.
    • Easy comparison between the original item and the suggested alternatives.
    • User control over accepting or rejecting substitutions.
    • Handling scenarios where no suitable substitutions are available.

Outcomes & Impact

While specific quantitative data may be proprietary, the implementation of these features resulted in significant qualitative improvements:

  • Enhanced Security: The confirmation code feature provided an added layer of security, reducing the risk of unauthorized account access and increasing user trust.
  • Improved User Experience: The out-of-stock substitution feature streamlined the ordering process, minimized frustration caused by unavailable items, and reduced order cancellations.
  • Increased Customer Satisfaction: By providing users with more control and transparency, both features contributed to a more positive and satisfying overall experience with the Tada and Zé Delivery apps.

Lessons Learned

  • Early User Involvement is Crucial: Conducting thorough user research and usability testing early in the design process is essential for identifying potential issues and ensuring user needs are met.
  • Collaboration is Key: Effective communication and collaboration with stakeholders, including product managers and engineers, are vital for successful product development.
  • Iterative Design Leads to Better Outcomes: Embracing an iterative design approach allows for continuous improvement based on user feedback and data.

Conclusion

The implementation of the Confirmation Code and Out-of-Stock Product Substitution features in the Tada and Zé Delivery apps demonstrates the impact of user-centered design in addressing key user needs and improving the overall product experience. By focusing on security, transparency, and user control, these features contributed to more secure, efficient, and satisfying interactions for AB InBev's customers. This experience has further reinforced my understanding of the importance of a thoughtful and iterative design process in creating impactful digital products.