image

EntreVecinos

Designing Trust Inside Gated Communities

EntreVecinos was born from a very specific problem: gated communities are full of people who live physically close, yet coordination, trust, and help still happen in fragmented and inefficient ways. WhatsApp groups exist, but they lack structure, continuity, and accountability.

This article explains why each design decision in EntreVecinos was made, starting from the earliest wireframes to the final UI direction. Every screen, flow, and interaction was designed to reduce friction, increase trust, and feel human rather than transactional.

Typography across the product uses Plus Jakarta Sans, chosen for its balance between friendliness and clarity, reinforcing the informal but reliable tone of the app.


1. Designing Access: Why the App Starts With Trust

EntreVecinos Welcome Screen

The very first screen introduces the core idea: "Todo queda entre vecinos". This is not a slogan; it is a contract. From the first interaction, users understand this is not a public marketplace.

Instead of open sign-ups, access is gated by invitation codes or access requests. This immediately filters intent and sets expectations. UX-wise, this reduces anxiety and reinforces the idea of a private space.

EntreVecinos Illustrated Onboarding

The illustrated onboarding reinforces warmth and community. Visual storytelling is used early to replace long explanations. Seeing neighbors interacting communicates more than paragraphs of copy ever could.


2. Location Permission as a Design Constraint, Not a Feature

Location Permission Screen 1 Location Permission Screen 2

Location permission is framed as a requirement for trust, not surveillance. The copy explains clearly why it is needed and limits its scope: the app only works inside the community.

This design decision protects the mental model of the user. EntreVecinos is not tracking movement; it is validating belonging. The UX choice to explain this before requesting permission significantly increases acceptance rates.


3. Home vs Explore: Passive Awareness vs Active Intent

Home Screen Explore Screen

The Home screen answers one question: "What is happening right now in my neighborhood?"

This is why Home is feed-based. It surfaces real-time actions such as "I'm going to Zoco in 1 hour" or "Need a drill." The goal is passive discovery, not searching.

Explore, on the other hand, is intentional. It exists for users who already know what they need. Separating these mental modes avoids cognitive overload and keeps the UI predictable.


4. Creating a Favor: Designing for Low Commitment

Create Favor Screen 1 Create Favor Screen 2

Publishing a favor is intentionally lightweight. The form asks only what is essential: category, estimated time, and optional guarantee.

Guarantee is optional by design. Forcing monetary commitment would increase friction and discourage spontaneous help. UX here prioritizes participation over perfection.


5. Agreements Before Chats, Not After

Agreement Summary Screen

Before any chat becomes active, there is a clear agreement summary. This screen formalizes expectations: who, when, what, and how much.

This design prevents misunderstandings later. UX research consistently shows that conflicts happen when expectations are implicit. EntreVecinos makes them explicit early.


6. Chat as a Resolution Space, Not a Chaos Room

Chat Screen 1 Chat Screen 2

Chats in EntreVecinos are contextual. They are not free-form rooms but extensions of a specific agreement.

This design reduces noise and emotional friction. Messages are short, purposeful, and anchored to a shared context. The chat UI visually reinforces this by keeping the agreement visible and limiting actions.


7. Local Stores Without Platform Friction

Store Screen 1 Store Screen 2

The store experience borrows familiar patterns from delivery apps, but with a critical difference: no commission per transaction.

Local businesses pay a fixed fee for visibility. UX-wise, this removes price anxiety for users and aligns incentives for merchants. The cart UI feels familiar, reducing learning curves.


8. Visual Language and UI Decisions

Visual Language and UI

The UI avoids aggressive contrasts and sharp edges. Rounded components, warm colors, and soft illustrations communicate safety and familiarity.

Buttons follow a clear hierarchy:

  • Primary actions use calm but visible colors
  • Secondary actions are present but never dominant
  • Success and denial states are explicit but friendly

This consistency builds trust over time. Users always know what will happen when they tap.


9. Why Storybook for UI Components

Storybook is a natural fit for EntreVecinos because the product relies heavily on reusable, stateful components.

  • Buttons with multiple states (active, disabled, success)
  • Cards representing favors, stores, and agreements
  • Chat bubbles tied to contextual metadata

Using Storybook allows designers and developers to:

  • Document UI decisions in isolation
  • Test edge cases without navigating the entire app
  • Maintain visual consistency as features scale

In a trust-based product, visual regressions are not cosmetic bugs. They are credibility risks. Storybook helps prevent that.


Conclusion

EntreVecinos is not designed to move fast or optimize for volume. It is designed to feel safe, familiar, and predictable.

Every UX and UI decision reinforces one idea: helping each other should feel natural, not transactional.

That is why the product looks the way it does, behaves the way it does, and says only what is necessary.

Because in the end, everything really does stay between neighbors.