> For the complete documentation index, see [llms.txt](https://jackyu-pf.gitbook.io/sanitas-citasonline-challenge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jackyu-pf.gitbook.io/sanitas-citasonline-challenge/09_rediseno-de-la-web.md).

# 09\_Rediseño de la web

Para el re-diseño de la web **empleo las columnas** que hemos **generado previamente** y además le he **añadido un ritmo vretical de 48px** y sus variantes (24px, 12px, etc) 

**El re-diseño soluciona todos los problemas detectados previamente** en el *desk research*, *workflow*, *layouts*, *tipografías* y *análisis visual*. Además se diseñan para los tres user persona definidos previamente. Dado que el **re-diseño es de una sola página** de Sanitas, he visto imprescindible, **mantener la esencia de la página** a través del color, la jerarquía visual, las secciones, etc. A su vez **gracias al *****benchmarking*** he conseguido **analizar los puntos fuertes de la competencia** para poder **aplicarlo en el re-diseño.**

### Comentarios del diseño *top page*

* Me gustaba la **idea del cuadro médico** fuera realmente un cuadro, como tiene Sanitas actualmente. 
* He **reducido los textos** a lo más básico y **esencial para su comprensión** y así **bajar la carga cognitiva**.
* He **resuelto la falta de consistencia** en la "llamada para contratar". De una manera sencilla y directa, poniendo un ***underline***** a "Te llamamos" como hipervínculo.**
* En "calcula tu seguro" ahora tiene su **peso visual** y a la vez genera **coherencia con los elementos** de su entorno, a su vez he establecido **jerarquía entre el apartado "Te llamamos" y calcula tu seguro**.
* Se **alivian los problemas de alineación** en toda la página.
* Se **mejora la affordance** de todos los **textos hipervínculo** mediante un ***underline*** (breadcrumps, etc)
* Se **simplifica el cuadro médico** eliminando opciones variadas para evitar confusión entre los user.
* Se **eliminan los problemas de consistencia** entre los **botones** de la página.
* Se mantiene la idea pero se **re-diseña el botón de "Activar ubicación"** con un **lenguaje más cercano**.
* **"Urgencias" cobra mayor importancia**, pasa a ser un **botón *****CTA FIXED***. Con la intención de **dar una respuesta inmediata** a los user como Ángeles.
* Añado **otro botón *****CTA FIXED***** de feedback**, para que el usuario pueda comentar cada página en la que se encuentre. Crea una **comunicación directa entre user y la compañía**, así pueden avisar si algo de la web no funciona.
* Adjunto bajo el botón buscar la **opción de decargar el cuadro** médico en PDF, por si algún usuario prefiere algún método más tradicional.

![](/files/-MNKZgdMUWAFF-hPdPhN)

![](/files/-MNKZjIHS9Yv37J_aqCS)

### Comentarios del diseño *middle page*

* He **mantenido el ritmo vertical** establecido en la página
* Para la sección de prueba diagnóstica he querido aligerar y proyectar los *drop-downs* sobre el fondo, **contrastando el espacio lleno/vacío** con el cuadro médico superior.
* He **eliminado la falta de consistencia** de la página **separando la notificación COVID**. Ahora se percibe el conjunto, la sección entera de prueba diagnóstica.
* He querido darle un **aire de modernidad** a la página diseñando una **notificación con un fondo tipográfico.** Es del **mismo tamaño** que la original pero ahora los elementos tienen sus espacios y sus márgenes.

![](/files/-MNKZpPosj6jvBfe_TeK)

![](/files/-MNKZrsKPMmQHktVQJH5)

![](/files/-MNK_GnhyImvhdrvcOrF)

![](/files/-MNK_4koDYlmRQ1UAVkM)

{% file src="/files/-MNK\_ayCWKB8cjaMpybv" %}
Descarga la Imagen completa 
{% endfile %}