Pide Directo's Point of Sale Redesing
A UX/UI Redesign and Web Development project.
Background
Pide Directo's point of sale (POS) application underwent a UX/UI redesign and web development project to address issues related to outdated visuals and usability challenges. The primary goals were to improve the aesthetics and graphics of the POS using UX/UI best practices and make the system responsive for a better user experience.
Design Process
Given the time constraints of the project, which allowed for a development timeline of just two weeks, extensive user research and analysis were not conducted. Instead, the focus was on upgrading the user interface (UI). The POS application primarily targeted individuals involved in restaurant sales and management.
Design Enhancements
To improve the UI, several design enhancements were implemented. The previous design relied heavily on solid lines to demarcate sections. In the redesign, these visual elements were removed, and a more subtle approach was adopted. By utilizing boxes and shadows, the division between different sections was clearly defined, creating a visually appealing and organized layout.
One particular area of improvement was the order selection layout. The previous design lacked clarity, and users often found it confusing. A new layout was implemented that provided a clear and intuitive way to select the type of order, resulting in a more user-friendly experience.
Another challenge addressed was the differentiation between products and categories. The previous design struggled to convey this distinction effectively, with the left section of the screen dedicated to categories. Through thoughtful UI and layout modifications, the redesign ensured a clear differentiation between products and categories, enhancing overall usability.
Order Type Section
Before
After
Menu Section
Before
After
Modifiers Section
Before
After
Payment Section
Before
After
Additionally, as the previous version lacked responsiveness, efforts were made to design and develop a mobile version that appeared native and provided an optimal experience on mobile devices. The mobile design incorporated cards placed at the bottom of the system, improving navigation and ease of use.
Web Development
The web development phase of the project involved using React.js and vanilla CSS technologies. As the sole designer and developer involved in the process, the focus was primarily on implementing the UI improvements within the given timeline. The project did not encounter significant development challenges due to its UI-centric nature and the limited timeframe.
Outcomes and Results
The UX/UI redesign and web development project resulted in a visually improved POS application. While formal user testing was not conducted due to time constraints, feedback from the internal team was overwhelmingly positive. The upgraded UI was praised for its enhanced aesthetics and usability compared to the previous version.
Despite the absence of user feedback at this stage, the redesign successfully addressed the visual and usability issues, adhering to UX/UI best practices. The improved visuals, optimized layouts, and responsive design aimed to provide a more engaging and efficient user experience for individuals involved in restaurant sales and management.
Overall, the project demonstrated the ability to rapidly implement UX/UI improvements and develop a responsive POS application within a tight timeframe.