iOrderFoods
Online Ordering Web App
UI UX Improvement
Responsibilities
User Flow Redesign
User Interface Design
Prototyping & Testing
Team
2 Designers
3 Developers
1 Product manager
iOrderfoods is an online ordering feature web app
for small business restaurants
Problems
Not optimized on mobile devices
Complex and confusing online order process
Goals
Redesign the interface for mobile
Build enjoyable and usable online order process
My Role
Lead UX/UI Designer
Redesign Scope and Priority
We determined to focus on improving the online order experience first, where users spend the most time completing orders.
Problem Statement
The Menu, Login, and Cart sections are combined into a single page on mobile because the original design was based on a desktop view. As a result, when you select an item and add it to the shopping cart, you cannot check it immediately. You have to scroll down to the bottom to check the cart and proceed with payment.
We received a lot of feedback from mobile users that they had difficulty determining if they had added items to the cart and how many items they had added.
User Interview
Pain Point
– Unsatisfactory experience of adding items, selecting menu preferences
– Complex payment flow and interfaces
– Design inconsistency leading to user fatigue
– Non-intuitive email notifications
Solution
● Develop an enjoyable and user-friendly online ordering process
● Establish a cohesive button system and streamline payment flows and interfaces
● Redesign confirmation email notifications
Button Guidelines
Created button styles and guidelines based on their importance and applied them across the entire UI to establish a consistent button system.
Intuitive Flow
To address the issue of having the menu, login, and my order (shopping cart) pages all on one screen, we separated the steps to guide users through tasks step-by-step, thereby reducing cognitive load.
Convenient Transition from Menu to Cart
By adding the [ View Order ] button, we created a path that can move from the menu page to the cart page at any time.
Menu Listing Style Redesign
The inconvenience of going through a two-tap process to add an item to the cart.
1) Tap on the menu 2) Add button appears out and you can add menu
We changed the entire menu bar to a button structure and incorporated a pop-up to choose preferences regardless of which menu section is selected. This resolved the issue in the old UI of needing to double-step to add menu items, resulting in a more intuitive design.
Preference Popup Redesign
Currently, there is no difference in the size of the titles or the style of the selection tool options, making it inconvenient and confusing to see. Additionally, there is no function to receive comments for additional detailed requests from customers, such as food allergies.
Adjusted the button and title sizes based on their importance and differentiated them by color. Additionally, we changed the current “*Choose 1 item” format to “Required / Optional” to facilitate more intuitive selection, resulting in a more user-friendly UI. Furthermore, we added a “Special Comment” feature to allow customers to provide detailed requests, such as food allergies.
Checkout Process Redesign
Order Confirmation Email Redesign
When an order is placed, an Order Confirmation email is sent to both the Restaurant Owner and the Customer. The current email design makes it difficult to quickly recognize what was ordered, whether it is for Pickup or Delivery, and the scheduled pickup/delivery time.
Order Confirmation_email
Pickup – for Customer
Order Confirmation_email
Delivery – Merchant
The design was revised to emphasize information delivery by using contrasting design styles and arranging elements according to the theme.
