In today’s digital age, online food ordering has become an integral part of our dining experience. Vendo, the leading company in Iran specializing in exclusive online sales platforms for restaurants, recognizes the importance of providing a seamless and efficient checkout process. This case study explores the redesign of Vendo’s checkout page to enhance the user experience, reduce user drop-offs, and increase the conversion rate, ultimately driving higher customer satisfaction and sales.
:Introduction
As a product designer, I led the redesign project for the checkout page. My responsibilities included conducting user research, defining the user experience (UX) and user interface (UI) design, and ensuring the new design addressed the identified problems. My expertise in UX/UI design allowed me to create a solution that enhances the overall user experience and meets the business objectives of our clients.
:My Role
The existing checkout page at Vendo had several critical issues. Readability and accessibility problems caused users to miss parts of the checkout process, resulting in incorrect orders. These issues led to higher user drop-offs and a lower conversion rate. Additionally, the UI design was outdated and did not align with modern aesthetics.
:Problem
To understand the intricacies of user behavior and preferences for Vendo’s checkout process, we employed a combination of interviews and usability testing. These methods provided deep insights into the frustrations and desires of both restaurant owners and customers, guiding our design decisions to ensure a user-centric approach.
We began with usability testing, observing a group of users interacting with the current checkout page. This firsthand observation allowed us to pinpoint specific issues and areas for improvement. We identified where users encountered difficulties, which steps caused confusion, and how they navigated through the checkout process.
In addition to usability testing, we conducted interviews with various stakeholders, including restaurant owners, customer care representatives, and sales team members. These interviews were tailored to elicit insights specific to each group’s experiences and perspectives. Sample questions included:
By merging qualitative insights from interviews with quantitative data derived from usability testing, we developed a comprehensive understanding of user needs and pain points. This integrated approach served as the foundation for subsequent design decisions aimed at addressing existing challenges and enhancing the overall user experience on Vendo’s checkout page.
:Research
Through our research and usability testing, we identified several key user needs and problems with Vendo’s existing checkout page:
- Hierarchy Issues: The hierarchy of sections led users to overlook or forget some of them. For instance, the “Add Note” section was placed first. Upon entering the checkout page, users focused on more critical tasks like selecting the delivery type and address and ultimately forgetting to add a note.
- Excessive Clicks: Users had to click on and select almost all options, resulting in a high number of clicks and a longer flow.
- Mobile Order Review Challenges: On the mobile version, users found it challenging to double-check their order list easily, leading to errors in order registration.
- Low Readability: Low readability negatively impacted the user experience. For example, addresses were displayed in a bullet list format, which became problematic when there were many addresses.
- Mobile Scrolling Issues: In the mobile version, the list and vertical display of items not only lowered readability but also required excessive scrolling.
- Usability of Wallet and Customer Club Sections: The usability of the wallet and customer club sections was inadequate and complex.
- Lack of QR Code Functionality: There was a lack of functionality for scanning QR codes and placing dine-in orders, which restaurants needed.
- Outdated User Interface: The user interface was outdated and did not align with current design trends.
These insights helped us understand our users’ pain points, guiding the direction for redesigning the checkout page to improve usability, readability, and overall user experience.
:Define
Once we defined the main problems, we held three brainstorming sessions over a week. Each session generated a wide array of ideas to tackle the identified challenges. The design directions we considered were:
Ideas Implemented in the Prototype:
- Reorganized Section Hierarchy:
We prioritized selecting the delivery type and address early in the process, moving less critical sections like “Add Note” to later stages. This adjustment aimed to streamline the user flow and reduce errors.
- Enhanced Readability:
Improved fonts, spacing, and intuitive formats for information like addresses to make it more accessible and reduce user errors. - Integrated Boxes with Icons:
Replaced traditional radio buttons with integrated boxes and icons for better readability and usability.
- Redesigned Item Displays:
Aligned item displays and interactive elements with current design trends for a more engaging user experience. - Horizontal View for Selected Items:
Changed the list view of selected items to a horizontal layout to reduce scrolling and improve navigation, especially on mobile devices. - Smart Defaults and Auto-Selection:
Introduced features like pre-selecting common options to minimize clicks and expedite the ordering process. - Checkbox for Rules and Regulations:
Replaced the checkbox with a note under the order confirmation button to reduce interactions and clarify terms acceptance. - Improved Address Display:
Showed only the selected address initially, using a modal for the full list to reduce clutter and improve navigation. - Redesigned Pick-Up Details:
Removed the map preview to reduce scrolling and streamline the interface. - Wallet and Customer Loyalty Integration:
Simplified and integrated these sections into the checkout flow for better visibility and usability. - Dark Mode:
Introduced a dark mode option to enhance visual appeal and comfort in low-light environments. - QR Code Functionality:
Added QR code scanning to streamline dine-in orders and improve efficiency. Order Details Section:
Added a section for order items, prices, and invoice details in the final checkout stage for a clear summary before purchase.
Ideas Not Implemented in the Prototype:
- Preview of shopping cart items in the first checkout section on mobile.
- Step-by-step checkout process with a progress stepper.
- Default selection of “By Delivery” with a modal for changing the method.
- Collapsible list of addresses.
:Ideate and Prototype
After developing the prototype based on our design solutions, we conducted several rounds of usability testing to ensure the changes effectively addressed the identified problems and met user needs.
Task Scenario:
All participants were asked to complete the entire checkout process, including selecting delivery options, choosing payment methods, finishing an order, and interacting with the redesigned user interface.
Summary:
Total Participants: 9
- Gender Breakdown: 5 Women, 4 Men
- Age Range: 25-42
- Average Task Completion Time: 2.38 minutes
- Successful Task Completion Rate: 78%
By analyzing this data, we identified areas for further refinement, ensuring our prototype effectively met user needs and improved overall satisfaction with the platform.
:Test
We gathered data and monitored user behavior over two months. The results show significant progress, summarized in four key points:
- A 6% increase in orders for featured menu items and a 5% rise in overall menu sales.
- A notable 62% surge in conversion rates.
- A substantial 28% reduction in user inquiries and support calls.
- A 12% increase in sales of our platform to restaurant owners.
Additionally, stakeholders and restaurant owners provided positive feedback on the enhancements.
:Results
The redesigned checkout process has shown promising results, with an 78% task completion rate during usability testing. User drop-offs have decreased, and order accuracy has improved significantly. These findings highlight the effectiveness of our design solutions in enhancing usability and user satisfaction. Moving forward, ongoing iteration based on user feedback will continue to optimize our platform’s performance and user experience.