PROYECTO DE DISEÑO Y
DESARROLLO WEB A MEDIDA

0. Mock-ups 2025

1. Investigación

Al comenzar con el proyecto, la primera fase se definió como un estudio exhaustivo del mercado de coworking en Albacete, los negocios, empresas o lugares que satisfacen las mismas necesidades de nuestros potenciales clientes, así como la manera en que presentaban su marca en el mercado.

Analizamos las necesidades específicas de los profesionales locales, como autónomos o start-ups y adaptamos nuestro enfoque de comunicación para dirigirnos a ellos, en relación a los factores decisivos de elección de una oficina/despacho/lugar de teletrabajo.

Analizar la competencia, las tendencias del sector, los términos clave en cuanto a posicionamiento y las preferencias de los usuarios potenciales. Este fue el el primer paso para trazar una estrategia de branding coherente a la realidad actual, a nivel local.

2. Definición

Basándonos en la investigación, definimos los objetivos principales del sitio web:

  • Mostrar las instalaciones, despachos y servicios del espacio de coworking.
  • Crear una interfaz para el usuario con una navegación sencilla e intuitiva, favoreciendo que el usuario pueda resolver cualquier duda que pueda tener.
  • Partir de un diseño mobile-first y adaptarlo a diferentes dispositivos, ya sea tablet u ordenador.
  • Destacar la ubicación estratégica en el centro de Albacete como keypoint de reconocimiento y argumento de venta.
  • Mejorar la visibilidad online en búsquedas locales y el posicionamiento en buscadores a partir de palabras clave como «coworking», «despachos y oficinas Albacete» o «espacio coworking en Albacete».

3. Sistema de Diseño

Desarrollamos la arquitectura de la información y estructuramos la página web favoreciendo la navegación fluida de los usuarios, resolviendo las principales cuestiones que pudieran plantear.

Queríamos enfocamos en una navegación intuitiva y en resaltar los puntos fuertes del espacio de coworking, relacionados con su localización geográfica. Paralelamente, desarrollamos los aspectos principales que irían a definir la esencia de la marca hub36: sus tipografías, colores, guía de estilo, ilustraciones y tono de la comunicación.

A continuación comparto las «Foundations» que se diseñaron en Figma al inicio del proyecto, para establecer una base de diseño desde la que partimos y fuimos creando y evolucionando en el diseño.

4. UI Branding

Creamos una identidad visual moderna y profesional que refleja el espíritu innovador del coworking. Utilizamos una paleta de colores que transmite creatividad y colaboración, junto con tipografías legibles y un estilo de iconos e ilustraciones coherente.

Nos centramos en representar la cercanía y la transparencia como valores para definir la zona o espacio de coworking, unido a un espíritu joven y desenfadado.

Elegimos el nombre de hub por su traducción al inglés como «puerto» y enlazado a ese valor o significado de conexión/conectividad. El nombre se convertiría en una representación del espacio y el desarrollo de la vida y las relaciones en el mismo.

5. Resultados Finales y SEO

Durante los siguientes meses, fue un trabajo continuo para diseñar y desarrollar un sitio web responsive y atractivo que incluye entre otras cosas:

  • Galería con fotos actualizadas de los despachos.
  • Información detallada sobre planes y precios
  • Formulario de contacto y mapa de ubicación
  • Contenido optimizado para SEO local
  • Blog con artículos relevantes sobre coworking y emprendimiento en la ciudad de Albacete.

Estrategia de SEO local y desarrollo de contenido:

  • Optimizamos las meta etiquetas, títulos y descripciones para cada página
  • Generamos contenido dentro del sitio web, específico sobre el coworking en Albacete y potenciamos una estrategia de terminos clave, long tail y palabras de transición para favorecer el posicionamiento en buscadores frente a la competencia.
  • Desarrollamos una estrategia de enlazado interno
  • Creamos y optimizamos el perfil de Google My Business
  • Generamos contenido para el blog, enfocado en temas de interés para la comunidad local de emprendedores, profesionales y autónomos.

6. Siguientes Pasos

Actualmente, seguimos trabajando en implementar mejoras dentro del sitio web para seguir posicionando correctamente y convertir a hub36 en un referente dentro del sector que desarrolla su actividad. Para ello, entre otras tareas, monitoreamos mediante Google Analytics y Google Search Console la estrategia de palabras clave y de SEO conforme a los resultados que vamos obteniendo.

Por otro lado, continuamos desarrollando contenido de calidad y relevante para el blog y el sitio web y analizamos las posibles mejores en cuanto a diseño, en todos los dispositivos, para seguir favoreciendo la correcta navegación del usuario por el sitio web.

7. Actualización 2025: Rediseño y Mejora de la Experiencia de Usuario

En 2025, emprendí un rediseño integral de la landing page de Hub36 con el objetivo de mejorar la experiencia de usuario, la organización del contenido y reforzar la identidad visual del espacio de coworking. Tras un año desde la creación del sitio original, he aplicado nuevos aprendizajes en maquetación web, UX/UI y branding para optimizar tanto la comunicación de sus servicios como la navegabilidad del sitio.

Wireframes y Definición del “Viaje del Usuario”

Antes de rediseñar la página, estudié cómo los visitantes interactuaban con la web y qué preguntas clave tenían al explorar los servicios de Hub36. Para garantizar un flujo de navegación intuitivo, desarrollé wireframes detallados, asegurándome de que cada sección resolviera progresivamente las dudas de los usuarios sobre el coworking.

Con una estructura bien definida, pasé a diseñar la nueva landing en Figma, reutilizando y actualizando el sistema de diseño que había creado un año antes para Hub36. Refiné la paleta de colores, tipografía y maquetación para lograr un diseño más limpio, moderno y alineado con la marca.

 

Tras la implementación, la nueva landing page ofrece una experiencia más clara y efectiva, facilitando la exploración del espacio y mejorando la conversión de clientes potenciales.

📌 Si quieres conocer más detalles sobre este proceso, te invito a leer el 👉 caso de estudio completo del rediseño

/// DISEÑO Y DESARROLLO WEB

Descubre otros proyectos
de la rana

Compartiendo conocimientos