Pide Directo Web Menu Redesign
Figma Designs
A UX/UI redesign and development project.
Background
The Pide Directo Web Menu Redesign project aimed to improve the user experience (UX) and user interface (UI) of the existing web menu. The primary motivation was to increase sales by addressing the UI issues, particularly on mobile devices, as a significant portion of customers accessed the platform through mobile.
The stakeholders involved in this project were the end customers and the participating restaurants.
User Research and Analysis
Due to time constraints, extensive user research could not be conducted. However, a benchmarking exercise was performed to understand industry standards and a moodboard was created to establish the desired UI direction.
User personas were not developed for this project.
Design Process
The design process involved evaluating the existing steps and refining them to enhance the overall UX. For example, the registration form was optimized by removing the email confirmation step. The design process emphasized making the UI intuitive and user-friendly.
Wireframing
Wireframes and mockups were created, focusing on a mobile-first approach while ensuring responsiveness for larger screens.
More than wireframes, these are a skeletons that represent the overall user interface and build a visual hierarchy.
UI Design and Visuals
The visual design of the user interface followed a mobile-first strategy. A visual hierarchy was established to create a sense of order and guide users' attention to key elements. Reusable components were created to maintain consistency throughout the interface.
The Rubik font was chosen to provide a modern and clean look.
Home Screen - The Menu
Product Page
Cart and Login Process
Order Details and Confirmation
Order Resume
Other Interactions
Responsive Views
Development and Implementation
The development phase utilized React.js for frontend changes. The emphasis was on making the UI changes and ensuring the usability of the final product. Testing was performed on different devices to ensure responsiveness and functionality. Although no user testings were conducted, quick iterations were made post-development to address any identified bugs.
Results and Impact
The project successfully delivered a visually appealing mobile-first UI, improving the overall user experience. Unfortunately, due to limitations, the direct impact on sales and checkout performance could not be measured. However, the refined UI and enhanced UX are expected to positively influence customer engagement and satisfaction.
Lessons Learned
The key takeaways from the project include the importance of building a mobile-first UI, considering the predominant usage of mobile devices. Additionally, insights were gained in building a seamless cart and checkout process. Conducting user testing could have provided valuable before-and-after comparisons and more insights. Consideration for incorporating animations to the website in the future was also noted.
This case study highlights the efforts made to improve the UX and UI of the Pide Directo Web Menu. Despite the limitations in research and testing, the project resulted in a more visually appealing and user-friendly interface, setting a foundation for potential future enhancements.