Volver a proyectos

Web desde cero · Centro de fisioterapia

Proyecto Ámbar

Todo el negocio depende del boca a boca. Desata fisioterapia.

Ver el diseño
páginas
5
y web
Marca
Proyecto conceptual
// 01 · El punto de partida

Sin web, y con fama en su barrio.

Desata es un centro de fisioterapia ficticio: tres fisioterapeutas, unos ocho años abierto, buena fama en su barrio y ninguna presencia en internet. Las citas se dan por teléfono y WhatsApp. La fundadora quiere que se note que es un negocio cuidado y con intención, no una consulta más. Llega con unos bocetos de logo hechos a mano y ninguna idea clara de colores.

«Todo el que viene es porque alguien nos ha recomendado. Quien nos busca por su cuenta no nos encuentra.»

Objetivo de la web
Que quien busca un fisio cerca pida cita
Público
Alguien con dolor, buscando desde el móvil
Cómo se da cita hoy
Por teléfono y WhatsApp
Punto de partida
Sin web y con bocetos de logo en papel
// 02 · Identidad visual

La marca, antes que la web.

Desata llegaba sin marca, solo con unas ideas de lo que quería. Partimos de ellas para cerrar logotipo, color y tipografía antes de diseñar la web.
Hoja escaneada con seis bocetos a lápiz del logo de Desata y notas de duda (abre la imagen ampliada en otra pestaña)
Los bocetos con los que llega la clienta
La identidad final
Logotipo final de Desata sobre crema, naranja, tinta y menta, con paleta e icono (abre la imagen ampliada en otra pestaña)
Identidad final: logotipo, icono, color y tipografía

  • Palabra en minúscula

    Cercana y sin rigidez clínica. El gesto de soltar se queda en el pie de la última a, no en un icono más.

  • Naranja para actuar

    El naranja que dudaba en el boceto pasa a principal y se reserva para botones y precios. El verde menta, también del boceto, queda como apoyo.

  • Nada de azul de hospital

    Lo pedía la clienta en su hoja y se respeta: crema de fondo, tinta para el texto, ni una bata blanca.

  • Contraste comprobado

    Sobre naranja el texto va en tinta (4,5:1). Para texto naranja sobre crema se usa un tono más oscuro que sí pasa en titulares.

Extra opcional. Identidad visual como extra opcional: logotipo a partir de lo que traiga el cliente, paleta, tipografías y una hoja de uso. No incluye naming ni manual extenso.

// 03 · Arquitectura

Cinco páginas y una sola acción.

Antes de dibujar, qué páginas hay y qué hace cada una. Cinco páginas y una sola acción: pedir cita. La web se ordena por lo que le duele al paciente, no por las técnicas del centro.

Inicio

entrada
  1. Cabecera: «Lo que te duele, desatado.» · Pedir cita · Llamar
  2. ¿Qué te pasa? · 6 problemas
  3. Cómo es la primera sesión · 3 pasos
  4. Quién te va a tratar · 3 fisios
  5. Precio claro
  6. Dónde y cuándo
  7. ¿Empezamos? · Pedir cita

Qué te pasa

  1. «Cuéntanos qué te duele, no el nombre técnico»
  2. 6 tarjetas: Espalda · Cuello y cabeza · Hombro · Rodilla · Lesión haciendo deporte · Embarazo y posparto
  3. ¿No ves lo tuyo? · Pedir cita

Ficha · Dolor de espalda (plantilla)

Qué suele ser · Qué hacemos · Cuántas sesiones · Cuándo ir antes al médico · Quién lo trata · Pedir cita con el motivo ya rellenado

Equipo

  1. 3 fisios: foto, nombre, especialidad, nº de colegiada y una frase suya
  2. El centro en fotos
  3. Pedir cita

Marta Ruiz

Fundadora · deportiva

Paula Ortega

Espalda y cuello

Inés Calvo

Suelo pélvico, embarazo y posparto

Tarifas

  1. Primera sesión · 60 min · 45 €
  2. Sesión · 45 min · 38 €
  3. Bono 5 sesiones · 175 €
  4. Pago y factura para tu seguro (sin mutuas)
  5. Pedir cita

Pedir cita

conversión
  1. «Pide tu cita. Te llamamos para darte hora.»
  2. 3 campos: Nombre · ¿Qué te pasa? · Teléfono
  3. Casilla de privacidad
  4. ¿Prefieres hablar ya? Llamar · WhatsApp

Error

Mensaje junto al campo; no se borra nada.

Confirmación

«Recibido, Ana. Te llamamos hoy antes de las 20:00» · Llamar · WhatsApp

  • Menú: Qué te pasa · Equipo · Tarifas · [Pedir cita]
  • Móvil: barra fija abajo con Llamar y Pedir cita
  • Pie: dirección · horario · teléfono · WhatsApp · avisos legales
  1. // 01

    Busca

    «Fisio dolor de espalda» en el móvil. Entra por la portada o por la ficha de su problema.

  2. // 02

    Comprueba

    ¿Tratan lo mío? ¿Quién me va a tratar? ¿Cuánto cuesta? Tres respuestas, sin navegar.

  3. // 03

    Pide cita

    Tres campos, sin elegir hora. Si viene de una ficha, el motivo ya está escrito.

  4. // 04

    Sabe qué pasa

    La confirmación dice cuándo le llaman. Si no quiere esperar, llamar o WhatsApp.

// 04 · Wireframes

Primero el contenido, después la forma.

Las ocho pantallas del recorrido en gris, con los textos reales. Aquí se valida qué hay en cada pantalla y en qué orden; el color llega después, para que no distraiga la conversación.
01Inicio
  1. 1La promesa en una línea y las dos vías de contacto antes de hacer scroll.
  2. 2Se elige por lo que duele, no por la técnica.
  3. 3Caras y precio en la portada: las dudas que deciden, resueltas sin navegar.
02Qué te pasa
  1. 4Nadie se queda fuera por no encontrar su caso.
03Ficha · Espalda
  1. 5Honestidad sanitaria: no todo se resuelve en fisio.
  2. 6El motivo viaja al formulario ya escrito.
04Equipo
  1. 7El nº de colegiada sustituye a las opiniones: confianza que se puede comprobar.
05Tarifas
  1. 8Se responde la pregunta que llega por teléfono antes de que llegue.
06Pedir cita
  1. 93 campos y sin calendario: el centro da hora como hoy, por teléfono.
07Error
  1. 10El error se explica junto al campo y no se borra nada de lo escrito.
08Confirmación
  1. 11Dice cuándo pasa lo siguiente: nadie se queda esperando sin saber.

Las ocho pantallas, una detrás de otra. Dentro de cada móvil puedes hacer scroll; los números en melocotón explican cada decisión.

  • Dos vías siempre a mano

    Barra fija abajo con «Llamar» y «Pedir cita» en todas las páginas de contenido. En el formulario desaparece para no competir con el botón.

  • Sin reserva online

    El centro da hora por teléfono. Un calendario obligaría a cambiar cómo trabaja; si algún día lo quiere, encaja en «Pedir cita».

  • Confianza que se puede comprobar

    No hay reseñas inventadas: la confianza la dan las caras, la especialidad y el número de colegiada.

// 05 · Diseño

Pensada para el móvil, donde se busca un fisio.

Diseñada solo para móvil, que es donde se busca un fisio, a menudo con dolor. La portada abre con una foto a contraluz y la palabra de la marca encima; el resto mantiene la calma: crema, aire y el naranja solo donde hay que pulsar.

  • La portada responde sin navegar

    Problemas, equipo, precio y dirección están en la primera página, en ese orden.

  • Se elige por lo que duele

    «Espalda», «Rodilla», «Me lesioné haciendo deporte». Nadie busca «terapia manual ortopédica».

  • El precio, a la vista

    En la portada y con página propia. En salud privada, no saber cuánto cuesta frena más que el precio.

Portada de Desata en móvil con la palabra desata sobre una foto a contraluz (abre la imagen ampliada en otra pestaña)
Inicio · Primera pantalla
Portada: equipo, precio y dónde estamos (abre la imagen ampliada en otra pestaña)
Inicio · Equipo y precio
Menú abierto a pantalla completa (abre la imagen ampliada en otra pestaña)
Menú
Página Qué te pasa con seis problemas (abre la imagen ampliada en otra pestaña)
Qué te pasa
Página de equipo con retratos (abre la imagen ampliada en otra pestaña)
Equipo
Página de tarifas con precios en bloque oscuro (abre la imagen ampliada en otra pestaña)
Tarifas
páginas
5
fichas por problema
6
campos para pedir cita
3
toque hasta el formulario
1

Recuentos del diseño, no resultados.

// 06 · Recorrido

De la portada a la cita.

Así se pide cita de principio a fin, pantalla a pantalla. Es el recorrido que más importa a la clienta, así que se diseña entero, con sus errores, y se prueba antes de dar el diseño por cerrado.
// 01

Elige qué le duele

Desde la portada, sin entrar en ningún menú: «Espalda».

Portada con los problemas para elegir (abre la imagen ampliada en otra pestaña)
Portada
// 02

Lee su ficha

Qué suele ser, qué se hace y cuántas sesiones, en lenguaje llano.

Ficha del dolor de espalda (abre la imagen ampliada en otra pestaña)
Ficha · Dolor de espalda
// 03

Ve quién le trata

Paula, la fisio de espalda, con su foto. El botón ya lleva el motivo.

Final de la ficha con la fisio y el botón de cita (abre la imagen ampliada en otra pestaña)
Ficha · Quién te trata
// 04

Pide cita

Tres campos. «Dolor de espalda» viene escrito desde la ficha.

Formulario de cita con el motivo rellenado (abre la imagen ampliada en otra pestaña)
Pedir cita
// 05

Se equivoca

Al teléfono le faltan números: se avisa junto al campo y no se borra nada.

Formulario con error en el teléfono (abre la imagen ampliada en otra pestaña)
Error en un campo
// 06

Sabe qué pasa

Le llaman hoy antes de las 20:00. Si no quiere esperar, llamar o WhatsApp.

Confirmación de la solicitud de cita (abre la imagen ampliada en otra pestaña)
Confirmación
// 07 · Estados

Cuando algo no sale a la primera.

Lo que pasa cuando algo no sale a la primera, definido antes de desarrollar.

  • Error en un campo

    Mensaje junto al campo, en rojo teja con icono y texto. No se borra nada de lo escrito.

  • Motivo ya escrito

    Si se llega desde una ficha, «¿Qué te pasa?» viene rellenado y se puede cambiar.

  • Fuera de horario

    La confirmación dice «mañana a primera hora» o «el lunes» según cuándo se pida.

  • Sin querer esperar

    Llamar y WhatsApp en la confirmación, para quien quiere hablar ya.

// 08 · Qué medir

Sin resultados, con hipótesis.

Una web nueva no tiene resultados que enseñar hasta que lleva un tiempo funcionando. Lo honesto es decir qué esperamos que cambie y cómo lo vamos a comprobar.

  • Solicitudes de cita desde la web

    Hoy
    Cero: no hay web
    Objetivo
    Primer canal digital
    Cómo
    Registro de solicitudes del formulario durante los tres primeros meses.

  • Comprensión de la portada

    Hoy
    Sin medir
    Objetivo
    Se entiende qué es y cómo pedir cita en 5 segundos
    Cómo
    Test de cinco segundos con cinco personas antes de publicar.

  • Abandono en el formulario

    Hoy
    Sin medir
    Objetivo
    Bajo: solo tres campos
    Cómo
    Analítica de inicio y envío del formulario desde el primer día.
Supuestos del caso
  • El centro sigue dando hora por teléfono: la web pide los datos y alguien del equipo llama en el día.
  • Precios, horario, dirección, frases del equipo y números de colegiada son de ejemplo.
  • Las señales de alarma de cada ficha las redacta y valida el centro, que es quien tiene criterio sanitario.
  • Las fotos son de bancos de imágenes. En un encargo real, las del equipo y el centro serían propias.
Qué se entregaría en un encargo así

Entregables

  • Identidad visual (extra opcional)
  • Arquitectura y mapa de contenidos
  • Wireframes de todo el recorrido
  • Diseño en móvil de todas las pantallas
  • Textos de todas las páginas, revisados por el cliente
  • Qué medir desde el lanzamiento
Hablemos

¿Todavía no tienes web? Empezamos por lo que necesita tu negocio.

Este caso es conceptual, pero el proceso es el de un encargo real: primero qué tiene que conseguir la web, después qué páginas necesita y solo al final cómo se ve. Si llegas sin marca, también partimos de lo que tengas.

Cuéntanos tu proyecto
Otros proyectos

Otros proyectos