Impact
Customer Satisfaction
Increased by 30%
Average Order Time
Reduced by 25%
User Engagement
Increased by 15%
Boosting Ordering Efficiency
Customers love the digital menu, and I’ve seen a noticeable boost in efficiency during peak hours.
Anonymous
Restaurant Manager
With traditional processes, restaurants often struggle to deliver a smooth ordering experience, from meal selection to paying their table. Orderiom introduced its first version of a QR-based ordering system to address this issue. However, the initial release lacked usability and flexibility needed for a seamless experience.
The v2 of the app focused on enhancing the end-to-end flow of ordering and payment, with a modern look.
Ordermood, the Kiosk, and the Order Manager are a part of an ecosystem for an end-to-end Gastronomy service. Feel free to read other case studies, as well.
Problem01: Navigation
Finding a specific meal in the v1 of OrderMood was a frustrating experience for many users. The entire menu was displayed on a single page, forcing users to scroll endlessly to locate their desired items. This cumbersome navigation not only slowed down the ordering process but also contributed to user frustration and a higher rate of abandoned orders. The need for an intuitive and segmented menu structure became clear to make ordering efficient and enjoyable.
Problem02: Lack of Customization & Flexibility
Every restaurant has its own unique needs, from different visual styles to varied payment flows. In v1, the digital menu was rigid, offering little room for customization. Some restaurants had photos for their meals, while others did not, and each had different requirements for how payments should be handled, such as cash at the table or flexible online options. These varying needs led to a cluttered user interface that was difficult to navigate, making it challenging for restaurant owners to truly tailor OrderMood to their specific requirements. A more modular approach to customization was necessary to cater to different restaurant environments effectively.
Problem03: Poor Navigation
On the old design, due to insufficient visual hierarchy, it was difficult for the users to navigate through the app. An example is lack of micro interactions and animations to figure out the steps. The other example is having delivery method, customer information, and checkout, all in one single page.
The old design from left to right: Splash, Meal menu, Selected items, Order review, Complete order
Approach
To effectively tackle the challenges identified in v1 of OrderMood, I took a hands-on, user-centered approach. By immersing ourselves in real restaurant environments, talking to stakeholders, and collaborating closely as a team, I gained a comprehensive understanding of the needs of both customers and restaurant owners.
Solution
To solve the navigation challenges faced in v1, I completely revamped the UI to provide an intuitive and delightful experience:
Giving structure to the menu items
Instead of presenting the entire menu in one long scroll, I segmented the menu into categories, each represented by filter chips. This allowed users to quickly identify sections (e.g., Starters, Main Courses, Drinks) and navigate directly to what they wanted.
I added horizontally scrollable chips for the menu items. Inside each item, there are sub-categories. For instance, inside lunch, there is Pizza, Pasta, Plates, etc.
Micro Interactions: From selecting order to checkout
I added micro-interactions to give users immediate visual feedback when interacting with menu items. These micro animations made the process of adding items to the order engaging and removed uncertainty about the actions taken.
I introduced modals for combo packages, simplifying the selection process for users who wanted to order set meals. The modal windows allowed customers to easily review and customize components of their combo, making the selection process clear and easy.
Breaking down the flow
In the old version, everything was congested in one page. The user had to click on each item to select it. It wasn't dynamic either. I broke down the flow and added illustrations and clear choices to increase delight and customer satisfaction.
Designing for scalability
I created a token-based design system that would cover different themes, customizable based on color, spacing, and typography.
Theming using Figma tokens.
I made sure that the users with from small to large screen sized could benefit the app.
Covering edge cases through audits
I created a token-based design system that would cover different themes, customizable based on color, spacing, and typography.
A sample of different cases for the meal items.
Impact
Customer Satisfaction
Increased by 30%
Improving navigation and real-time updates that made ordering easier, resulting in a smoother and more satisfying customer experience.
Average Order Time
Reduced by 25%
Increasing the willingness of the users to use the digital menu, stand alone, rather than waiting for the restaurants to deliver their order.
User Engagement
Increased by 15%
Enhancing interactions and segmented menus that kept users more engaged, encouraging them to explore and customize their orders.
Our redesigned v2 of OrderMood had a positive impact on both customer satisfaction and operational efficiency for restaurants.
