In the fast-paced world of online food ordering, providing a pleasant and efficient experience for restaurant owners and customers is paramount. Vendo is a pioneering force in the realm of online food services in Iran, offering restaurants a comprehensive platform to enhance their digital presence and streamline online sales. This case study overviews the redesign project undertaken by Vendo, aimed at enhancing the ordering flow and menu experience through the introduction of “Compact Menu.” By offering a streamlined alternative to the traditional ordering process, Vendo sought to optimize user experience while catering to the diverse needs of restaurant owners and online food enthusiasts.
:Introduction
As a product designer, I led the redesign initiative for the ordering menu, dubbed “Compact Menu.” My role encompassed conceptualizing, prototyping, and refining the new design to align with our objectives.
:My Role
The existing ordering flow presented significant challenges for both restaurant owners and users. Accessibility issues, especially with extensive menus, hindered the user experience. Additionally, the user flow lacked efficiency, impeding order completion. The outdated and cliché user interface, unchanged for years, failed to meet evolving design standards. Furthermore, the absence of a highly demanded dark mode feature left stakeholders dissatisfied. Recognizing the urgent need for improvement, Vendo aimed to revolutionize the online ordering landscape by addressing these critical pain points.
:Problem
Through a combination of user interviews, surveys, and usability testing, we stepped into the intricacies of user behavior and preferences. Insights gleaned from this research phase illuminated the frustrations and desires of both restaurant owners and customers, guiding our design decisions and ensuring a user-centric approach.
To thoroughly grasp the challenges faced by stakeholders and users within Vendo’s online food ordering platform, I conducted interviews with a diverse array of individuals, including restaurant owners, customer care representatives, and members of the sales team. Through these interviews, I tailored my inquiries to elicit insights specific to each group’s experiences and perspectives. Sample questions included:
Additionally, I harnessed website heatmaps and scrutinized users’ online behaviors to extract quantitative insights into their interactions with the current ordering interface. Analyzing this data allowed for the identification of patterns and trends in user engagement, offering valuable guidance for potential optimizations.
By merging qualitative insights from stakeholder interviews with quantitative data derived from website analytics, a holistic understanding of user needs and pain points was attained. This comprehensive comprehension served as the cornerstone for subsequent design decisions, aimed at soothing existing challenges and enhancing the overall user experience on the Vendo platform.
:Research
From our analysis and research, we identified the following user needs and problems:
- Multiple Wrong Orderings by Users: Customer service reports indicated that users frequently made errors while placing orders, especially with items that had multiple sizes and toppings, leading to incorrect deliveries and customer dissatisfaction.
- High Rates of User Drops: Significant drop-off rates in the ordering menu indicated a need for a more seamless and engaging user flow.
- Unfunctional Menu and Challenges in Finding Preferable Categories and Items: Reports showed that some categories and items were not easily visible to users, resulting in unusually low sales rates.
- Increasing Tendency Among Users Toward Competitors: Users were increasingly turning to competitor platforms, which offered a modern, trendy user interface that our platform lacked.
- Unpractical User Profile: The user profile tab, especially the wallet section, was not interactive enough and needed improvement.
- Lack of Dark Mode: There was a high demand for a dark mode version, which was not available, affecting user satisfaction.
:Define
After defining the main problems, we conducted four brainstorming sessions over a week. Each session focused on generating a diverse range of ideas to address the identified challenges. The design directions we considered were:
Some Ideas that Popped Out:
- Implement a collapsible category tab, allowing users to show or hide all categories with one click.
- Introduce a vertical category tab to enhance accessibility.
- Provide guiding visual hints in the ordering menu.
- Change item pictures when hovering over them.
- Move multi-size options from the item’s modal to the initial view on the desktop.
- Redesign item cards for better visibility and usability.
- Provide placements for banners to support marketing goals.
- Modernize the user interface with a clean, contemporary design, updated typography, improved color schemes, and a dark mode version to make the platform more appealing and meet user demand.
- Add a chatbot floating action button (FAB) for constant support to prevent potential challenges.
- Redesign the user profile tab with enhanced interactivity, focusing on the wallet section by prominently displaying the credit balance and providing a button that leads to a page for wallet charging and transaction history.
- Expand the item’s card when users add a multi-size item or an item with toppings, showing a preview with the option to add more of the specific selection.
* The adopted ideas are highlighted in color.
By focusing on these key concepts, we aimed to develop prototypes that could be tested and refined to ensure they effectively meet the needs of our users and stakeholders.
:Ideate
With a clear direction from our brainstorming sessions, we focused on translating the most impactful ideas into actionable design solutions. Our primary objective was to address the key problems identified during the research phase and create a more user-friendly and visually appealing platform.
Approved Design Solutions:
- Vertical Category Tab: For better accessibility of all categories with minimal need for clicks or scrolling, we decided to redesign this section. Among the ideas, we found the vertical arrangement of categories more suitable than a collapsible tab because, on the desktop version, users can see all categories without any clicks and with minimal scrolling, making it easier to access the desired category.
- Multi-Size Options on Initial View:
We streamlined the selection process by moving multi-size options from the item’s modal to the initial view on the desktop. Users can now see and choose different sizes directly from the main menu, reducing the steps needed to complete an order.
- Redesigned Item Cards:
Item cards were redesigned for better visibility and usability. The new design emphasizes both images and descriptions, features clearer typography, and offers a more organized layout, making it easier for users to find and select their desired items quickly. Additionally, card sizes were reconsidered to enhance accessibility on mobile devices.
- Modernized User Interface:
We overhauled the user interface with a sleek, contemporary design. This involved redesigning all components and modals, enhancing typography for readability, optimizing color schemes for visual coherence, and introducing a dark mode. These improvements were aimed at elevating the overall user experience and addressing the strong demand for a dark mode option.
- Interactive User Profile Tab:
The user profile tab was redesigned with enhanced interactivity, focusing on the wallet section. We prominently displayed the credit balance and added a button that leads to a dedicated page for wallet charging and transaction history. This redesign aimed to make it easier for users to manage their profiles and finances, and, of course, encourage them to charge their wallets.
- Expandable Item Cards for Multi-Size Items and Toppings:
When users add a multi-size item or an item with toppings, the item’s card now expands to show a preview. This preview includes the option to add more of the specific selection, helping to prevent ordering errors and improve the overall experience.
:Prototype
We conducted usability testing to evaluate the redesigned features of Vendo. A group of 9 participants, comprising 4 women and 5 men, participated in the testing sessions. The tests were conducted remotely in one day. Each participant was given the same task scenario to perform using the prototype.
Task Scenario:
Order a multi-size pizza with two toppings of your choice. Ensure to view the item details, select the desired sizes and toppings, and proceed to checkout.
Summary:
- Total Participants: 9
- Gender Breakdown: 4 Women, 5 Men
- Age Range: 27-40
- Average Task Completion Time: 1 min 37 sec
- Successful Task Completion Rate: 67%
:Test
We gathered data and monitored user behavior over two months. The results show significant progress, summarized in four key points:
- A 5% increase in sales of popular menu items and a 4% increase in overall menu sales.
- A significant 47% increase in conversion rate.
- A 12% reduction in user support calls.
- A 58% increase in sales of the Vendo product to restaurant owners.
Additionally, we received other positive feedback from stakeholders and restaurant owners.