Madero App - Madero Group

Problem

The Madero Group identified the need to revamp its restaurant application. In response to this demand, we proposed an initiative focused on restructuring the interface and optimizing user journey steps. The primary objective was to enhance the user experience by giving it a modern aesthetic that aligns with competitive market standards.

Confronted with an additional challenge, the Madero Group oversees various brands that coexist within the restaurant ecosystem from burguers to italian. In this context, the pursuit of a unified experience becomes imperative, eliminating the need for customers/users to engage with multiple distinct applications on their mobile devices.

⭐

Spoiler... See the final video that was delivered!

Process

The initial phase of the process involved a detailed analysis of the current application's flows and areas, assessing their present relevance. We identified which ones should be retained and which no longer aligned with the established objectives. We used Figjam to visually map these areas, presenting the results to stakeholders for validation. During this stage, new flows and functionalities were also discussed and incorporated, strategically aligned with the company's goals to provide an experience more in line with its objectives.

Solutions

The proposed solution initially involved revitalizing components. A central aspect of this strategy is the incorporation of recognizable visual elements, aiming to reduce cognitive load and leverage cognitive biases so that users can easily identify a renewed experience while maintaining complete familiarity.

Building upon the premises, colors, and brand identity of the Madero Group, a concise design system was conceptualized and implemented. This approach aims to provide the development team with greater scalability and long-term maintainability, ensuring visual consistency and operational efficiency over time.

As a delivery method, we carried out the detailed design of the screens in high fidelity using Figma, along with the development of a functional prototype version. This approach allowed developers to accurately understand how each component would function, ensuring precise alignment with the established design vision.

Here’s some screens: