MiBarr.io: Designing a Hyperlocal Hub for Mexico City with a Unique AI-Powered Process

MiBarr.io - Community app
COMPANY

MiBarr.io

ROLE

UX, UI

EXPERTISE

YEAR

2025

Project Goal

To design and develop a web application for Mexico City that connects local businesses, services, and community initiatives, making them easily discoverable and accessible, with a strong emphasis on low-tech accessibility for both vendors and users.

The Challenge

The core mission was to empower small, local businesses often overlooked by mainstream platforms and to foster stronger community connections. A foundational principle was low-tech accessibility, aiming for ease of use for non-tech-savvy vendors and straightforward customer interactions. This led to key choices like a web app for broader device compatibility and leveraging WhatsApp for order communications, aligning with existing user behaviors in Mexico.

A significant design challenge was creating an intuitive backend system for individuals, event organizers, and one-off vendors to easily add their listings, ensuring this information was easily discoverable on the front end. This included designing for businesses with limited online presence—from local taco stands to family-run talavería shops—to help them get online and increase sales through accessible solutions.

The Solution

My solution involved a multi-faceted approach, combining innovative AI collaboration, a scalable design system, culturally authentic branding, and strategically designed key features to address the challenges of accessibility, discoverability, and local business empowerment.


The beginning of the process: conversation and planning with my custom Gem

My Role and Process

As the lead UX/UI and Product Designer, I stewarded the MiBarr.io project from an initial backend concept to a nearly complete, functional product. My process was augmented by a unique collaboration with a custom-trained Gemini AI, the "Mi Barrio Design Bot."  

  • AI Collaboration: This partnership went beyond simple task execution; the bot explained the 'why' behind solutions, referencing best practices from Nielsen Norman Group and WCAG, which was crucial for my continuous learning. For instance, when designing the "Haz Barrio" section, I proposed a floating action button for adding new events. My AI partner provided specific suggestions and explained the usability implications and best practices for each, leading to an informed decision to use the floating button for its distinct prominence in this unique flow. This collaboration dramatically increased efficiency, allowing faster progression to robust wireframes.  


  • Design System Development: From the outset, I developed a comprehensive design system grounded in Atomic Design Principles for scalability and consistency, streamlining developer handoff and emphasizing simplicity and reusability.  


  • Authentic Brand Identity: I immersed myself in Mexico City's local culture, specifically Rotulo hand-painted lettering, taking a painting class to learn its nuances. I then meticulously hand-painted each letter, traced them in Figma, and used Calligraphr.com to create a custom, usable font for the logo. This ensures an instantly recognizable, authentically local feel.  


  • User-Centric Design: I focused on designing intuitive user flows and interfaces for key features, always prioritizing low-tech accessibility and alignment with existing user behaviors in Mexico City.

Discussing and wireframing the Filters panel with AI

Key Takeaways

This project reinforced the power of unique collaborative models (like AI partnership) in accelerating design processes and enhancing learning. It solidified my ability to deeply integrate cultural authenticity into branding and to prioritize practical, low-tech accessibility for diverse user bases, especially in emerging markets.

Key Features of the Design System

  • Atomic Design Principles for scalability and consistency.  

  • Defined color palette and typography scale.  

  • Reusable and versatile components (e.g., card system, "slide-up info card").  

  • Streamlined for efficient developer handoff.  


Deliverables

  • Comprehensive Design System library within Figma.  

  • Custom Rotulo-inspired typeface.

  • User flow diagrams (e.g., "Haz Barrio" flow).

  • Interactive prototypes in Figma.  


Collaboration

I collaborated closely with a custom-trained Gemini AI, the "Mi Barrio Design Bot," for iterative feedback and insights based on UX best practices. I also worked with developers, ensuring seamless integration of design elements and AI-driven solutions.  

Mid Fidelity of the Haz Barrio flow, built and collaborated with Gemini AI


And then the high fidelity screens - all built in record time by utilizing Gemini 2.5


Challenges Faced

The primary challenge was designing a robust yet intuitive backend system for varied types of listings (people, events, one-offs) that could be easily digestible on the front end by users. Ensuring low-tech accessibility for vendors with limited digital literacy while maintaining a modern, engaging user experience was a constant balancing act.

Measuring Success

Success will be measured by the platform's adoption by local businesses and users, leading to increased online presence for small vendors, fostered community connections, and ultimately, enhanced sales and engagement through accessible, user-friendly interactions.


Outcome & Impact

Bringing MiBarr.io from concept to near-reality has been incredibly rewarding. The project demonstrates how design can bridge technology and community needs. The unwavering focus on accessibility - not just WCAG guidelines, but also ensuring approachable technology for target users - was our guiding principle. This project, particularly the AI design partnership, deeply reinforced my commitment to continuous learning and understanding the 'why' behind design choices.  

While specific live metrics are pending launch, we anticipate the map-centric design will drive more traffic to both our app and associated local listings by providing a visual, location-based discovery experience currently lacking in other local event platforms. The platform is designed to help local businesses that may not have much online presence due to various factors, increasing their online visibility and potential sales through low-tech solutions like WhatsApp integration.