Volver a Trabajo
may 2026·Salud

Esperanza & Resilience — diseño UX/UI e implementación front-end para un sitio moderno de salud mental

Un caso de sitio web para salud mental centrado en diseño UX/UI e implementación front-end para Esperanza & Resilience, construido para comunicar confianza, claridad emocional y una oferta terapéutica estructurada a través de una experiencia digital moderna y humana.

Ver proyecto
UX/UI DesignFront-EndWebMental HealthService Site

Overview

Esperanza & Resilience es un sitio de salud mental y terapia diseñado para presentar apoyo psicológico de una forma accesible, confiable y emocionalmente contenida. Públicamente, el sitio introduce la práctica a partir de una promesa clara: ayudar a recuperar claridad, calma y control emocional mediante sesiones personalizadas con profesionales licenciados en salud mental, seguimiento cercano y herramientas prácticas. También destaca tres pilares centrales de su enfoque terapéutico: confidencialidad, personalización y modalidades flexibles.

Este proyecto implicó diseño UX/UI e implementación front-end del sitio. La meta era construir una experiencia digital que se sintiera cálida y profesional al mismo tiempo, ayudando a que las personas entendieran rápidamente la oferta de servicios, confiaran en la práctica y se sintieran cómodas dando el primer paso para agendar apoyo.

Project Snapshot

  • Cliente / Empresa: Esperanza & Resilience
  • Tipo de proyecto: Sitio de terapia / salud mental
  • Industria: Salud mental / servicios de salud
  • Alcance: Diseño UX/UI, implementación front-end, presentación de servicios, jerarquía de contenido, estructura enfocada en confianza
  • Mi rol: Diseñador UX/UI / Front-End
  • Plataforma: Web
  • Enfoque principal: Confianza, claridad emocional, accesibilidad y comunicación estructurada de servicios

Context

El sitio público está construido alrededor de una oferta de terapia y bienestar mental que incluye sesiones individuales, terapia de pareja, terapia familiar, manejo de estrés y enojo, tratamiento de adicciones y evaluaciones psicológicas. También destaca puntos prácticos de acceso como modalidades online o presenciales, confidencialidad, CTA de agendamiento, reseñas destacadas y una sección de FAQ.

Ese contexto marcó el proyecto de una forma importante. Un sitio así no puede apoyarse solo en diseño limpio. Tiene que ayudar a que las personas se sientan emocionalmente seguras, reducir dudas y hacer que el servicio sea fácil de entender. En productos y servicios de salud mental, la confianza se construye no solo con lenguaje, sino también con estructura calmada, tono visual, jerarquía legible y una sensación clara de acompañamiento.

The Challenge

El reto era diseñar e implementar un sitio capaz de sentirse emocionalmente cercano sin volverse vago ni visualmente excesivo.

Los sitios de salud mental suelen cargar un equilibrio delicado:

  • tienen que sentirse cálidos, pero también profesionales
  • deben comunicar empatía, pero con claridad
  • deben invitar a actuar sin sonar agresivos
  • tienen que presentar servicios de forma estructurada sin sentirse fríos

El verdadero reto era construir una experiencia que sostuviera bien ese equilibrio. Tenía que ofrecer una sensación humana y calmada, pero seguir funcionando como un sitio sólido de servicios con información clara, desglose de oferta, testimonios y llamados a la acción. Además, el sitio muestra trazos bilingües y un cambio visible de idioma, lo que añade otra capa de estructura a la experiencia.

Goals

  • Construir un sitio confiable y emocionalmente claro para la práctica
  • Comunicar los servicios de salud mental de forma estructurada y accesible
  • Reforzar confianza mediante una dirección visual limpia, calmada y moderna
  • Hacer que la oferta de servicios fuera más fácil de escanear y entender
  • Implementar el sitio en front-end con una experiencia estable y pulida
  • Ayudar a que las personas se sintieran cómodas al pasar de leer a agendar

My Contribution

Mi aporte se centró tanto en diseño UX/UI como en implementación front-end.

Apoyé el proyecto a través de:

  • dar forma a la estructura general del sitio
  • diseñar una dirección visual calmada, moderna y humana
  • organizar la jerarquía de servicios, secciones de confianza, testimonios, FAQ y CTA
  • ayudar a que el sitio comunicara cuidado emocional sin perder claridad
  • implementar la experiencia front-end
  • refinar la estructura para que el sitio se sintiera más fácil de leer, navegar y confiar

Este proyecto exigía más que acabado visual. Requería sensibilidad sobre cómo se sentiría la experiencia digital para alguien que ya puede estar emocionalmente abrumado, inseguro o con dudas para pedir ayuda.

Approach

Mi enfoque fue tratar el sitio como un recorrido de servicio orientado a construir confianza, no como un simple brochure.

Eso implicó estructurar la experiencia alrededor de algunas necesidades clave:

  • tranquilidad inmediata desde el hero
  • explicación clara del enfoque terapéutico
  • una vista entendible de los servicios
  • prueba social mediante reseñas y resultados
  • una invitación visible pero calmada a tomar acción

La estructura pública del sitio refleja bien ese enfoque. Abre con una propuesta emocional y de servicio, luego pasa por los pilares terapéuticos, About Us, categorías de servicios, estadísticas orientadas a resultados, testimonios, FAQ y un cierre que invita a iniciar el proceso. Eso crea un flujo de sitio que se siente intencional y acompañante, no abrupto.

Key UX / UI Decisions

1. Abrir con claridad emocional y sensación de acompañamiento

El homepage abre alrededor de la idea de recuperar claridad, calma y control emocional. Eso importa porque quienes llegan a un sitio de terapia muchas veces necesitan primero orientación emocional antes de estar listos para explorar detalles.

2. Estructurar confianza a través de tres pilares visibles

El sitio destaca públicamente confidencialidad, planes terapéuticos personalizados y modalidades flexibles como los pilares de su enfoque. Hacer visibles esos principios desde temprano ayuda a reducir duda y refuerza credibilidad.

3. Presentar los servicios de una forma humana, no clínica

La sección de servicios incluye terapia individual, de pareja, familiar, manejo de estrés y enojo, tratamiento de adicciones y evaluaciones psicológicas. Organizar esa amplitud sin hacer que la experiencia se sintiera fría o institucional fue una consideración UX importante.

4. Usar testimonios y estadísticas para reforzar confianza

El sitio incluye resultados reportados, reseñas destacadas y mensajes alrededor de reducción de ansiedad y experiencia positiva de pacientes. En servicios de alta sensibilidad, ese tipo de prueba social ayuda a que la persona no se sienta sola en la decisión de buscar apoyo.

5. Mantener los llamados a la acción visibles pero respetuosos

El sitio incluye acciones claras como “Schedule Appointment”, “Start Today” y una invitación final a dar el primer paso. Una meta importante del diseño fue hacer que esos CTAs se vieran presentes sin que el sitio se sintiera agresivo.

Front-End Implementation Perspective

Una parte clave de este proyecto fue traducir el tono emocional del diseño a una experiencia front-end estable.

Eso importaba porque sitios como este dependen mucho de la calidad de implementación:

  • el espaciado debe apoyar lectura calmada
  • la jerarquía debe mantenerse clara en secciones largas de servicios
  • los bloques de contenido deben sentirse legibles y equilibrados
  • testimonios, FAQ y CTA deben fluir de forma natural
  • la experiencia general debe sentirse suave y contenida en navegador, no solo en los diseños

Trabajar entre diseño y front-end ayudó a que el resultado final se sintiera más coherente. El sitio se ve simple, pero esa simplicidad depende de disciplina de implementación y de mucho cuidado en el tono emocional.

Outcome

El resultado fue un sitio moderno y estructurado para Esperanza & Resilience.

El proyecto entregó:

  • una presencia digital calmada y creíble para la práctica
  • mejor comunicación de la oferta terapéutica
  • señales de confianza más fuertes a través de estructura, testimonios y jerarquía de servicios
  • una implementación front-end alineada con una dirección de diseño humana
  • una experiencia web más acompañante, accesible y lista para conversión real de servicio

What This Project Reinforced

Este proyecto reforzó algo que valoro mucho en diseño digital: los servicios emocionales necesitan claridad tanto como empatía.

Un sitio de salud mental se vuelve más fuerte cuando ayuda a que las personas se sientan seguras, entendidas y orientadas sin abrumarlas. Para mí, este caso representa muy bien el tipo de trabajo que más disfruto: dar forma a experiencias digitales que se sientan calmadas, intencionales y realmente útiles desde diseño e implementación.

Construyamos algo
excepcional juntos.