Overview

"Collectyon" is a foundational software crafted by Baker Robotics, designed to facilitate the development of web applications tailored for data insights. These applications are highly adaptable, allowing for customization based on the client's preferences and priority areas of interest.

In a recent proposal for an Oxxo dashboard, we embarked on a transformative journey to enhance the web application's interface. Our goal was to retain the essential data visualization elements while ensuring a user-friendly experience. This involved the creation of an intuitive graphical system that enables swift comprehension of data. Simultaneously, we infused the entire user journey with the distinctive Oxxo brand experience, resulting in a seamlessly personalized and informative interface of how their machines were working each day to plan ahead maintenance review if needed.

Team

Camilo Montoya, UI/UX Designer.
Jose David Giraldo, Project Manger.

Overview

Oxxo, a ubiquitous chain of convenience stores in the Mexican market, plays a vital role in the daily lives of millions. Known for its accessibility and diverse offerings, Oxxo provides everything from snacks to financial services, making it an indispensable part of Mexican life. To ensure continued success, it's crucial for Oxxo to pay close attention to the maintenance of their machines, including those for food and beverage preparation.

These machines are central to the customer experience, and their proper functioning not only prevents disruptions and delays but also upholds food safety standards and product quality, reinforcing Oxxo's reputation as a trusted and reliable brand.

Collectyon serves as a valuable dashboard, enabling Oxxo to track machine performance throughout the day with pictures and data. This tool empowers them to plan maintenance services proactively, addressing potential issues before they impact operations, further enhancing the overall customer experience.

Objective

Redesign the user interface and the experience of Oxxo - Collectyon Dashboard.

Design Process

We began by dissecting the existing website's functionality. Through heuristic evaluation, we identified user pain points and opportunities to elevate the overall experience. We then collaborated with the client to develop a benchmark, a visual exploration of industry best practices and design trends. This benchmark informed the creation of a moodboard that captured the client's vision for a modern, light design aesthetic with a focus on prominent data visualizations for rapid information consumption.

Wireframes were then crafted to establish the layout, content placement, and navigation structure for key user flows, including reviewing graphs, filtering data, and analyzing store performance. With client approval on the interaction model, we meticulously crafted pixel-perfect mockups, incorporating a strategic color scheme, typography, and imagery that reflected the final visual language of the redesigned app and its user flows.

Finally, leveraging the user flows, we developed a functional prototype that allowed stakeholders to navigate the dashboard as if it were fully functional. This interactive prototype served multiple purposes, including fostering clear communication during presentations, facilitating user testing for valuable feedback, and providing a tangible visualization of the project's progress. Through this iterative process, we transformed the interface from a purely functional design into a well-considered and visually compelling dashboard experience that aligned with the client's vision and addressed user needs.

Impact

The project was efficiently completed within a span of two weeks, allowing ample time for client feedback and approval. The client expressed profound satisfaction with the prototype, noting its effectiveness in guiding the development team. This streamlined approach significantly expedited the creation of an enhanced web tool for the Oxxo dashboard proposal, reinforcing the project's success.

Learnings

While this isn't my first venture into data visualization, this experience has emphasized how even the smallest details profoundly influence the user experience within graphical elements, and how the establishment of a clear hierarchy plays a crucial role in facilitating data comprehension. Additionally, in the process of redesign, it becomes apparent that a comprehensive understanding of the initial design decisions is essential for proposing substantive changes, rather than superficial alterations to the overall layout.