Wireframes
Creating Wireframes
Before jumping to high-fidelity, we explored layout options through wireframes to validate structure and navigation patterns.
The Pathao Food app faced several user experience issues, including unclear item visuals, inconsistent search functionality, confusing menu navigation, and a problematic order confirmation process. These challenges hindered user engagement and satisfaction, leading to friction in the browsing and ordering experience.
My Roles
Team
Junaed Numan (me), Abu Shahed (UX Researcher), PM, Engineering team and other stakeholders.
Interactive prototype — click to explore
Problem
The comprehensive redesign of Pathao Food's user interface significantly improved navigation, search functionality, and interaction, leading to a more seamless and engaging food ordering experience.
Revamped the review and ratings screen to ensure consistency with the app's design system, enhancing visual appeal and improving the overall usability.
Item customization options, like for pizzas and burgers, were made more intuitive and user-friendly, allowing users to easily personalize their orders.
Clarified the order confirmation screen, addressing user confusion around total bills and checkout details.
Design Audit
A systematic review of the existing interface revealed four key problem areas that were causing the most friction.
Poor visual contrast made key elements hard to distinguish. The cluttered category navigation required users to scroll back to the top to collapse sections, and the filter option was often overlooked.
The search screen didn't optimize screen space, discounts had unclear badge placement, and the "View Cart" label confused users. Notifications about order availability came too late.
The review section lacked design consistency, and ordered items were not shown with reviews, making it hard for users to connect feedback to their orders.
Address fields were unclear, the delivery location map feature was hidden, and the confirmation flow lacked polish, leading to confusion during checkout.
Wireframes
Before jumping to high-fidelity, we explored layout options through wireframes to validate structure and navigation patterns.
Success Metrics
Establish baseline data for each of the 8 tracked metrics to enable future comparison.
Evaluate changes against historical benchmarks to quantify improvement.
Continuously track metrics to catch regressions and guide future iterations.
8 Key Metrics Tracked
Final Solution
Transitioned from a bold red to a calming green. This shift improves the food ordering experience by creating a more soothing, inviting atmosphere that encourages browsing.
Updated the menu for smoother navigation, where selecting a category directly scrolls to the relevant item list — no more manual scrolling to find sections.
Added images to menu items, allowing users to easily order popular items without browsing the entire menu — reducing decision fatigue.
Improved the floating menu button's visibility and aesthetics with micro-interactions, boosting user engagement and discoverability of key actions.
Release Impact