Caso de estudio · Web corporativa · Proyecto freelance
Quare Design
Rediseño de la web de una marca de baños de alta gama
Rol
UX/UI Designer
Duración
Noviembre 2024 – febrero 2025
Equipo
UX/UI Designer, Project Manager y Desarrollador
Herramientas
Figma
Objetivo Clave
Reorganizar la web para que distribuidores, showrooms y prescriptores encontraran la información de producto y contacto, y para que el equipo de marketing pudiera actualizar los contenidos desde WordPress.
El resultado
¿Qué ha quedado al final?
Diseñé una propuesta para reorganizar la web y facilitar al público profesional el acceso a los materiales, las fichas de producto y los contactos.
Quare Design es una marca española de baños de alta gama con presencia en más de 14 países. Entregué el diseño en Figma y monté las páginas en WordPress con Elementor. El desarrollador se encargó de las funcionalidades y los plugins. La web se publicó, pero no tengo datos posteriores para valorar su rendimiento.
El punto de partida
Contexto del proyecto
El Problema
La web limitaba las actualizaciones que necesitaba el equipo de marketing, y la información más importante para el público profesional estaba repartida entre distintas secciones.
La Solución
Reorganizar la arquitectura y crear un sistema de componentes común para facilitar el acceso a la información de producto y contacto.
Alcance y límites
Fue un proyecto freelance con un brief del cliente. No hice investigación con usuarios; para tomar decisiones me basé en el brief, la revisión de la web existente y la lógica del negocio. El cliente ya había definido los colores y la tipografía de marca, así que diseñé las pantallas de escritorio directamente en alta fidelidad. Adapté la propuesta a tablet y móvil en Elementor. La Home seguía un brief que ya definía sus ocho secciones. La web se publicó, pero no tengo datos de rendimiento posteriores.
La duda real
¿Rehacer la web o aprovechar la actual?
El brief dejaba abierta una pregunta: ¿convenía aprovechar la web existente o rehacer su estructura? Al revisarla, vi que algunos problemas afectaban tanto a la organización de la información como a las actualizaciones que necesitaba marketing.
Opción descartada
Aprovechar la web actual
- Quarex y Q-Tek seguirían escondidos dentro de «Nosotros», sin sección propia.
- «Nosotros» seguiría siendo un muro de texto corrido.
- La ficha de producto seguiría sin un botón claro para pedir información y con los recursos sueltos.
Opción elegida
Reestructurar por completo
- Una arquitectura nueva, con Materiales como sección propia.
- Un sistema de componentes que se repite en toda la web y un universo gráfico renovado.
- Un diseño que el equipo de marketing puede gestionar desde WordPress.
Decisión Estratégica
Elegí reorganizar la estructura para responder a esas necesidades, en lugar de limitarme a cambiar el aspecto visual.
El eje del caso
Seis decisiones de diseño
En cada una cuento de dónde viene: qué pedía el cliente y qué puse yo.
Decisión 1 de 6
Una página propia para los materiales
El brief ya incluía una sección de Materiales. Al revisar la web, vi que Quarex y Q-Tek estaban dentro de “Nosotros”, sin una página propia. Propuse darles un espacio en el menú y el cliente estuvo de acuerdo. Para cada material preparé una imagen, un texto breve y una lista de propiedades.
Insight Clave
Quarex y Q-Tek diferenciaban a la marca, pero apenas destacaban dentro de la sección “Nosotros”.
Decisión 2 de 6
Una propuesta visual renovada y componentes coherentes
El brief pedía actualizar el aspecto de la web. Mantuve los colores y la tipografía de marca, y renové la composición de las páginas, los fondos y el uso de las imágenes. También diseñé un patrón común de tarjeta para categorías, productos y materiales, y un botón con flecha que se repite en las distintas secciones. Así mantuve una misma línea visual y dejé una base reutilizable para el contenido.
Decisión Estratégica
Un solo patrón en toda la web, para que el usuario reconozca lo que es pulsable y sepa qué va a encontrar.
Decisión 3 de 6
Una ficha de producto con una acción clara
El brief pedía mostrar los productos por color y organizar las descargas en desplegables. Lo resolví con un acordeón para las características, las fichas técnicas, el manual de instalación, la limpieza y el mantenimiento, y los recursos para profesionales. Así, la imagen, los datos principales y los colores quedaban en primer plano.
También propuse dos elementos que no aparecían en el brief: un botón visible para solicitar información y un carrusel de productos relacionados.
El Problema
La ficha no destacaba cómo solicitar información y los recursos aparecían dispersos.
La Solución
Organicé los recursos en un acordeón y añadí un botón visible y productos relacionados.
Decisión 4 de 6
Contacto organizado por mercados
El brief pedía dar visibilidad a los contactos comerciales por país o idioma y sugería incluir un mapa. Propuse mostrar primero la sede principal, con su mapa, y después una tarjeta de contacto por mercado. En el diseño aparecen Estados Unidos, Italia, Alemania y Francia; la web anterior tenía un único formulario genérico.
El Problema
Un único formulario genérico no deja claro con quién hablar en cada país.
La Solución
Sede principal con mapa y una tarjeta de contacto por mercado.
Decisión 5 de 6
La información corporativa, organizada por bloques
El brief pedía presentar la empresa, sus diferencias —Quarex, Q-Tek y la personalización—, su compromiso con el entorno y sus certificados. En la web anterior, esa información estaba en varios párrafos seguidos y con una sola imagen. La organicé en bloques con titulares e imágenes de apoyo para que cada tema se pudiera localizar con más facilidad.
Decisión Estratégica
Separé los contenidos por tema para que fuera más fácil encontrar cada parte de la información.
Decisión 6 de 6
Inspiración, organizada por estilos
El brief pedía replantear la sección de inspiración y separar la galería de los proyectos. En lugar del carrusel anterior, propuse cuatro categorías: minimalista; moderna y vanguardista; natural y cálida; y lujo y sofisticación. También añadí la sección “Baños reales que inspiran”.
Insight Clave
Organicé la inspiración por estilos para que cada persona pudiera ir directamente al tipo de ambiente que le interesaba.
Después de la entrega
Estado Actual
Entregué el diseño en Figma y monté las páginas en WordPress con Elementor, incluidas las adaptaciones para tablet y móvil. El desarrollador se encargó de las funcionalidades y los plugins.
Después de la entrega, la empresa hizo cambios sobre la web, incluidas algunas animaciones que no formaban parte de mi propuesta. Por eso, las capturas del caso muestran la versión que diseñé y entregué.
Métricas
¿Cómo habría medido el éxito?
No tengo datos de rendimiento posteriores al lanzamiento. Estas son algunas métricas que habría seguido para revisar si la web respondía a los objetivos del brief.
| Métrica | Por qué |
|---|---|
| Solicitudes de informaciónClics en «Solicitar información» y envíos del formulario de Contacto, por país. | Permitiría observar las solicitudes y los envíos del formulario por país. Si hay datos anteriores comparables, se podrían revisar los cambios después del rediseño. |
| Descargas de fichas técnicas, manuales y catálogoDescargas por tipo de documento y por categoría de producto. | Ayudaría a identificar qué documentos y categorías consultan los profesionales. |
| Visitas a Materiales y paso desde la HomeVisitas a la página y clics desde la Home hacia Quarex y Q-Tek. | Permitiría observar cuántas visitas recibe la sección y desde qué partes de la web llegan. |
| Uso de Inspiración por estiloClics en cada uno de los cuatro estilos y mapas de calor de la página. | Mostraría qué estilos reciben más clics y si las personas llegan a la sección de baños reales. |
| Autonomía de marketingTiempo y pasos que necesita el equipo para publicar un cambio de contenido sin ayuda del desarrollador. | Se podría revisar cuánto tiempo y cuántos pasos necesita el equipo para actualizar un contenido, y si puede hacerlo sin ayuda del desarrollador. |
Si existen datos anteriores y se pueden comparar con los mismos criterios, servirían como referencia para revisar los cambios.
Aprendizajes
Lo que me llevo
A nivel de diseño
En este proyecto trabajé la arquitectura, los componentes y la propuesta visual a partir del brief y de la identidad de marca existente. El patrón común de tarjetas y botones me ayudó a mantener una línea coherente en las páginas. También monté el contenido en WordPress con Elementor y adapté las páginas a tablet y móvil. El desarrollador se encargó de las funcionalidades y los plugins.
Una reflexión honesta
Partí del brief, de la revisión de la web existente y de las necesidades del negocio; no hice investigación con usuarios. Esa base me permitió desarrollar la propuesta, pero, sin pruebas ni datos posteriores al lanzamiento, no puedo saber si la nueva web mejoró la experiencia o el rendimiento.
Más Casos
Sigue descubriendo mis casos
© 2026 – Diana García Fernández
