Como fiel seguidor del diseño de sitios web de nutrición, suelo dedicarle un tiempo importante a navegar por Google revisando páginas de nutricionistas, viendo tendencias y leyendo foros. Así fue como llegué a dar con la web de Belén, por simple curiosidad entré a ver su diseño y fue entonces cuando me encontré con una paradoja: ella es una nutricionista que lleva más de 9 años ejerciendo su profesión y mejorando la vida de las personas, a pesar de que tiene bastantes pacientes de forma constante, su sitio no refleja el verdadero valor de su servicio, por eso era necesario realizar un rediseño web.
Encontré grandes problemas técnicos en su web, y me tomé el atrevimiento de contactarme con ella, simplemente para realizar estos comentarios que seguramente le serían de utilidad a la hora de mejorar su negocio digital.
Tal es así que tuvimos una reunión para charlar de su negocio y su sitio web, me contó que estaba por lanzar su primer curso online y necesitaba mejorar su imagen y presencia digital, a la vez que llevar tráfico hacia su sitio web.
Kick Off – Puntapié Inicial
Antes de comenzar a proyectar cualquier rediseño, es importante dedicarle un tiempo al análisis de la situación actual, definir qué cosas se están haciendo bien y cuáles son las que se deben mejorar.
Este era el diseño de su sitio web, contaba con claros ejes que debían ser mejorados. El primer pantallazo no estaba generando el impacto deseado, cuando ingresabas a su web esta no te invitaba a quedarte y navegar en ella.
Su diseño estaba desactualizado, el uso tipográfico no era el correcto a la vez que emplear textos enteramente en mayúsculas no es una práctica para nada amigable con el usuario. Tenía un slide lo cual es un recurso que dejó de ser efectivo hace tiempo, luce desactualizado, no es práctico a nivel de usabilidad y además genera peso innecesario para la velocidad del sitio.
La página entera contaba con prácticas que no suelen ser muy recomendables, por ejemplo empleaban los iconos de redes sociales en la cabecera, lo cual genera que las personas salgan de nuestra web y no se queden a navegarla, su paleta de colores contrastaba indebidamente, no contribuía a la diferenciación en el mercado, a la vez que no era accesible y tenía problemas de legibilidad.
También debíamos mejorar el copywriting para generar textos que conecten con la necesidad de nuestro público objetivo y ayuden a convertir visitas en clientes.
Sumado a esto, debíamos integrar todos los recursos de su negocio en un único sitio web, ya que tenía un Lead Magnet y un Infoproducto, pero los ofrecía por otros dos canales totalmente distintos. Era necesario estructurar correctamente el negocio.
Establecer los Objetivos del rediseño web
Lo primero que hicimos fue definir el objetivo principal: desarrollar un sitio web profesional que transmita autoridad.
Además era necesario que su diseño tuviera una identidad visual que le permitiera diferenciarse y reflejar el valor de sus servicios.
Otros objetivos fueron:
- Integrar todos los productos y servicios en un único canal.
- Contar con un sitio responsive.
- Mejorar la experiencia del usuario.
- Generar tráfico para la venta de su curso.
Rediseño Web de Nutrición en Marcha
Para rediseñar la web de Belén, planteamos distintas etapas, cada una con entregables para que ella pudiera estar involucrada en el proceso y contribuir a un flujo de trabajo más productivo.
1) Research – Relevamiento inicial:
Lo primero que hice fue identificar, a través de cuestionarios y análisis, el estilo visual con el que mayormente conectaba Belén, siempre dentro de los parámetros del rubro.
Me ocupé de relevar sitios webs que cubrieran problemáticas similares a la Nutrición, para demostrar en mayor profundidad qué recursos funcionaban y cuáles no.
A su vez analizamos a la competencia y a sus referentes. Fue así que notamos la importancia de diferenciarnos del resto.
Esto lo debíamos lograr atacando uno de los mayores problemas que contaba el sitio: la paleta de colores.
2) Tablero inspiracional – Moodboard
Con toda la información recopilada del relevamiento previo, llevé a cabo la creación de un moodboard, se trata básicamente de un tablero en el que volqué los recursos estilísticos y parámetros visuales del nuevo sitio.
Al contar con este tablero, logré identificar rápidamente el estilo preferencial de Belén, establecer una estructura visual clara, a la vez que ahorrar muchísimo tiempo de trabajo.
3) Diseño del Sitemap y Flowchart
4) Estructura del sitio y Wireframes
En esta etapa me ocupé de establecer cuál sería el esqueleto de su sitio web, cómo debían estar estructuradas las secciones, cuál sería el orden de prioridad de cada eje temático, estructura de navegación, entre otras cuestiones.
Así fue que creamos los wireframes, para visualizar correctamente cómo sería la estructura de nuestra nueva página web.
5) Look and feel: Diseño visual
Teniendo definido correctamente la estructura y el sitemap, habiendo identificado un norte visual a seguir, di comienzo al diseño visual del sitio web.
Lo primero fue identificar la paleta de colores adecuada, la marca contaba con una ya establecida y por ende no debía ir muy lejos de esta. Por eso me encargué de definir un color principal, que conectara con la marca a la vez que la diferenciara de la competencia.
Además establecimos colores neutros para utilizar de fondo y un color secundario que funcionara en los llamados a la acción.
En cuanto a la familia tipográfica debía tratarse de una fuente sencilla pero a la vez distintiva, por eso, de entre un gran abanico, elegimos la fuente Rubik.
Un elemento importante en los sitios webs son los iconos, estos acompañan y refuerzan el mensaje de forma muy relevante, por eso buscamos diseñar un sistema de iconos que conecte con la nueva identidad y tenga una buena legibilidad.
Resultado final: Primer pantallazo
Comparemos el rediseño en las secciones principales:
Inicio -Home
Sobre mí
Para el llevar a cabo el rediseño web de la sección «sobre mí» le dimos gran importancia al contenido, si te interesa conocer en profundidad qué debe incluir esta sección, te invito a ver este artículo.
Servicios
Rediseño web en versión responsive
Esto pasó tan solo 2 días luego de finalizar el rediseño web de Nutrición en Marcha
Resultados inmediatos: Luego de finalizar el rediseño web completo, Belén me comentó que por primera vez recibió un paciente proveniente del mismo. Es decir que nunca había tenido pacientes que llegaran por su sitio.
A los pocos días volvió a comentarme que llegaron dos pacientes más, uno a través de su formulario de contacto optimizado con filtro de categorías para que ella ahorre tiempo conociendo la especialidad que solicitaba su consultante, y otra pacienta llegó a través del botón de WhatsApp que ubicamos en la página de contactos.
Si quieres obtener estos y más resultados aún con tu negocio de nutrición, te recomiendo que agendes una llamada gratuita conmigo.
