![](http://lorenacb.es/wp-content/uploads/calmacare_logo.webp)
Asociación sin ánimo de lucro que brinda información y quiere ayudar a mejorar la salud de los usuarios que lo necesiten.
Herramientas utilizadas
![](https://lorenacb.es/wp-content/uploads/Ai-1.webp)
![](https://lorenacb.es/wp-content/uploads/Ps-1.webp)
![](https://lorenacb.es/wp-content/uploads/Recurso-1-1.webp)
![](https://lorenacb.es/wp-content/uploads/logo-wordpress.webp)
Duración: 4 meses
Mi rol: UX/UI designer
![](http://lorenacb.es/wp-content/uploads/flecha_calmacare.webp)
![](http://lorenacb.es/wp-content/uploads/Fondo-calmacare-1024x619.webp)
![](http://lorenacb.es/wp-content/uploads/calmacare_logo.webp)
Asociación sin ánimo de lucro que brinda información y quiere ayudar a mejorar la salud de los usuarios que lo necesiten.
Herramientas utilizadas
![](https://lorenacb.es/wp-content/uploads/Ai-1.webp)
![](https://lorenacb.es/wp-content/uploads/Ps-1.webp)
![](https://lorenacb.es/wp-content/uploads/Recurso-1-1.webp)
![](https://lorenacb.es/wp-content/uploads/logo-wordpress.webp)
¿Cual es nuestro objetivo?
El propósito de crear esta página web fue asistir a una organización sin fines de lucro en la creación de su sitio web para proporcionar información y establecer una comunicación con personas que padecen de dolor crónico. Durante el proceso de diseño de la página web, se consideraron las entrevistas realizadas a miembros de la asociación.
![](http://lorenacb.es/wp-content/uploads/GIF-animado-Inicio_calmacare.gif)
![](http://lorenacb.es/wp-content/uploads/pantalla_calmacare-1024x791.webp)
User persona
Después de entrevistar a cuatro personas, se analizaron sus explicaciones para identificar sus puntos de dolor y necesidades. A partir de este estudio, se crearon tres buyer persona que representan a distintos grupos de usuarios que accederán al sitio web. Seguidamente, se generaron tres mapas de viaje (journey maps) diferentes que ayudaron en la creación del sitio web.
![](http://lorenacb.es/wp-content/uploads/luisa_calmacare.webp)
Luisa
Luisa comenzó con dolores de cabeza hace un año, está muy frustrada porque ha ido al neurólogo, ha estado medicada bastante tiempo, y parece que nada soluciona el problema.
Busca información a través de redes sociales y comentarios de personas que están pasando algo parecido.
![](http://lorenacb.es/wp-content/uploads/Ricardo_calmacare.webp)
Ricardo
Un día Ricardo se levantó con un fuerte dolor de lumbar y no sabía a quién podía acudir. Tras varias búsquedas en internet llegó a la conclusión que lo mejor le vendría sería una asociación que le apoyara con su problema.
![](http://lorenacb.es/wp-content/uploads/Marisa_calmacare.webp)
Marisa
Marisa empezó con dolor hace muchos años, esto hizo que decidiera dejar su trabajo y convertirse en ama de casa.
Lleva mucho tiempo yendo a médicos, pero cree que no están acertando con su problema.
Una amiga le habla de una asociación y siente curiosidad.
Arquitectura de la información
Para la realización de la arquitectura de la información se consideró la necesidad de la asociación de recaudar frondos y conseguir volutarios, además también se consideró las necesidades de los usuarios.
![](http://lorenacb.es/wp-content/uploads/Arquitectura-de-la-informacion_calmacare-1024x560.webp)
![wireframing_calmacare_2 (2)](http://lorenacb.es/wp-content/uploads/wireframing_calmacare_2-2-1024x755.webp)
![low fidelity_calmacare2](http://lorenacb.es/wp-content/uploads/low-fidelity_calmacare2-1024x755.webp)
![Hig fidelity_calmacare2](http://lorenacb.es/wp-content/uploads/Hig-fidelity_calmacare2-1024x755.webp)
Proceso del diseño
Wireframing:
La estructura se enfocó en permitir que el usuario pudiera navegar por el sitio web a través de la barra de navegación y de distintos botones de acción. En su mayoría, estos botones llevan al usuario a registrarse como socio.
Low fidelity:
Después de establecer la estructura básica, se creó un diseño de baja calidad en Figma. Luego, se conectaron las diferentes pantallas y se realizó una segunda ronda de entrevistas a varios usuarios para probar el diseño. Con base en los comentarios obtenidos, se hicieron las modificaciones necesarias.
High fidelity:
En esta fase del proceso, se procedió a transformar el diseño inicial, que había sido creado en una versión de baja calidad. Para ello, se adjuntaron las diferentes imágenes, se aplicó la tipografía y se establecieron los colores específicos que se habían seleccionado en fases anteriores.
¿Te animas a probar la app?
No te quedes con las ganas, aquí tienes el enlace para poder empezar a usarla.
![](http://lorenacb.es/wp-content/uploads/probar_app_Calmacare.webp)