Project Overview
A project for a company that offers end-to-end digital solutions for restaurant owners. My objective was to enhance the templates for online food ordering. The primary focus was on elevating both aesthetic appeal (UI) and user-friendliness (UX).
Creative Process
1. Research: Delving into the company's values, competitors, and target audience provided crucial insights into the brand and industry landscape.
2. Testing: I conducted a comprehensive analysis of the existing templates, going through various user stories and scenarios to identify usability issues.
3. Redefining: Insights gained from testing led to the restructuring of user flows, refining the prominence and arrangement of design elements for a more intuitive experience.
4. Wireframing: The insights from earlier phases were translated into wireframes, laying the groundwork for the visual elements.
5. User Inteface and Prototype: This phase involved crafting a consistent and user-friendly design system, culminating in a clickable prototype. An accompanying document detailed design changes, supported by before-and-after visuals and scroll behavior animations.
Results
In terms of interface design, a more coherent and consistent design system emerged, encompassing redefined colors, style, and element states.
For usability, user flows and user experience:
1. Order Initiation Prompt: A pivotal change was in the order initiation process. The original design had customers being prompted to start a new order as soon as they arrived at the website. To make the experience more user-centric, I restructured this flow. Now, customers can browse the menu without interruption. The prompt to start a new order activates only after they add their first item to the cart. This approach aligns more closely with natural user behavior, encouraging exploration and engagement without feeling rushed or pressured.
2. Navigation and Product Search: The project saw a significant overhaul of the navigation bar. The redesigned navigation simplifies user interaction by removing redundant or seldom-used elements, thereby decluttering the interface. The integration of product search results on the same page, rather than a separate one, enhances the user flow, making the process of finding and selecting items more intuitive and less time-consuming. Additionally, I made strategic changes to the menu link placements and adjusted the Restaurant Locations link, optimizing the overall navigation for greater customer convenience and efficiency.
3. Product Popup and Order Customization: The product customization process was another area of focus. The previous iteration of this feature was not as user-friendly as it could have been, with some options potentially causing confusion among users. The revamped design addressed these issues, ensuring transparency and clarity in the customization process. It now effectively showcases the selected options, clearly indicates which add-ons are free, and provides detailed cost information for paid additions. This transparency helps in building customer trust and satisfaction.
Conclusion
The project culminated in a functional UI prototype using InVision. Accompanying documentation comprehensively outlined the proposed user flows, various scrolling behaviors, UI elements, and their diverse states. The result is an enhanced online food ordering experience that seamlessly integrates aesthetics and usability for both the client and end-users.
