Un sitio web sirve como puerta de entrada fundamental a nuevas oportunidades comerciales. Crear un nuevo sitio web o rediseñarlo puede ser un viaje desafiante. Después de liderar el rediseño del sitio web de mi empresa, decidí compartir un poco de nuestro viaje. Si está considerando crear un nuevo sitio web o rediseñar el actual, esperamos que esto le ayude a hacer su viaje más sencillo.

Evaluación

Nuestro sitio web es una puerta de entrada importante para nuevos negocios para nosotros. Al ser una boutique de desarrollo web, la forma en que nos presentamos en línea dice mucho sobre nuestro trabajo y lo que los clientes pueden esperar cuando trabajan con nosotros.

Una vez que decidimos que queríamos crear un nuevo sitio web que coincidiera con nuestra nueva marca, teníamos claro que teníamos que predicar con el ejemplo y mostrar a nuestros clientes y audiencia un sitio web de buena calidad. Nuestro equipo puso mucho pensamiento y esfuerzo en la fase de preparación antes de comenzar a trabajar.

• Comenzamos con una pregunta simple: ¿Por qué necesitamos un sitio web o un rediseño? Esta es una excelente manera de mantener el enfoque en sus objetivos y evitar desviarse.
• Una vez que entendimos nuestro por qué, pasamos por el proceso de identificar nuestro público objetivo. Para quién estábamos construyendo este sitio web. Es esencial comprender claramente a quién intenta llegar y qué quiere que sepan sobre su marca y su trabajo.
• Luego empezamos a pensar en el mensaje que queríamos transmitir a esa audiencia, cómo queríamos que nos vieran y, lo más importante, cómo podíamos demostrar que éramos buenos en lo que hacemos. Gran parte de este mensaje fue pensado durante la creación de la marca (mira cómo creamos nuestra nueva marca ) y teníamos que transmitirlo al nuevo sitio web.
• Como ya teníamos presencia en línea, nos tomamos un tiempo para evaluar nuestro antiguo sitio web y enumerar las características y aspectos que creíamos que funcionaban bien y lo que creíamos que faltaba.
• También fue muy importante en todo este proceso hacer un seguimiento con un Benchmark de Competidores para tratar de entender qué estaban haciendo las empresas de nuestra industria. También buscamos en otros tipos de sitios web para obtener referencias e inspiración. Esto nos brindó información valiosa y nos ayudó a evitar repetir errores o perdernos funciones esenciales.
• El paso final de esta fase de preparación fue la Lista de características y funcionalidades que queríamos tener en nuestro sitio web. Esto fue como crear una lista de deseos como si pudiéramos hacer todo lo que quisiéramos. Posteriormente se priorizó la lista y seleccionamos las características que eran IMPRESCINDIBLES y las que era AGRADABLE TENER y que podrían implementarse más adelante. Es importante centrarse primero en los elementos más críticos.

Algunos de esos pasos se realizaron junto con todo el equipo. Al ser un equipo pequeño, queríamos que todos estuvieran involucrados en este proceso hasta cierto punto. Después de esta primera evaluación, comenzamos a dividir y conquistar y contamos con miembros del equipo dedicados y responsables de transformar nuestro nuevo sitio web en una realidad.

Diseño

Estábamos emocionados de sumergirnos en el proceso de diseño de nuestro proyecto web. El diseño UI/UX es un aspecto crítico de cualquier proyecto web. Teníamos un equipo multidisciplinar involucrado, pero el diseñador era la estrella del espectáculo, el responsable de crear la representación visual del mensaje que queríamos transmitir a nuestra audiencia.

Era esencial que el diseñador entendiera claramente las necesidades y expectativas del proyecto para transmitir nuestro mensaje visualmente y estructurar el contenido en consecuencia. Nuestro objetivo era un diseño conciso y atractivo con el tono adecuado.

Durante esta fase del proyecto, seguimos estos pasos:

• Adoptamos un enfoque centrado en el usuario desde el principio. Nos centramos en cómo nuestro público objetivo nos percibiría e interactuaría con nosotros. Por eso comenzamos trabajando en la Arquitectura de la Información, decidiendo las páginas, secciones y componentes necesarios y creando un primer borrador de la copia.
• A continuación, creamos estructuras alámbricas de baja fidelidad para proporcionar una representación aproximada y de baja fidelidad del diseño y la funcionalidad. Nos permitió probar y experimentar con ideas antes de invertir demasiado tiempo y esfuerzo en el diseño. También consideramos el flujo general de usuarios en esta etapa.
• Esta fase fue crítica ya que sentó las bases para todo el panorama de componentes que se utilizarán: la creación de un sistema de diseño. Construimos una biblioteca usando Figma que incluía patrones de diseño, pautas y ejemplos. Esta biblioteca era una fuente única de verdad, asegurando la coherencia entre todos los elementos de la interfaz de usuario y sentando las bases para la escalabilidad al introducir nuevos componentes.
• Una vez definido el sistema de diseño, construimos los diseños en Alta Fidelidad. Aplicamos la interfaz de usuario a los wireframes de baja fidelidad creados hasta entonces. En esta etapa, se probó completamente el diseño para comprobar que cumplía con los requisitos de accesibilidad y sacamos conclusiones más refinadas con respecto a la visualización del contenido.

Usamos Figma durante todo el proceso, lo que facilitó la colaboración con el equipo y la realización de iteraciones. Después de algunas iteraciones, teníamos una versión óptima en la que nuestros desarrolladores podían trabajar.

Desarrollo

Nos centramos en seleccionar la pila tecnológica e implementar los diseños en la fase de desarrollo del proyecto. Trabajamos en sprints basados en un product backlog con historias de usuarios creadas por nuestro gerente de proyecto.

Elegir la pila de tecnología

A medida que avanzaba la fase de diseño, investigamos qué tecnologías se adaptaban mejor al sitio web que queríamos crear. Nuestros desarrolladores pudieron determinar esto basándose en los resultados de las fases anteriores.

Elegir la pila tecnológica adecuada se ha vuelto más importante que nunca en el mundo actual, ya que hay muchas opciones disponibles. Consideramos varios criterios, como los requisitos del proyecto, la experiencia del equipo, la disponibilidad de recursos, los costos, el rendimiento, la seguridad y la escalabilidad.

Queríamos un sitio web simple, rápido y hermoso para este proyecto.

Adoptamos un enfoque modular, dividiendo los componentes, las características y la funcionalidad del sitio web en componentes más pequeños y reutilizables. Este enfoque nos permitió reutilizar componentes en diferentes partes del sitio web, lo que facilitó la colaboración entre desarrolladores y diseñadores, facilitó probar y mantener lo desarrollado y, en última instancia, permitió mejorar el rendimiento y reducir los tiempos de carga de la página.

Nuestros desarrolladores abogaron por Astro , un marco web todo en uno para sitios web rápidos y centrados en el contenido. Estaban ansiosos por probar el marco centrado en contenido más rápido que existe. Tres cosas llamaron la atención de nuestro equipo: renderizado del lado del servidor, resultados de rendimiento y flexibilidad.

Con el sitio web simple que buscábamos, no necesitábamos un sistema de gestión de contenido (CMS) completo, pero queríamos permitir que miembros del equipo no técnicos trabajaran en el sitio web. Investigamos exhaustivamente diferentes opciones de CMS y finalmente elegimos Sanity debido a sus sólidas funciones y facilidad de uso. Sanity también tenía excelente documentación y un nivel gratuito muy generoso.

Además de Astro y Sanity, también decidimos utilizar Netlify para nuestro proyecto. Bueno, siempre lo hacemos. Las perfectas capacidades de implementación y alojamiento de Netlify suelen ser nuestra red de entrega de contenido (CDN) de referencia. También utilizamos varias bibliotecas para animaciones, que analizamos con más profundidad en otra publicación del blog (próximamente).

Un aspecto a mejorar fue el formulario que creamos para que los clientes potenciales se comunicaran con nosotros. Usamos el formulario de Netlify, que resultó no ser la mejor opción debido a los problemas de Forms con Astro. Encontramos una solución (hot-fix) y creamos una sola página para nuestro formulario de contacto. Todavía estamos considerando cómo cambiar esto para el futuro.

Proceso de desarrollo

Antes de comenzar con la fase de desarrollo, el director del proyecto creó un trabajo pendiente del producto con detalles sobre todas las características y funcionalidades que desarrollaría el equipo. Estas historias de usuarios hicieron que el proceso de desarrollo fuera fluido y transparente. Antes de crear el sitio web, el equipo tuvo que priorizar las características y funcionalidades que formarían parte de la primera entrega del sitio web.

Para el repositorio de código, utilizamos GitHub (GH) y utilizamos sus tableros de gestión de proyectos y funciones de planificación de sprints. GH suele ser nuestra elección para el sistema de control de versiones, pero hemos empezado a utilizar Notion Projects y nos encanta para la gestión de proyectos.

Comenzamos a implementar los diseños. Seguimos la metodología ágil y trabajamos en sprints para asegurarnos de estar encaminados y entregar resultados dentro de los plazos establecidos. Una pequeña nota: este era un proyecto interno y nuestra principal prioridad eran los proyectos de nuestros clientes. Esto significa que los sprints se realizarían poco después de que nuestro equipo tomara un descanso de otros proyectos. Normalmente no es así como trabajamos, pero así fue como lo logramos y una lección aprendida para no repetirlo.

Otro punto crítico para hacer que todo el proceso de desarrollo fuera transparente y ágil fue tener un vínculo de puesta en escena desde el inicio del proyecto. Todos los involucrados en el proyecto tuvieron acceso a él y pudimos ver el progreso, dar retroalimentación y hacer cambios y pequeñas adaptaciones cuando sentimos que era necesario.

Durante la fase de desarrollo, el equipo de marketing pudo comenzar a insertar contenido. Esto les ayudó a acostumbrarse a Sanity y contribuyó a rondas de retroalimentación más realistas. En general, la fase de desarrollo fue un esfuerzo colaborativo que involucró a todo el equipo trabajando en conjunto para lograr los objetivos del proyecto.

Seguro de calidad

Durante el desarrollo, uno o dos desarrolladores probaron cada característica y funcionalidad. Todo el código pasó por una revisión de código y, al final, hicimos un sprint final para probar y asegurarnos de que el sitio web funcionara como debería.

Las pruebas de usabilidad y accesibilidad ya se realizaron durante la fase de diseño, como se describe anteriormente. Para las pruebas generales, utilizamos las historias de usuarios y los criterios de aceptación creados por nuestro director de proyecto como guía.

• Pruebas funcionales: confirme que todas las funciones funcionaban como se esperaba.
• Prueba de rendimiento: verifique la carga de velocidad y otras puntuaciones usando Lighthouse.
• Pruebas en varios navegadores y dispositivos: pruebe el sitio web en varios navegadores web (por ejemplo, Chrome, Firefox, Safari, Edge) y dispositivos (computadora de escritorio, móvil, tableta) para garantizar la compatibilidad y una experiencia de usuario consistente. Para ello utilizamos BrowserStack . Su producto es muy intuitivo de usar y permite realizar muchas pruebas.

Preparación para la puesta en marcha

Estábamos listos para hacer que el sitio web estuviera activo en el enlace de prueba, pero antes de continuar con ello, debíamos considerar cuidadosamente dos cosas cruciales: la redirección al nuevo dominio y el SEO. Dado que planeamos cambiar el dominio, era crucial asegurarnos de que nuestra clasificación SEO no se viera afectada.

Por lo tanto, decidimos utilizar redireccionamientos 301 para informar a los motores de búsqueda y navegadores que la URL original había sido reemplazada permanentemente por una nueva. Esto es lo que hicimos:

• Lista de todas las páginas del sitio web actual:
• Si la estructura de URL de una página se mantuvo igual, confirme que la redirección 301 estaba funcionando.
• Cuando la URL de la página anterior no esté en el nuevo sitio web, cree una redirección a la página más adecuada.
• Enumere las páginas indexadas en Google para garantizar que tengamos redireccionamientos para todas ellas.
• Utilice Netlify para redirigir todo, siguiendo los pasos de su Documentación de Netlify .
• Notificar a Google sobre el cambio en la consola. Cambio de dirección herramienta.
• Pídale a Google que reindexe el nuevo dominio para que no aparezcan páginas antiguas. Esto se hizo directamente en Google Console, siguiendo los pasos disponibles en la Documentación de la consola de Google.

Por último, pero no menos importante, nos tomamos el tiempo para trabajar para asegurarnos de haber considerado las mejores prácticas para una mejor clasificación SEO y de identificar lo que era necesario mejorar. El equipo de marketing se aseguró de seguir lo siguiente:

• Para optimizar el nuevo sitio web para palabras clave relevantes que buscan obtener una clasificación más alta en los resultados de los motores de búsqueda y atraer tráfico orgánico, seguimos con una búsqueda de palabras clave utilizando herramientas como Google Keyword Planner o SEMrush para descubrir palabras clave populares y menos competitivas.
• Intentamos en la medida de lo posible optimizar las metaetiquetas de título y las metadescripciones en cada página web, incorporando palabras clave relevantes y llamadas a la acción convincentes para atraer a los usuarios a hacer clic desde las páginas de resultados de los motores de búsqueda (SERP).
• Se aseguró de que las URL fueran limpias, concisas e incluyeran palabras clave específicas.
• Texto alternativo: proporcione texto alternativo descriptivo para las imágenes, utilizando palabras clave cuando corresponda.
• Confirme la optimización de la velocidad de la página (con la pila que usamos, fue difícil no obtener un gran resultado aquí).

Resultado

Bueno, fue un largo viaje hasta que tuvimos nuestro sitio web activo. ¿Pero adivina que? El trabajo continuó más allá del lanzamiento.

La primera fase fue una base sólida para lo que queríamos lograr. Construirlo con un enfoque modular también nos dio la flexibilidad de iterar, cambiar y adaptar el sitio web a nuevas tendencias y necesidades. Estamos contentos con el resultado y orgullosos de cómo hemos llegado hasta aquí. Esperamos que al compartir nuestro viaje, sepa qué esperar al crear un nuevo sitio web o rediseñarlo.

Para resumir todo lo que hemos compartido aquí, hemos preparado una pequeña hoja de referencia para que puedas usarla en tu proyecto.