Web menu redesign banner

Pide Directo Web Menu Redesign

Figma Designs

A UX/UI redesign and development project.


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.


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.

Wireframe 1 Wireframe 2 Wireframe 3

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

Mobile Design1

Product Page

Mobile Design2

Cart and Login Process

Mobile Design3

Order Details and Confirmation

Mobile Design4

Order Resume

Mobile Design5

Other Interactions

Mobile Design6

Responsive Views

Desktop Design Desktop Design2 Desktop Design3

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.