Rediseño de sitio web , la guía completa

Una guía sobre cómo hacer un rediseño de sitio web web pensando en los clientes. Ya que estás aquí, probablemente estés pasando por un rediseño de tu sitio web o al menos estés considerando hacerlo. Tal vez tu sitio se vea anticuado y sientas que es hora de un cambio, o tal vez haya un problema de estancamiento del tráfico y disminución de las conversiones que quieras abordar rediseñando la experiencia.

¿Qué es el rediseño de un sitio web?

Un rediseño del sitio web es una revisión de alto nivel que implica un cambio significativo de elementos como el código, el contenido, la estructura y los elementos visuales de su sitio web actual para servir mejor a sus visitantes. Un buen rediseño de sitio web tiende a aumentar los ingresos, reducir las tasas de rebote y mejorar la experiencia del usuario (UX).

Su sitio web es la cara de su negocio y constituye la base de su identidad digital. Un sitio web consta de dos partes: el backend y el frontend. El backend o el código dirige el sitio web y sus funcionalidades, mientras que el frontend determina el aspecto de su sitio. El rediseño de sitio web es la revisión de cualquiera de estas dos partes (o de ambas).

Visualicemos su sitio web como un coche. El motor y otras partes mecánicas y eléctricas constituyen su backend, mientras que el interior y la pintura exterior, el capó, los neumáticos, el parabrisas y los faros del coche forman el frontend.

El inicio de cada rediseño tiene una historia de fondo. Las razones que motivan la decisión de rediseñar pueden ser variadas, pero lo que constituye todo proyecto de renovación de un sitio web es un conflicto aparente y una propuesta de resolución con un plan de acción. El proceso de implementación de este plan de acción se ha discutido en detalle en esta guía.

Sin embargo, antes de sumergirse en el proceso de rediseño de un sitio web, es crucial comprender el propósito fundamental del rediseño.

Antes de lanzarse al proyecto de rediseño hay que analizar críticamente los siguientes pasos:

1. Objetivos del sitio web: Determine los objetivos del sitio web para definir sus iniciativas, metas y medidas para el rediseño, y qué métricas quiere tener para lograr su objetivo.
2. Auditoría de la eficacia del sitio web: Lo primero que hay que hacer es auditar las capacidades internas de su web. Por ejemplo, con el análisis DAFO, puede analizar la eficacia general de su sitio web. Realice un análisis del sector para determinar las tendencias y las mejores prácticas.
3. Identifique las carencias: Cree una lista de comprobación de la infraestructura del sitio web que incluya a las personas, los procesos y la tecnología para identificar cualquier carencia. Por ejemplo, para mejorar la UX, puede identificar elementos específicos de la página web, como un botón CTA mal colocado, un formulario web incompleto o cualquier cosa que distraiga o confunda a los visitantes.
4. Prepare una hoja de ruta: Identifique los pasos y las tecnologías que necesita para cerrar las brechas. Por ejemplo, puedes hacer pruebas A/B de los elementos que causan problemas y corregirlos en el nuevo diseño del wireframe.

El proceso de rediseño puede mejorar potencialmente el rendimiento del sitio web si se tienen claros los objetivos del mismo. El proceso conlleva aspectos técnicos que implican la finalización de una combinación de colores, fuentes, logotipo, elementos de diseño, colores de los botones, colocación de los botones, etc. Desde el punto de vista de la codificación, sería crucial centrarse en el sistema de gestión de contenidos, el lenguaje de codificación, etc.

6 preguntas que hay que hacerse antes de un rediseño web

La investigación es una parte crucial del proceso de rediseño de sitio web: es la mejor manera de descubrir lo que funciona y lo que no, y de profundizar en lo que quieren sus clientes objetivo y en cómo hacer que su sitio web sea más fácil de usar. Cuando empiece a pensar en un rediseño (o actualización), hay algunas preguntas sobre su sitio web actual y sus clientes que DEBE poder responder:

1. ¿Cuáles son sus páginas más valiosas en este momento?
2. ¿Quién acude a su sitio web y por qué?
3. ¿Qué necesidad específica y medible de los clientes no se satisface con el sitio web actual?
4. ¿Para qué utiliza el sitio web el resto de su equipo/empresa?
5. ¿Qué páginas y elementos funcionan bien?
6. ¿Cómo va a medir el éxito del rediseño?

No se asuste si no tiene las respuestas de inmediato. Vamos a utilizar el resto de este capítulo para analizarlas y ayudarle a desarrollar una estrategia de rediseño del sitio web, para que pueda estar seguro de que está haciendo su rediseño por las razones correctas y enfocándolo de la manera más eficaz.

1º Saber cuáles son las páginas más valiosas de su sitio web

Piense en el proceso de rediseño de sitio web como si fuera la remodelación de una casa. No empezaría una remodelación moviendo el martillo en direcciones aleatorias y derribando paredes sin comprobar primero si son resistentes. Del mismo modo, antes de lanzarse a un rediseño, debería tener un mapa claro del ecosistema de su sitio web, examinar sus esquemas y saber qué páginas deben tratarse con cuidado y cuáles pueden derribarse y reconstruirse desde cero.

Páginas de alta conversión y alto tráfico.

→ estas son las páginas más preciadas y valiosas para tu negocio: cualquier error que cometas aquí podría tener consecuencias desastrosas, por lo que debes abordarlas con precaución y 10 veces más cuidado en comparación con todo lo demás que vayas a rediseñar en tu sitio web.

Páginas de alta conversión y bajo tráfico

→ estas páginas son importantes debido a las conversiones que conducen, incluso si actualmente no tienen mucho tráfico, lo que significa que necesitas abordar el rediseño con cuidado para no romper nada que ya esté funcionando.

Páginas de alto tráfico y baja conversión

→ El tráfico es alto en estas páginas, pero algo no está funcionando en cuanto a la conversión. Rediseña teniendo en cuenta la mejora: no estás arriesgando las conversiones con los cambios que hagas, así que puedes permitirte ser más experimental que en las dos categorías anteriores.

Páginas con poco tráfico y poca conversión

→ los cambios en estas páginas probablemente no se van a notar debido al bajo tráfico, y de todos modos no estás arriesgando las conversiones. Rediseña todo lo que quieras: estas son las páginas más libres de riesgo de tu sitio.

2: Saber quién visita su sitio web y por qué

Según nuestra experiencia, identificar las páginas más valiosas es una de las partes más olvidadas del rediseño de sitio web. Pero averiguar cuáles son las páginas importantes es sólo la mitad de la historia: también hay que saber quién las visita y por qué.

Hace unos años, un estudio de Google demostró que hay cuatro tipos de intenciones principales que llevan a la gente a un sitio web: «Quiero saber», «Quiero ir», «Quiero hacer» y «Quiero comprar».

• En este marco, los visitantes del sitio web pueden llegar a él porque
• Tienen curiosidad por saber algo sobre su marca o sus productos.
• Quieren ponerse en contacto con usted (por ejemplo, encontrar un lugar físico al que acudir)
• Necesitan aprender a hacer algo con uno de sus productos
• Están dispuestos a comprarle algo

Estas son razones muy diferentes para visitar una página, y rediseñar con sus clientes en mente significa conocer la intención o el «conductor» que los lleva allí. Una forma de hacerlo es crear personas de clientes: representaciones semi-ficticias de sus clientes actuales e ideales, basadas en datos demográficos y psicográficos reales. Las personas le ayudan a determinar con un buen grado de claridad

Quiénes son tus clientes ideales (menos en plan «mujer, 42 años, con dos perros, que vive en la ciudad» y más en plan «gestor de proyectos que dirige un equipo remoto de 5 personas»)

Cuál es su principal intención o «motor» cuando visitan páginas específicas de tu sitio web (por ejemplo, el gestor de proyectos que dirige un equipo de 5 personas podría estar «buscando comprar un software que le ayude a automatizar el 30% de sus tareas»)

3: Conozca lo que impulsa o detiene a sus clientes.

Saber cuáles son sus páginas más valiosas y quiénes llegan a ellas (y por qué) es un sólido punto de partida para el diseño web, pero no es suficiente para que éste tenga éxito. En este punto, todavía hay dos lagunas principales en su conocimiento: lo que está convenciendo/ayudando a los clientes a completar las acciones que vinieron a hacer, y lo que los detiene en el camino.

• Se trata de las «barreras» y los «ganchos» que encuentran los clientes en el sitio web:
• Investigar las barreras y los ganchos le ayudará a formarse una idea clara de:
• Dónde se atasca la gente y tiene problemas
• Lo que funciona y lo que no en cada página.
• Lo que le gusta y lo que no le gusta a la gente de la experiencia general
• Si sus CTA actuales funcionan
• Si las experiencias difieren entre los dispositivos móviles y el escritorio
• Qué es lo que casi impide que la gente convierta
• Qué está creando dudas y frustracióna

4: Haga participar a su equipo en el proceso de rediseño web

En lugar de hacer la habitual gran presentación del sitio web rediseñado en toda la empresa una vez que esté todo hecho, considere la posibilidad de involucrar a la gente desde el principio del proceso. Su sitio web tiene un impacto en todos los aspectos de su negocio, y todos los que trabajan con él (y con los clientes) deben ser conscientes de lo que va a cambiar. Por ejemplo:

Los equipos de diseño y UX tendrán que asegurarse de que la experiencia del usuario no se vea comprometida y tendrán una visión crucial de los elementos de diseño del sitio web que deben añadirse, cambiarse o rehacerse.

Los equipos de contenido y redacción estarán a cargo de los nuevos textos y decisiones editoriales, y necesitarán saber dónde se muestra su nuevo contenido y con cuánto espacio cuentan para trabajar.

Los equipos de SEO (optimización de motores de búsqueda) y de desarrollo querrán supervisar los aspectos técnicos del rediseño, incluida una posible migración de URL, para asegurarse de que nada se rompe en una página y de que las clasificaciones de los motores de búsqueda existentes no se hunden tras el lanzamiento.

Los representantes de ventas pueden utilizar el sitio web para captar clientes potenciales y tendrán que conocer los pormenores de su estructura actualizada.

Los equipos de asistencia y éxito tendrán que saber a dónde dirigir a los clientes que buscan información o resolución de problemas.

5: Saber medir el éxito con indicadores clave de rendimiento (KPI)

Si se trata de un negocio que vende en línea, las métricas relacionadas con su cuenta de resultados son la forma más precisa de ver si sus cambios fueron exitosos. Van directamente al grano: ¿su rediseño ha sido rentable para el negocio?

Las métricas relacionadas con los ingresos se relacionan con el objetivo de su rediseño: crear un sitio que guste a sus clientes objetivo y, por lo tanto, que compren en él. Incluyen:

• Número de conversiones
• Tasa de conversión
• Ingresos
• Valor medio de los pedidos (AOV)
• Valor de vida del cliente (CLV)

6: Saber qué cambiar y cómo probarlo

Ya ha investigado, ha establecido sus indicadores clave de rendimiento (KPI) y está listo para comenzar el rediseño. Es probable que la tentación de reformar completamente su sitio de una sola vez le esté acechando, pero una forma más segura y eficiente de hacerlo es centrarse primero en las pequeñas cosas que pueden marcar una gran diferencia, realizar los cambios y probar los resultados.

Las pruebas A/B suelen ser una buena solución, sobre todo si tienes suficiente tráfico para obtener resultados estadísticamente significativos. Simplemente toma uno de sus nuevos elementos y prueba el impacto en el objetivo de su sitio en comparación con el sitio actual. Por ejemplo, podría:

Probar si el vídeo de su página de inicio (que los clientes actuales ya le han dicho que les gusta) podría moverse por encima del pliegue. Si eso funciona…

Probar si la prueba social marca la diferencia en las conversiones de la página de pago. Si lo hace…

Continúe con otro cambio

Pero si no tienes suficiente tráfico o una herramienta de pruebas A/B, hay otras formas de probar la eficacia de algunos diseños de sitios web; por ejemplo, puedes considerar la posibilidad de realizar sesiones de pruebas de usabilidad moderadas, tanto en persona como a distancia, en las que muestres tu(s) nueva(s) página(s) a personas reales, hagas que interactúen con ella(s) y hagas preguntas sobre su experiencia y los obstáculos que encuentran.

Estrategias de rediseño de sitio web y hoja de ruta

El rediseño de sitio web es un proyecto de gran envergadura, independientemente del tamaño de su organización, sobre todo si quiere hacerlo con eficacia. Una investigación exhaustiva, una planificación adecuada y un poco de previsión le ayudarán a que su próximo rediseño sea un éxito considerable, a la vez que lo hace menos estresante.

Veamos los pasos para construir una estrategia de rediseño de sitio web con éxito:

1. Establezca un objetivo
   Analizar lo que quiere de su nuevo sitio, lo que le ayudará a centralizar sus esfuerzos y determinar si necesita un rediseño. Preparar una lista de objetivos específicos y procesables, como el aumento de su tráfico web, la disminución de las tasas de rebote, etc., que planea lograr a través de un rediseño lo mantiene organizado y motivado.
2. Desarrollar un diseño centrado en el usuario (DCU)
   El DCU siempre se centra en tener un profundo conocimiento de los usuarios, sus requisitos, valores, habilidades y limitaciones. Según Plus, Statista, más del 50% de todo el tráfico web proviene de dispositivos móviles, y es probable que esto aumente. Asegúrese de que su sitio web es responsivo para móviles, para no perder el tráfico que llega desde los dispositivos móviles.
3. Introducir el rediseño de la UI
   Si puedes imaginar el diseño de UX como un vehículo, el diseño de UI es la consola de conducción. Cuando revises el rediseño de web, empieza con un inventario de la interfaz, que no es más que una recopilación exhaustiva de los elementos, por ejemplo, la tipografía, el contenido (texto, imágenes, logotipos) y las fuentes que componen tu interfaz. Garantiza que las interfaces de usuario se desarrollen de forma coherente dentro de un marco global. La interfaz de usuario nunca debe ser complicada y debe dar a los usuarios la dirección para realizar sus tareas (microconversiones) en su sitio web.

4. Rediseñar la arquitectura de la información (AI) del sitio web
   Las arquitecturas de la información de éxito se comprometen a entender a los usuarios. La optimización de la AI comienza con el análisis del contenido y la estructura de su sitio web. Por ejemplo, puede hacer un ejercicio de clasificación de tarjetas para los elementos complicados de su sitio web que hacen que la mayoría de los visitantes abandonen. Cuando estas prácticas se combinan con otras técnicas de diseño centrado en el usuario, un proceso evolucionado puede llevarte muy lejos en tus proyectos de rediseño.

5. Crear los wireframes renovados
   Un wireframe es un plano de un sitio web que puede ser utilizado por todos los equipos funcionales para su ejercicio de rediseño. Puedes empezar con las pruebas de usabilidad de tus ideas de maquetas tan pronto como tengas un borrador para encontrar ideas sorprendentes que puedan ser implementadas en tu esquema de rediseño.
   1. Además de papel y bolígrafo, puedes utilizar herramientas como MockFlow, OmniGaffle y GoMockingbird para tu ejercicio de rediseño de wireframes.
6. Centrarse en el contenido
   El objetivo de su sitio web debe ser ayudar a los usuarios a encontrar información y completar tareas, por lo que su contenido debe ser fresco, y la información proporcionada debe ser útil y sostenible. El contenido rediseñado debe estar centrado en el usuario y contener mensajes concisos que ayuden a tus usuarios a realizar la acción deseada.
7. Garantizar la versatilidad y adaptabilidad del diseño del sitio web
   La versatilidad de su sitio web debe tenerse en cuenta durante el rediseño. Debe ser capaz de hacer los ajustes necesarios, siempre y cuando sea necesario, para mantener las cosas frescas y en funcionamiento. Asegurarse de que su sitio web tiene un diseño adaptable le ahorrará mucho tiempo y recursos.
8. Poner en marcha el sitio web revisado
   Prepare y siga una lista de comprobación para el lanzamiento y realice comprobaciones de calidad del trabajo realizado. No debe dar el pistoletazo de salida en caso de que alguno de sus trabajos en la página o los redireccionamientos no estén en su sitio o probados. Debe aprovechar su sitio web de manera similar a cualquier herramienta de marketing, comprometiéndose con su comunidad, conectando con ellos en las plataformas sociales y a través de correos electrónicos compartiendo el nuevo aspecto de su sitio web.
9. Desarrolle una estrategia posterior al lanzamiento
   Tenga una estrategia completa y planificada para el rediseño de sitio web. El CMS diseñado no sólo debe permitir el cambio, sino que debe estar respaldado por un equipo que analice los datos obtenidos del rediseño. También debería ayudar a utilizar esta información para mejorar el resto de su estrategia de marketing digital, incluyendo el marketing por correo electrónico, la gestión de la pequeña empresa, el SEO, etc.

Fases del rediseño web

Entendamos las fases del rediseño de sitio web en los siguientes Puntos:

Fase de contenido y SEO

La estrategia de SEO impulsa el contenido. El primer paso es la auditoría de contenido, que construye una lista maestra de todo su contenido y puede descubrir las relaciones entre sus tipos de contenido en su sitio web previamente desconocido.

Comience con la navegación en la parte superior de la página de inicio de su sitio web.
Debe evaluar el tipo de contenido bajo cada tema. ¿Necesitan estos temas una nueva subagrupación? En caso afirmativo, clasifíquelos en el siguiente nivel.
No debe terminar este ejercicio hasta llegar a los títulos de las páginas específicas. Una vez que llegue allí, habrá alcanzado el máximo nivel de detalle. En la mayoría de los casos, el grupo de contenido más grande será su blog.
La clasificación por tarjetas es uno de los métodos que ayuda a crear un prototipo de contenido. Este prototipo es impulsado por los conocimientos de las pruebas de usuarios. La investigación cuantitativa a través de los informes de UX, los mapas de calor, las grabaciones de las sesiones y las pruebas que centran el comportamiento de los clientes potenciales también complementan los conocimientos esenciales tanto para el contenido como para el SEO.

Con estos conocimientos, el SEO gestiona la capacidad de descubrimiento de su sitio web en los motores de búsqueda mediante la optimización de elementos como los textos alternativos, las etiquetas HTML, las palabras clave irrelevantes, las consultas sintácticas, etc. Puede evaluar el SEO de su sitio web utilizando herramientas en línea como Website Grader, SEOptimer, o alguna de las muchas otras para detectar errores en su sitio web actual. En el caso de que se añadan nuevas características en el proceso de rediseño, el SEO también examina las consultas de sintaxis dirigidas con la nueva característica.

Fase de diseño

Sobre la base de los resultados de la investigación cuantitativa y cualitativa, se han tomado decisiones al desarrollar un esquema inicial y un prototipo que se puede pulsar. La fase de diseño es el momento en que se lleva el wireframe del papel o la pizarra al ordenador.

El wireframing y el prototipado son esenciales para la creación de páginas web y apps y la arquitectura de la información que debe cuidarse a través de los menús, las migas de pan y los enlaces de tu sitio web. El proyecto debe ser una actividad de colaboración, y todos los equipos involucrados deben estar alineados mientras se finaliza el flujo del sitio web y las funcionalidades para el rediseño. Se pueden utilizar herramientas de creación de prototipos como Sketch, AdobeXD, Figma, etc.

Las pruebas de usabilidad, que ponen en práctica la investigación, también forman parte de la fase de rediseño.

Se puede utilizar un prototipo de baja fidelidad para obtener información de los usuarios y optimizar el diseño durante esta fase. Las rondas posteriores de revisión y pruebas suelen ofrecer comentarios tanto generativos como evaluativos para perfeccionar el diseño. Es mejor hacerlo en la fase de diseño, ya que sería agotador de recursos ajustar los diseños en la fase de desarrollo.

Fase de desarrollo

Después de realizar todas las reuniones de investigación e ideación, se crea un sitio web en la fase de desarrollo. Las páginas vacías, también conocidas como shells, se construyen a partir del mapa del sitio. Se prueban todas las funcionalidades del sitio web, y los elementos del sistema de gestión de contenidos, como los carros de compra y los formularios de comercio electrónico, también se ponen en funcionamiento durante esta fase.

Asegúrese de que la comunicación entre los desarrolladores y el equipo de diseño es sólida mientras se realizan los cambios. Lo ideal es que todos los cambios se incorporen durante la fase de diseño y se prueben en el prototipo mientras se finaliza el wireframe. No se recomienda añadir ningún cambio en el sitio web más allá de esta fase.

Fase de prueba y entrega

Con un sitio web listo, su diseñador web le da una mirada final y comienza a probar la funcionalidad y la accesibilidad (instalación de plugins y SEO), asegurando la optimización para diferentes versiones de los navegadores, y más. Los diseñadores web deben asegurarse de que su sitio web cumple con los últimos estándares de desarrollo web.

Después de obtener la aprobación final de su equipo de desarrollo, es el momento de entregar el sitio web. Generalmente se utiliza un programa FTP (File Transfer Protocol) para subir los archivos del sitio web a su servidor. Los diseñadores web también ofrecen servicios de registro de nombres de dominio y de alojamiento web. También se pueden hacer recomendaciones.

Una vez que se hayan configurado estas cuentas, y que su sitio web se haya cargado en el servidor después de configurar estas cuentas, y como paso final de precaución para garantizar la plena funcionalidad del sitio, debe someterse a una última prueba de funcionamiento.