MBC PSICOLOGIA – Rediseño de página web UX/UI

Rediseño de logotipo para clínica de psicología en Torrejón de Ardoz.

Tipo de proyecto

Diseño web UX/UI

Optimización técnica de SEO

Rol

Diseñador web UX/UI

SEO Técnico

Cliente

MBC PSICOLOGIA

Historia

UN ESPACIO DE BIENESTAR EMOCIONAL

MBC PSICOLOGIA tenía claro que necesitaba un rediseño y reestructuración de su página web. De esta manera, sus valores como centro clínico de psicología podrían dar un mejor mensaje a sus pacientes para acoger las diferentes modalidades que ofrece.

Esto significaba resolver dos retos distintos pero interdependientes:

Reto de marca: unificar y transmitir su propuesta de marca en su página web, dando un uso claro y preciso de sus servicios así como su mensaje claro de bienestar emocional.
Reto de rendimiento: las métricas eran claras, hacía falta mejorar el rendimiento de la página total para posicionar mucho mejor la página y evitar que los pacientes se frustren al navegar por ella.

Misión y Visión

Ser un espacio seguro y cálido para el paciente.

Valores y Personalidad

Empatía, calidez, profesionalidad.

Mi rol

Diseñador UX/UI y desarrollo web + SEO técnico.

Trabajé en este proyecto de forma individual, responsable de:

Auditorías técnicas de SEO con Screaming Frog SEO.
Análisis de datos con Google Analytics y Google Search Console para ver el tráfico predominante y buscar fallas en la navegación.
Análisis de rendimiento con PageSpeed Insights.
Prototipado UX/UI en baja y alta fidelidad para organizar el contenido con mapas de sitio web reestructurando todo el sitio.
Implementación en WordPress así como el manejo de Elementor como pluggin principal de diseño, creando plantillas personalizadas.
Uso de PHP para mejorar e introducir funciones concretas en el blog y creación individual de «talleres» como funcionalidad automatizada.

Auditorías técnicas

SEO técnico con Screaming frog SEO spider.

Para comenzar el proyecto, me dediqué a analizar todo el sitio web con Screaming Frog SEO, que nos dará un amplio análisis de errores típicos. El pesode imágenes era uno de ellos, así como url sin redirecciones y canonicals que apuntaban a otros lados, haciendo que Google no sepa como colocar estas páginas. Además, la longitud de los h1 y h2, dificultaba la lectura y el primer impacto de los mismos.

Sin duda, el reto también estaba en analizar los pacientes actuales y el público al que va dirigido, sin olvidarnos de que todo el contenido debe de estar direccionado hacia la ciudad de Torrejón de Ardoz.

ANALYTICS Y PAGESPEED

Google Analytics me sirvió para ver de dónde viene la mayor parte de su tráfico, siendo éste orgánico. Aunque también vemos que la mayoría de éste viene por los artículos que escribe MBC PSICOLOGIA en su blog casi a diario. Esto permite que una gran cantidad de personas se vean interesadas en leer, pero también otras tantas páginas no logran posicionarse como debería.

Por otro lado, PageSpeed Insight nos da estos relevantes datos que necesitamos subsanar, sobre todo, la demora del LCP.

Encuesta a pacientes

Aprovechando la cantidad de pacientes que acuden a MBC PSICOLOGIA, se realizó una breve encuesta relacionada con la web para ver preferencias, formas de acceso e información relevante para los participantes. Gracias a esto, pudimos ver que el 100% de ellos accedieron desde su dispositivo móvil y el 56% preferían hablar directamente desde WhatsApp. Esto supuso que el diseño debería potenciarse en «mobiles first» sin ninguna duda.

Un 38% quieren saber algo más a nivel personal de los terapeutas, por lo que sus descripciones se han ampliado y modificado para que ese toque humano forme parte de sus biografías.

Se ha añadido una sección de FAQ, propiciada por el 50% de personas que necesitan entender cómo funciona la primera sesión psicológica.

Otro dato relevante es que tan solo el 38% de pacientes vienen directamente de Google, así que debemos aumentar la permanencia y evitar la tasa de rebote para nuevos curiosos.

Esta encuesta fue posible gracias a Typeform.

Diseño UX/UI

Reorganizar la estructura actual

Para poder estructurar bien, primero hice el nuevo Sitemap del sitio web. De esta manera, podemos desglosar y ver claramente los cambios y secciones nuevas que incluiremos. En el caso de «psicoterapias», puse a la derecha la estructura de una en concreto porque tendrá la misma para todas las demás.

PRIMEROS DISEÑOS UX

Partimos de un problema en cuanto a pesos visuales y las cards que ocupan todo el ancho del monitor. Reorganicé el contenido según nuestro nuevo sitemap para que se viera de una manera más clara y sin lugar a dudas, minimizando la carga cognitiva.

¿Por qué una sección nueva llamada "especialidades"?

Gracias a la encuesta previa que hicimos, nos dimos cuenta de que un número de pacientes necesitaba entender y verse reflejado en la sintomatología que le pasaba. Muchos otros de ellos hablaban de la sensación cálida y reconfortante que le daba leer artículos. Por ello, la decisión de explicar las especializaciones con síntomas emocionales era clave para conectar desde un primer momento con el paciente.

«Especialidades» responde a leer sobre síntomas, dolencias y manifestaciones tanto físicas como emocionales que pueda estar sintiendo el paciente.

Así, podemos conectar con el paciente de una manera directa, haciendo que se sienta reflejado en los temas que se tratan en la clínica.

Los nombres del UX eran provisionales, ya que estaban sujeto a cambios según la corrección de MBC PSICOLOGIA.

Reestructurando las psicoterapias

El problema inicial de las páginas de psicoterapias era la cantidad de texto seguido que me encontré. Esto crea una enorme carga cognitiva, haciendo que el usuario se canse antes de lo previsto y pueda irse de la página web.

Reorganicé todo el contenido y le di subsecciones para enlazar además con otros sitios de la página, y dándole contenido relevante a través de blogs relacionados con el tipo de terapia.

Nuestra meta es que el ojo reconozca fácilmente la información y no se sobrecargue.

UI

COHERENCIA ESTILÍSTICA

Necesitábamos igualar la paleta de colores, el estilo visual, la jerarquía y los componentes. Anteriormente trabajé en el nuevo logotipo de MBC, así que usé esos colores para crear una paleta acorde al nuevo estilo.

Me aseguré de que el diseño fuese mobiles-first, permitiendo al usuario navegar con fluidez y de manera organizada, limitando al máximo a 6 elementos que recordar.

El estilo fotográfico debe mostrar sinceridad, empatía y un sitio reconfortante. Además, la calidad debe ser máxima en espacios limpios para mostrar la profesionalidad de la clinica.

El turquesa y el azul sirven para la claridad y la calma. Los bordes redondeados hacen que interpretemos que el mensaje es inofensivo y cercano. Los iconos nos ayudan a interpretar el mensaje antes incluso de leerlo. Y el fondo crema contrasta con el turquesa dando una calidez total al mensaje en todo el sitio web.

UI

Secciones de diseño interesantes

Una de las secciones en las que fusioné dos, fueron las cards de psicoterapias internas en «metodología». Dentro de ellas hablamos del enfoque (metodología en sí), además de añadir el beneficio para el paciente. Esta estructura funciona porque conecta con sus necesidades y le da esperanza, reforzado por una imagen inspiradora.

EL RETO DEL BLOG

CATEGORÍAS, ETIQUETAS Y DISEÑO

Una gran cantidad de usuarios entra por los artículos de blog de MBC. Esto quiere decir, que al tener mucho peso, debemos prestar atención y trabajar para potenciar este fuerte del sitio web. Por ello, reestructure todas las categorías y etiquetas del blog, creando así una mejor fluidez de búsqueda y posicionamiento para el SEO.

Antes, teníamos más de 40 categorías y subcategorías. Esto ralentizaba y dispersaba la información haciendo que no fuera relevante cuando sí lo era. Por otro lado, las etiquetas repetían términos de las categorías y viceversa.

Desglosé entonces, cuatro categorías principales y 4 subcategorías en cada una, teniendo así un máximo de 20 donde poder ubicar nuestros post. Por otro lado, la gran cantidad de etiquetas es más flexible, pero debemos evitar repetidas, o similares.

Se implementó un buscador, y además, debajo etiquetas ordenadas por mayor número de entradas y relevancia. Esto fue hecho con PHP para poder organizarlas mejor, así como la misma nube de etiquetas funciona dentro de los artículos dándonos los que pertenezcan a los mismos.

La primera imagen muestra el diseño antiguo de MBC PSICOLOGIA, donde todo estaba listado como un archivo.

PAGESPEED INSIGHT Y RENDIMIENTO

OPTIMIZACIÓN DEL SITIO Y VELOCIDAD DE CARGA

Usando herramientas como WpOptimize para minimizar, retrasar cargas pesadas de JS y comprimiendo las imágenes, pudimos pasar una limitada velocidad de carga a asegurarnos de que en en todos los dispositivos y con una deficiente conexión en el móvil, podemos visualizar nuestra página.

Más abajo vemos el informe inicial de la página con el último.

RESULTADOS CLAVE

APRENDIZAJE Y EXPERIENCIA DEL PROYECTO

RESULTADOS
━━━━━━━━━━━━━━━━━━━━━
✓ Primeros pacientes contactando por formularios
después de años sin conversiones
✓ Tasa de rebote reducida | Tiempo en sitio ↑
✓ Rendimiento: 39 → 83 (móvil) | 96 (desktop)
✓ Accesibilidad y cumplimiento RGPD implementado

APRENDIZAJES
━━━━━━━━━━━━━━━━━━━━━
Lo más valioso fue implementar la sección de Especialidades, contectando así directamente con las dolencias emocionales de los pacientes. Reorganizar la información alrededor de este dato transformó la experiencia.

Esto me enseñó que en UX sanitario, claridad y
confianza no son opcionales: cada elemento debe
guiar hacia la conversión. Implementar PHP en
Elementor también me mostró que puedes optimizar
sin depender de desarrolladores.

Si tuviera que hacerlo de nuevo, comenzaría directamente
con un análisis de comportamiento de usuario para
identificar secciones prioritarias, en lugar de asumir
la estructura basada solamente en un cuestionario.