Project Overview
Paytronix provides end-to-end digital solutions for restaurants.
My role focused on improving the online food-ordering templates, with the goal of enhancing both visual quality (UI) and overall usability (UX).
Creative Process
1. Research: I explored Paytronix’s brand values, competitors, and target users to better understand the product context and industry expectations.
2. Testing: I reviewed the existing templates through multiple user scenarios to identify usability issues and friction points in the ordering flow.
3. Redefining: Based on testing insights, I restructured key user flows and refined the hierarchy and placement of UI elements to create a more intuitive experience.
4. Wireframing: These improvements were translated into wireframes that defined layout, structure, and interaction patterns.
5. User Inteface and Prototype: I designed a consistent and scalable UI system and built a clickable prototype. Supporting documentation explained design decisions, with before-and-after comparisons and scrolling behavior animations.
Results
The final outcome introduced a clearer and more consistent design system, including updated colors, styles, and component states.
Usability Improvements:
1. Order Initiation Prompt: Previously, users were prompted to start a new order immediately upon landing on the site.I redesigned this flow so users can freely browse the menu first. The order prompt now appears only after the first item is added to the cart, aligning better with natural user behavior and reducing pressure.
2. Navigation and Product Search: The navigation was simplified by removing unnecessary elements and reducing visual clutter.Search results were integrated directly into the current page instead of opening a separate view, making item discovery faster and more seamless. Menu links and the restaurant locations link were also repositioned to improve clarity and efficiency.
3. Product Popup and Order Customization: The product customization flow was redesigned to improve clarity and trust.The updated version clearly displays selected options, distinguishes free add-ons from paid ones, and provides transparent pricing for all customizations.
Conclusion
The project resulted in a functional UI prototype built in InVision, supported by detailed documentation covering user flows, scrolling behavior, and component states.Overall, the redesign delivers a more intuitive, visually consistent, and user-friendly online ordering experience for both customers and the business.
