Aislamiento para un Mañana Mejor

(URSA)

Diseñando la página web corporativa de URSA, líder en materiales de aislamiento.

La página global de URSA es un buen ejemplo de co-creación y coordinación. Co-creación entre diferentes departamentos de URSA y también con el resto de profesionales externos que pusimos nuestro conocimiento al servicio de este proyecto. Entre todos, supimos transformar un mar de dudas en una experiencia digital sólida, amable e intuitiva.

El equipo lo formamos varios representantes de URSA, su empresa colaboradora de desarrollo web y, por nuestra parte, un diseñador, una estratega y una editora de texto. Realizamos una planificación detallada y… ¡nos pusimos manos a la obra!

El objetivo era diseñar una página web informativa. Debía representar a la empresa, transmitir sus valores y facilitar el camino hacia las páginas locales para aquellas personas interesadas en ampliar información sobre productos de aislamiento concretos y sus opciones de compra.

drag-arrow
¡Muéveme!

Sobre URSA

URSA es una de las empresas europeas líderes en aislamiento. Fabrican productos aislantes de lana mineral y poliestireno extruido para edificios residenciales y no residenciales. URSA tiene su sede central en Madrid, 13 fábricas de producción en 8 países y presencia comercial en 50 mercados.

capturas de pantalla de la versión en móvil y tablet del diseño de la nueva web de Ursa Insulation diseñado por Cocota Studio

Investigación UX

Comenzamos con una profunda fase de investigación y entendimiento, durante la que mantuvimos entrevistas con diferentes departamentos de URSA para definir los objetivos y el alcance del proyecto.

imagen con los primero pasos a dar para el diseño de la web de Ursa Insulation definido por Cocota Studio
imagen de la segunda parte de los pasos a dar para realizar el nuevo diseño de la web de Ursa Insulation diseñado por Cocota Studio

Diseñando para personas

Para proyectar adecuadamente el diseño web necesitábamos dejar de hablar de usuarios en general y concretar personas en particular. Con ayuda de Mamen, Efrén y Beatriz -de URSA- definimos sus perfiles y necesidades. Nuestros ‘user personas’ pertenecían a uno de estos tres grupos:


  • Socios, inversores y distribuidores que desean encontrar fácilmente información práctica y actualizada sobre la empresa.
  • Arquitectos, instaladores y otras personas de perfil técnico interesadas en saber más sobre los productos de aislamiento y su compra.
  • Futuros empleados.
diseño de tarjetas hecho por Cocota Studio para Ursa Insulation

Estudiando la competencia

Llevamos a cabo un detallado estudio de los sitios web de la competencia, empresas de otros sectores y páginas locales de URSA para identificar buenas y malas prácticas en la resolución de problemas concretos.

Aprendimos de sus aciertos y errores y seleccionamos referencias. Al final de este proceso fuimos capaces de sacar conclusiones y propuestas sólidas para comenzar a articular la página web.

paso por paso con imágenes del nuevo diseño web hecho por Cocota Studio para Ursa Insulation

Estrategia de contenido

Una empresa como URSA maneja información muy técnica y, sin embargo, tiene un propósito universal en su concepto: la sostenibilidad. Ofrecer el aislamiento óptimo para cada construcción en beneficio tanto de las personas como del medio ambiente.

Con esa idea en mente, definimos el mapa de contenidos y la arquitectura de la información, y planificamos la creación de contenido llevando a cabo una gran labor de depuración, actualización y síntesis de los textos existentes.
En las sesiones de co-creación con URSA, los “user personas” fueron la base sobre la que tomar decisiones, basándonos en si la solución sería la adecuada o no para ellos.

Diseño de wireframes

Los wireframes resultaron especialmente útiles para diseñar la web corporativa de URSA. Nos ayudaron a tomar decisiones, definir detalles y prevenir problemas durante el desarrollo.

  • Estructura: Cómo encajan globalmente todas las pantallas y cuál es el flujo de navegación entre ellas.
  • Contenido y jerarquía: Qué información se va a mostrar en cada pantalla y cada paso del flujo de navegación, y cómo la organizamos.
  • Funcionalidad: Cómo funciona la interfaz; cómo de intuitiva es la función de cada elemento y la navegación desde un punto A a un punto B.
  • Comportamientos: Cómo interactúa el usuario con cada uno de los elementos y en qué puntos nos interesa reforzar el diseño de interacción.
1. Wireframe de baja fidelidad
2. Wireframe de alta fidelidad
Diferentes capturas de pantalla del diseño de la web de Ursa Insulation diseñado por Cocota Studio
3. Diseño final
1/0

Diseño de interfaz (UI)

El diseño UI de la web requirió abordar un tema que terminó siendo un proyecto en sí mismo: la evolución de la identidad corporativa de URSA al ámbito online. Entre otras cosas, definimos el comportamiento de las formas circulares, un recurso clave de su identidad visual que debía estar presente también en la página web. Trabajamos concienzudamente para que el diseño visual fuese coherente e intuitivo a todos los niveles.

Cada vez que diseñamos una de las pantallas o un elemento de la interfaz lo probamos simultáneamente tanto en versión escritorio como móvil. A veces, lo que funciona bien en escritorio no lo hace en su versión móvil y viceversa y trabajando así evitamos cambios posteriores en una pantalla ya aprobada.

capturas de pantalla de distintas URLs con el nuevo diseño de la web de Ursa Insulation diseñado por Cocota Studio
capturas de pantalla de diferentes URLs con el nuevo diseño de la web de Ursa Insulation diseñado por Cocota Studio

El equipo de Cocota ha sabido entender el negocio y el objetivo. Su labor analítica ha dado lugar a muchos ‘insights’ valiosos para nosotros y nuestras dudas han sido en todo momento resueltas con fundamento y honestidad.

Mamen Fernández, Comms Manager en URSA
capturas de pantalla de la versión móvil del nuevo diseño de la web de Ursa Insulation diseñado por Cocota Studio
captura de pantalla de la página 404 con el nuevo diseño web hecho por Cocota Studio para Ursa Insulation
captura de pantalla de uno de los nuevos menús que cuentan con un diseño web hecho por Cocota Studio para Ursa Insulation
captura de pantalla de la URL reference projects con el nuevo diseño de la web de Ursa Insulation diseñado por Cocota Studio
capturas de pantalla de diferentes URLs con el nuevo diseño de la web de Ursa Insulation diseñado por Cocota Studio

Diseño de interacción (IxD)

Mediante el diseño IxD guiamos a los usuarios con una mayor efectividad, atraemos su atención sobre determinados puntos de interés y conseguimos que tanto la lectura como su experiencia de navegación sean fluidas y agradables.

Para los usuarios menos familiarizados con los productos de URSA puede ser un reto elegir con agilidad cuáles son adecuados para sus necesidades. Partiendo de una imagen de una casa en 3D, diseñamos una sencilla infografía interactiva para filtrar cómodamente los productos en función de su aplicación.

URSA es una empresa con 70 años de historia. Estructurar su gran volumen de información manteniendo una navegación intuitiva y cómoda fue un reto. Hicimos uso de efectos de animación durante el scroll para favorecer la atención del usuario a lo largo del extenso contenido.

Otras secciones en las que se trabajó el diseño de interacción fueron las tarjetas de materiales de la página de inicio y el ciclo de vida de los productos de URSA, que demuestra de forma muy sencilla cómo la sostenibilidad no es sólo un beneficio que se obtiene al usar estos productos de aislamiento sino que forma parte del ADN de la compañía.

Cocota ha sido el 'partner' ideal en la creación de nuestra nueva página global. El resultado es un producto digital sólido, funcional e intuitivo.

Mamen Fernández, Comms Manager en URSA

¿Tomamos un café virtual?
Somos simpáticos y disfrutamos comentando nuevos proyectos e ideas.