Conforama Ibérica
Una corporación multinacional direccionada en el mercado REATIL especializada en la venta de muebles, decoración y equipamiento para el hogar.
Conforama es la segunda cadena minorista de muebles para el hogar más grande de Europa con más de 200 tiendas en Francia, España, Suiza, Portugal, Luxemburgo, Italia y Croacia.
Se me asignaron muchos retos, desde cambiar la parte front de toda la web hasta diseñar la mejor usabilidad para las experiencias de usuarios, así mismo el diseño y la adaptación de los banners publicitarios.
Aquí dejo algunos de mis proyectos finalizados en esta compañía.
Actualizaciones de la Home page
Después de hacer varios brainstorming y desglosar muchas ideas, entre otras cosas más, realicé dos actualizaciones de la Home, cada una actualizada de acuerdo con su época en el momento de agregarle las mejoras. Considero que se hizo un excelente trabajo con el equipo ecommerce y marketing.
Diseño antiguo de la Home-page
Imagen de prototipo-prediseño versión desktop
Imagen de prototipo-prediseño versión mobile
Primera versión - diseño nuevo Home-page (2018-2019)
Segunda versión - diseño nuevo Home-page (2020)
Segunda versión - diseño nuevo Home-page responsive design
Rediseño del MENÚ en la versión mobile
Uno de los cambios más significativos que se realizó fue el menú en la versión mobile, donde mi labor era pasar de un menú con colores antiguos y muy poco usable para el usuario en la actualidad, por lo que tomé la iniciativa de hacerlo totalmente diferente rompiendo un poco el esquema que tenía la empresa y así actualizarlo de una forma que además de moderna sea muy limpia y amigable a la vista y uso de los usuarios.
Donde modernicé cambiando de forma y color los iconos, reajusté el tamaño de todo el menú y pasamos de un color gris opaco a un color blanco y limpio.
En la parte de experiencia de usuario, propuse reorganizar la zonas clicables y mejorar la animación de la misma para que sea más dinámico y amigable para los usuarios.
Diseño antiguo del MENÚ
Nuevo diseño del MENÚ
Rediseño del FOOTER en la versión desktop y mobile
Una vez actualizado el diseño del MENÚ (header), procedemos a cambiar la parte del FOOTER para que todo tenga una coherencia y de esta forma la web tenga ya una base nueva de plantilla para todas las landing page y home page.
En este siguiente paso, mantengo el diseño totalmente limpio con un background en blanco y busco la manera de hacerlo dinámico, con efectos modernos en los botones e iconos, de tal manera que el usuario sienta que esta interactuando con cada objeto de este nuevo módulo (footer).
En la parte de experiencia de usuario, me enfoqué en que el orden sea muy significativo para el usuario mostrándole lo que más le puede interesar conocer y a su vez lo que se quería captar de ellos (usuarios), como por ejemplo una forma rápida de suscripción a la web.
Diseño antiguo del FOOTER
Nuevo diseño del FOOTER
Nuevo diseño del FOOTER para landing page
Rediseño de la PLP (Product Listing Page)
Para el rediseño de esta sección, nos toca tener en cuenta muchas variantes, ya que nos gustaría que el usuario antes de tomar la decisión de comprar un producto pueda interactuar y ver todos los detalles en la misma lista de productos, como por ejemplo pueda ver los colores, materiales, imágenes y CTA (call to action) que le permita añadir al carrito si ya tiene claro el producto que quiere comprar.
Para logar esa gran usabilidad y experiencia de usuario, se me ocurrió que en una primera vista se vea una imagen de tamaño amigable donde muestre el producto, seguido de una TAG que indique qué tipo de promoción se encuentra actualmente, luego su precio en descuento y su precio tachado con el porcentaje de descuento de un color notorio para que pueda ver diferencias de precios, al siguiente nivel un slider que indicaría los colores del producto y de esa forma si selecciona el color que desea e ingresa a la página del producto ya entre con dicho color preseleccionado anteriormente, después de todo esto al hacer hover encima del producto despliegue un sombreado tenue para la vista de usuario y se agrande al final con un CTA que será "añadir al carrito" donde tendrá la opción de que si ya está seguro de qué producto que desea comprar lo agregue a su carrito y pase la siguiente fase de compra.
Después de presentar varias muestras iniciales y muchas horas de trabajo buscando ese punto de equilibrio donde podamos decir "lo hemos logrado" para captar todas estas vertientes que un usuario necesita antes de pasar a una página interna de producto o simplemente agregue al carrito para directamente haga su compra, donde siempre pensando la mejor forma diseñar y crear una maravillosa experiencia para los usuarios.
Nuevo diseño de la PLP
Rediseño de la PDP (Product Detail Page)
Una vez tener listo la PLP nos toca pasar a un nuevo diseño para la PDP (producto detail page), para este caso pensamos en mostrar muy visible la información que se consideró más necesaria para el usuario.
Como por ejemplo mantener la imagen al costado izquierdo de la página y en mostrar las diferentes imágenes del mismo producto en un slider también en un costado a la izquierda uno bajo del otro para mayor visibilidad y de forma dinámica para el usuario, así mismo en el costado derecho la información del producto y jugando con los tamaños y fuentes para mantener uniformemente las importancia de cada texto, como por ejemplo, el nombre del producto con tamaño fuente más notorio que el código del producto.
Si vamos al detalle, inicialmente nos preguntamos, cual serían las partes principales que un usuario necesita ver en mi primera impresión de la página (PDP), para eso nos vimos la tarea de analizar varias web y varios comportamiento de usuarios y así llegar a una conclusión de hacer un diseño muy friendly y eficaz al momento de ver ese producto y atrapar al usuario a que sienta una gran experiencia y lo vea confiable y fiable a la hora de comprar el producto.
Nuevo diseño de la PDP
Nota: En esta página muestro algunos de los diseños UX más importantes y funcionalidades de mi trabajo en esta empresa, donde también los banners publicitarios mostrados en cada ejemplo de imagen, son diseñados por mi parte.