Un rediseño web para renovar un estudio de arquitectura

Puntos claves

A lo largo de las sesiones de ideación, se trabajó de manera focalizada para abordar los tres principales puntos débiles identificados durante la investigación (falta de adaptación a pantallas, contenido insuficiente y problemas de navegación), garantizando que cada técnica aplicada contribuyera con soluciones claras y alineadas a las necesidades del usuario.

Falta de adaptación a diferentes pantallas

• Se empezó trabajando lo básico: menús simplificados para pantallas pequeñas, uso de imágenes escalables, diseño de layouts fluidos.
• Una idea clave fue incluir breakpoints para garantizar la visualización óptima en móviles y tabletas.
• Adopción de un enfoque "mobile-first" en ciertos elementos críticos, como navegación y presentación de contenido visual.

Contenido desactualizado y poco informativo

• Se detectó la necesidad de incluir fichas técnicas detalladas, galerías de imágenes de alta calidad y descripciones completas para cada proyecto.
• Se identificaron cuáles son las prácticas óptimas en presentación de contenido en esta industria.
• Se llegó a la conclusión de la necesidad de desarrollar una estructura estándar para cada proyecto, que incluyera galería de imágenes, descripción detallada, datos técnicos y vínculos relacionados.

Dificultades con la navegación

• Se trabajó en la creación de un menú de navegación lógico y fácil de usar en todas las plataformas.
• Se habló de organizar los resultados de búsqueda de rutas según los intereses y hábitos de viaje del usuario.
• Se generaron ideas relacionadas con menús accesibles, breadcrumbs (migas de pan) y opciones de navegación simplificada.

Diseñar

Entramos en la etapa de diseño con la creación del mapa del sitio, una decisión clave para estructurar el contenido de manera lógica y centrada en el usuario. Las principales conclusiones recogidas durante las sesiones de ideación establecieron el punto de partida sólido para los bocetos y prototipos, asegurando que el diseño final respondiera a los problemas detectados y a las expectativas del cliente.

Mapa del sitio

Paper Wireframes

El siguiente paso fue dibujar los wireframes. Me enfoqué especialmente en los puntos débiles identificados. Opté por un diseño minimalista, moderno y elegante, donde la imagen es protagonista y la disposición de los elementos se organiza de manera simple, limpia y efectiva. La estructura clásica del layout se mantiene intencionadamente sobria, permitiendo que la innovación arquitectónica del estudio se destaque y se aprecie en toda su magnitud.

Si bien el objetivo fundamental es desarrollar un sitio web completamente responsive, opté por no aplicar un enfoque ‘mobile-first’. La razón detrás de esta decisión radica en la naturaleza de los contenidos: los proyectos arquitectónicos del estudio requieren un espacio visual amplio para apreciarse en toda su magnitud.

Dado que estas obras son el núcleo del sitio, decidí priorizar su presentación en pantallas de mayor tamaño, asegurando una experiencia visual inmersiva y de alto impacto.

Posteriormente, adapté este diseño al entorno móvil, donde identificamos que nuestro público objetivo experimentaba mayores desafíos de navegación. Esta estrategia nos permite mantener la integridad visual y funcional en todas las plataformas, brindando una experiencia coherente y satisfactoria en cualquier dispositivo.

Prototipar

Prototipo Lo-Fi

Comenzamos creando wireframes simples que tradujeron las ideas y conclusiones de la etapa de ideación en una estructura visual inicial. Este paso permitió validar rápidamente la organización del contenido, priorizar elementos clave como la navegación móvil y las fichas de proyectos, y realizar ajustes tempranos basados en el feedback del equipo. El enfoque estuvo en garantizar una experiencia clara y funcional que sirviera como base para iterar hacia soluciones más detalladas en las siguientes etapas.

Estudio de Usabilidad

El siguiente paso es llevar adelante un estudio de usabilidad para identificar posibles problemas de navegación y funcionalidad en el prototipo de baja fidelidad antes de avanzar a versiones más detalladas. Este paso es crucial para validar que las decisiones de diseño iniciales respondan efectivamente a las necesidades de los usuarios, permitiendo ajustar flujos, interacciones y jerarquías de contenido de manera ágil. El objetivo de hacer estas pruebas en esta etapa es asegurarnos de que la experiencia final sea intuitiva, eficiente y esté alineada con los objetivos del proyecto.

Hallazgos y oportunidades de mejora

Prototipo Hi-Fi

Con los hallazgos del estudio de usabilidad, pasamos a refinar el diseño y desarrollar el prototipo de alta fidelidad, integrando mejoras clave basadas en el feedback de los usuarios. Este proceso incluyó optimizar la navegación, implementar filtros avanzados en la sección de proyectos, y añadir interactividad en elementos como mapas en la página de contacto. El prototipo de alta fidelidad combinó una estética visual moderna con una funcionalidad optimizada, asegurando que el diseño final no solo fuera atractivo, sino también intuitivo y alineado con las necesidades del usuario y los objetivos del proyecto.

Probar

Impacto de las mejores implementadas

Las mejoras implementadas tuvieron un impacto significativo, aumentando la tasa de finalización de tareas y reduciendo el tiempo promedio para completarlas. Además, la percepción del diseño como intuitivo y sofisticado reforzó la imagen profesional del estudio.

• Filtros de búsqueda más eficientes

  Tiempo promedio reducido de 4.2 minutos a 1.8 minutos para encontrar un proyecto.

• Tasa de finalización mejorada

  Incremento del 60% al 100% en tareas completadas exitosamente.

• Botones táctiles optimizados

  Eliminación de errores en dispositivos móviles (antes: 3/5 usuarios; después: 0/5 usuarios).

• Percepción del diseño

  La satisfacción del usuario subió de 3.2 a 4.9 (escala de 5).

• Interacción con contenido

  Los usuarios calificaron la disposición de imágenes y fichas como "intuitiva" y "atractiva", reforzando su interés en explorar más.

Mockups

Consideraciones de accesibilidad

Desde el inicio del proyecto, la accesibilidad fue un pilar clave en el diseño del sitio web de Lara Castillo, asegurando que la experiencia fuera inclusiva para todos los usuarios. Se implementaron prácticas estándar como contraste de colores adecuado, tipografías legibles, navegación optimizada para teclado y compatibilidad con lectores de pantalla. Además, se garantizó que todos los elementos interactivos fueran accesibles en diferentes dispositivos, mejorando la experiencia tanto en desktop como en móviles.

Modo Lectura para los proyectos arquitectónicos

Se diseñó un "Modo Lectura" en cada ficha de proyecto, que ajusta el formato para una lectura más accesible, eliminando distracciones y optimizando el espaciado, ideal para personas con dislexia o dificultades de atención.

Proyectos con descripciones detalladas en audio y filtros especiales

Los proyectos tendrán sus descripciones detalladas en audio como alternativa a usuarios que lo necesiten o prefieran.

Además, en la página "Proyectos, se añadieron filtros como "Ver proyectos con mayor contraste visual" y "Proyectos con descripciones detalladas en audio", brindando alternativas a aquellos usuarios que tengan necesidades específicas.

Interacción adaptativa en galerías de imágenes

Se incluyó una funcionalidad que permite a los usuarios ajustar la velocidad y el tamaño de las imágenes en la galería de proyectos, beneficiando a personas con baja visión o dificultades motoras.

Conclusiones

Próximos pasos

1. Monitoreo y análisis de uso

• Recopilar métricas clave como tasa de conversión, tiempo en página, interacciones con los filtros y accesibilidad en dispositivos móviles.
• Analizar patrones de navegación y posibles puntos de fricción a través de herramientas de analítica web.
• Evaluar el impacto de las mejoras en la tasa de finalización de tareas y accesibilidad.

2. Pruebas de usabilidad en producción

• Realizar pruebas de usabilidad con usuarios reales en un entorno activo para detectar problemas no previstos en la fase de desarrollo.
• Implementar sesiones de prueba A/B para evaluar distintas variantes de interfaz y optimizar la experiencia de usuario.

3. Optimización y ajustes basados en feedback

• Recoger opiniones de los usuarios a través de encuestas breves y formularios de feedback.
• Priorizar mejoras iterativas según la retroalimentación recibida y métricas de uso.
• Ajustar elementos de navegación, accesibilidad y rendimiento en base a los datos recopilados.

4. Mantenimiento y soporte continuo

• Monitorear el rendimiento del sitio y corregir posibles errores o fallos técnicos.
• Asegurar compatibilidad con nuevas actualizaciones de navegadores y dispositivos.
• Optimizar la velocidad de carga y eficiencia de recursos multimedia.

5. Planificación de Nuevas Funcionalidades

• Evaluar oportunidades de expansión, como integración con redes sociales o herramientas de realidad aumentada para la visualización de proyectos.
• Identificar necesidades emergentes de los usuarios y proponer nuevas mejoras en la experiencia digital del estudio.

Este proyecto reforzó mi enfoque en accesibilidad y usabilidad, demostrando que un diseño exitoso no solo es visualmente atractivo, sino que también facilita la búsqueda de información. Aprendí a equilibrar minimalismo y funcionalidad, asegurando una navegación intuitiva sin perder la esencia visual del estudio.

Además, el análisis de pruebas de usabilidad fue clave para tomar decisiones estratégicas basadas en datos y traducir insights en mejoras concretas. La colaboración con diferentes perfiles profesionales me permitió alinear la visión del diseño con objetivos comerciales, consolidando mi capacidad de crear soluciones escalables centradas en el usuario.