E.pack Soluciones | Rediseño de tienda online
Rediseño estratégico para mejorar la conversión
Tipo de proyecto: Profesional
Duración del proyecto: Agosto 2023 – Noviembre 2023
El punto de partida: un e-commerce en evolución
El sitio web de E.pack Soluciones es el centro neurálgico de su negocio. La empresa necesitaba una tienda online que no solo fuese atractiva y fácil de navegar, sino también optimizada para dispositivos móviles. La prioridad era garantizar una experiencia de compra ágil y segura, con opciones de pago confiables y un proceso de check-out eficiente.
El desafío
Rediseñar un e-commerce no es solo una cuestión estética, sino también estratégica. Este proyecto presentó desafíos clave que demandaban soluciones alineadas con los objetivos del negocio y la experiencia del usuario:
Un rebote inesperado: La página de inicio carecía de claridad en su propuesta de valor, lo que resultaba en una tasa de rebote del 49,7%. Muchos usuarios abandonaban antes de explorar más.
La desconexión entre dispositivos: Las versiones desktop y mobile tenían diseños y arquitecturas inconsistentes, causando frustración y dificultad para realizar compras desde dispositivos móviles.
Un laberinto de productos: La navegación carecía de categorías claras y filtros eficientes, lo que hacía que encontrar productos específicos fuera un reto para los usuarios.
Mi rol
Como Diseñadora UX/UI lideré todas las etapas del proyecto:
Investigación inicial (benchmarking, entrevistas y análisis de mercado).
Desarrollo de arquitectura de la información y wireframes.
Prototipado y testeo.
Nuestra brújula: el pensamiento de diseño
Adopté el marco de trabajo Design Thinking para guiar todo el proceso, desde la definición del problema hasta la entrega final de soluciones.
Empatizar: Comprender las raíces del problema
Realicé un análisis detallado de la web actual utilizando Google Analytics. Se identificó que el flujo de checkout presenta una alta tasa de rebote (96,3% en la página de "Finalizar compra"), lo que indica la necesidad de optimizar el proceso para reducir abandonos. El Home presenta una tasa de rebote del 49,7%, lo que indica oportunidades de mejora en su estructura para retener mejor a los usuarios. La sección de Medios de Pago es la quinta página más visitada, lo que sugiere que esta información debería ser más visible. Se evaluó incorporarla en el Home.
Si bien el 55% del tráfico proviene de mobile, el 44,6% sigue siendo de desktop, lo que refuerza la necesidad de optimizar la experiencia en ambos dispositivos. Por esta razón, se optó por un enfoque desktop first, ya que la empresa no tenía definida la información a incluir, y era clave estructurarla primero en este formato.
También realicé un benchmarking de competidores clave. A diferencia de e.Pack, que cuenta con un e-commerce, los sitios de la competencia funcionan principalmente como catálogos institucionales, sin opción de compra directa. Según las encuestas, los usuarios valoran la facilidad de compra sin necesidad de interacción humana y la rapidez en los envíos. Esto refuerza el diferencial competitivo de la tienda virtual de e.Pack. Sin embargo, teniendo en cuenta la información que proveen sus competidores, se identificó la necesidad de agregar una sección de información sobre la empresa, posicionándola como referente del sector con un enfoque ecológico y social. Para reforzar este diferencial, se propuso incluir en el Home contenido relevante sobre los productos y su relación con el reciclado.
Además, se encuestó a 23 usuarios frecuentes de la tienda para identificar sus principales frustraciones y necesidades. Como resultado, se consideró fundamental optimizar la navegación en mobile, mejorar la función de búsqueda y agregar referencias visuales de medidas (comparación con objetos). También se identificó la necesidad de facilitar la recompra para emprendedores con herramientas que agilicen la gestión de pedidos.
Revisé la arquitectura de la información para detectar inconsistencias y oportunidades de mejora. Actualmente, la web presenta una estructura dividida:
En mobile, la organización se basa en categorías de productos.
En desktop, la clasificación se realiza por materiales de productos.
Esta diferencia en la organización genera confusión en la experiencia del usuario. Como solución, se propuso unificar la arquitectura de la información, alineando la navegación en ambos formatos para que los usuarios puedan encontrar productos de manera intuitiva, sin importar el dispositivo que utilicen.
El análisis heurístico y UX reforzó la necesidad de unificar la estructura entre mobile y desktop para evitar fricciones y simplificar la cantidad de elementos en el Home, facilitando el escaneo del contenido. También se identificó la necesidad de una mayor coherencia en los elementos de la UI y una mejora en la jerarquía visual. A raíz del análisis, se propuso implementar estrategias de retención post-compra, incluyendo descuentos para futuras compras, sugerencias de productos y valoraciones de clientes. Por último, se detectó una falta de flexibilidad en la experiencia del usuario: no es posible guardar favoritos ni consultar el historial de pedidos, lo que dificulta la recompra.
Definir: Plantear la hipótesis de mejora
Con base en el análisis de datos y la investigación de usuarios, se establecieron estrategias de diseño enfocadas en mejorar la conversión y retención dentro del sitio. Para ello, se abordaron tres áreas clave:
Claridad y accesibilidad de la información: Se optimizó la estructura del sitio y los sistemas de navegación para que los usuarios encuentren productos de manera intuitiva.
Optimización del checkout: Se rediseñó el flujo de pago con el objetivo de minimizar fricciones y reforzar la confianza en el proceso de compra.
Refuerzo de la propuesta de valor: Se trabajó en la comunicación visual y estructural para asegurar que los usuarios comprendan rápidamente los beneficios de ePack y continúen navegando en lugar de abandonar la sesión prematuramente.
Las decisiones de diseño se alinearon con las oportunidades de mejora detectadas en las métricas actuales y las expectativas de los usuarios, asegurando una experiencia más eficiente, clara y confiable.
Idear: Trazando el camino hacia la solución
Para garantizar una experiencia de usuario fluida y reforzar la comprensión del flujo de trabajo, se adoptó un enfoque estratégico que combina Taskflows y Userflows. En este caso, se priorizó el Taskflow para analizar en detalle dos tareas distintas realizadas por el mismo usuario, permitiendo mapear cada paso con precisión y minimizar posibles omisiones en el recorrido. Este enfoque facilita la identificación de oportunidades de optimización antes de definir el Userflow. Una vez establecido el Taskflow, se diseñó el Userflow enfocado en el proceso de compra, asegurando una estructura clara y eficiente en la navegación.
Para mejorar la usabilidad y la eficiencia en la navegación, se unificaron categorías y se optimizaron los filtros de búsqueda. La nueva arquitectura de la información se estructuró en categorías más simples y genéricas, alineadas con los patrones de comportamiento de los usuarios identificados en las encuestas previas. Esta decisión también permitió sincronizar la organización de productos entre desktop y mobile, resolviendo inconsistencias detectadas en la versión anterior.
Con el objetivo de agilizar la búsqueda de productos, se implementó un sistema de filtros optimizado. Este diseño responde a la forma en que los usuarios piensan y buscan productos de manera intuitiva, reduciendo la necesidad de explorar largas listas. Al facilitar un acceso más directo a los artículos de interés, se mejora la eficiencia del proceso de compra y se reduce la fricción en la experiencia del usuario.
Dado el extenso catálogo de la tienda original, se identificó la necesidad de una reorganización del inventario. Se recomendó al equipo de e.Pack eliminar productos duplicados con distintas presentaciones y descartar aquellos que ya no forman parte del núcleo de ventas. Este ajuste no solo optimiza la estructura del e-commerce, sino que también mejora la navegación y la toma de decisiones de los usuarios, alineando la oferta con sus necesidades reales.
Prototipar: Construir y probar las ideas
Se crearon wireframes de media fidelidad para escritorio y dispositivos móviles, asegurando una estructura visual alineada con los objetivos del rediseño.
Con estos prototipos, se realizaron pruebas de usabilidad con cinco usuarios para evaluar la efectividad de la navegación y la claridad del flujo de compra. Las tareas clave incluyeron:
Búsqueda de productos específicos
Revisión de información de productos
Añadir productos al carrito
Completar el proceso de compra
Explorar la sección “Mi Cuenta”
Los wireframes permitieron validar la disposición de los elementos y detectar oportunidades de mejora antes de avanzar a la implementación final.
Testear: Validar y ajustar
Las pruebas de usabilidad confirmaron que la tienda online es intuitiva y eficiente, con un alto nivel de satisfacción entre los usuarios.
Objetivo de la prueba
El objetivo fue evaluar la experiencia de usuario en la tienda online, enfocándonos en la búsqueda de productos, acceso a información clave, proceso de compra y revisión de pedidos.
Resultados generales
Eficacia
Tasa de éxito: 100%
Precisión: 0,04
Errores detectados: 1 error en la Tarea 4
Eficiencia
Tiempo promedio por tarea: 25,08 s
Clics promedio por tarea: 3,6
Todas las tareas se completaron dentro del tiempo y número de clics esperados.
Satisfacción
Valoración general: 4,8/5
Hallazgos clave y oportunidades de mejora
→ Tarea: Búsqueda de productos
Los usuarios comienzan explorando el home y los accesos rápidos.
Si conocen el producto, usan el buscador.
En móviles, prefieren la navegación lateral.
Se sugiere integrar filtros en capas.
Nueva navegación para móviles: Inicio > Barra lateral > Tienda > Categorías y filtros.
→ Tarea: Búsqueda de información adicional
Prioridades: precio, stock y costos de envío.
En móviles, buscan cantidad y medidas rápidamente.
Se sugiere una comparación visual de productos en el carrusel.
Prefieren precios por unidad y descripciones breves.
La información rápida en el sector derecho es clave para la compra.
→ Tarea: Añadir productos al carrito
Destacan la facilidad para agregar productos.
Prefieren modificar la cantidad antes de agregar o desde el carrito.
Funcionalidad consistente en desktop y móviles.
→Tarea: Proceso de pago y finalización de compra
Valoran poder verificar y corregir datos fácilmente.
Destacan la utilidad de cupones y autocompletar datos con cuenta.
Encuentran intuitivo el método de selección de envío y pago.
En móviles, el flujo mejora pero algunos botones generan confusión ("Seguir comprando" y "Continuar compra"). Se revisará el copy de dichos botones.
→ Tarea: Revisión de pedidos y "Mi Cuenta"
Valoran la opción de repetir pedidos recurrentes.
Algunos no identifican de inmediato el historial de pedidos. Se agregará un subtítulo para mayor claridad.
En móviles, la organización de la cuenta puede mejorar.
→ Otros comentarios y sugerencias
Percepción general: La interfaz es familiar y práctica.
Facilitar la recompra: Se sugiere recordar el último pedido al iniciar sesión (pop-up en home).
Claridad en listas de compra: Confusión con "Mis listas de compra", sugiriendo llamarlo "Favoritos" o "Compras guardadas".
Personalización: Se propone personalizar la home con recomendaciones basadas en compras previas.
Generación de confianza: Se valoran datos rápidos como "Pago seguro", "Envío gratis en Paraná" y "Medios de pago".
Conclusión
Las pruebas validaron que la tienda online ofrece una experiencia fluida y funcional. Se identificaron oportunidades de mejora en la navegación, presentación de información clave y claridad de ciertos elementos visuales. Implementar estos ajustes optimizará la conversión y la fidelización de clientes.
UI Kit: definiendo la identidad visual tras la validación
Una vez finalizados los testeos de usabilidad y con los wireframes validados, se creó un UI Kit para garantizar coherencia visual y facilitar la implementación del diseño. Luego, estos lineamientos fueron aplicados en los wireframes de alta fidelidad. Esta guía consolidó los principales elementos de la interfaz, asegurando una identidad clara y escalable.
El UI Kit incluyó:
Paleta de colores, estableciendo tonos principales, secundarios y variantes accesibles.
Tipografías, organizadas en una jerarquía clara para mejorar la legibilidad.
Componentes reutilizables, como botones, formularios y tarjetas, estandarizando la interfaz.
Iconografía, alineada con el estilo visual para reforzar la consistencia.
Imágenes y estilo gráfico, con directrices para mantener cohesión en la comunicación visual.
Esta entrega permitió que el equipo de desarrollo trabajara con un sistema visual sólido, optimizando la implementación y facilitando futuras iteraciones.
Cohesión y claridad: implementando UX Writing
En el inicio del proyecto, realicé una evaluación heurística para detectar problemas en la tienda original, lo que permitió definir áreas de mejora y fundamentar las decisiones de diseño. Uno de los principales hallazgos fue la falta de consistencia en los estándares de contenido, lo que llevó a incorporar un trabajo de UX Writing, no previsto inicialmente, pero esencial para mejorar la claridad y coherencia de la comunicación.
Para abordar esta necesidad, se desarrollaron tres herramientas clave:
Matriz de Tono: Definición de cómo varía el tono en cada etapa del recorrido del usuario.
Matriz de Voz: Establecimiento de una voz alineada con los valores diferenciadores del producto.
Guía de Estilo: Documento unificado con normas de redacción y diseño, consolidando voz, tono y estilo.
Este enfoque no solo resolvió problemas de comunicación, sino que también sentó las bases para una evolución estratégica del contenido en futuras iteraciones del sitio web.
Resultados esperados y evaluación futura
El proyecto se llevó a cabo en su totalidad y se propusieron al cliente evaluaciones futuras para validar los resultados y garantizar mejoras continuas. Como parte de estas recomendaciones, se planificaron revisiones basadas en datos de Google Analytics, enfocándose en indicadores clave como la tasa de conversión, el tiempo en el sitio y la experiencia de check-out. Estas evaluaciones permitirán realizar ajustes según las necesidades reales de los usuarios y los objetivos del negocio.Para abordar esta necesidad, se desarrollaron tres herramientas clave:
Consideraciones para la implementación
Junto con los testeos, se entregaron recomendaciones para la etapa de implementación, destacando la importancia de evaluar la efectividad de las mejoras y detectar oportunidades de optimización una vez que la tienda esté en funcionamiento. Se propusieron los siguientes puntos de análisis:
1. Evaluación de la búsqueda y navegación
Para la tarea de búsqueda de productos, será clave verificar si los resultados son relevantes para los usuarios, especialmente considerando la recategorización y organización del catálogo de productos en proceso.
Además, se sugiere incorporar una nueva tarea de testeo:
Tarea: Navegación y Exploración
Objetivo: Evaluar cómo los usuarios navegan por la tienda y exploran diferentes categorías en busca de productos.
2. Evaluación del carrito y agregado de productos
Para la tarea "Añadir productos al carrito", se deberá verificar:
Que la cantidad seleccionada se refleje correctamente sin ajustes adicionales.
Que no se generen errores al agregar productos, incluyendo variantes de un mismo producto.
3. Evaluación del proceso de pago y conversión
En la tarea "Proceso de pago y finalización de compra", se recomienda analizar:
Seguridad: Cómo se sienten los usuarios al proporcionar datos de pago.
Fluidez: Que el pago se complete sin errores técnicos.
Conversión: Medir si hay un incremento en la tasa de compra, considerando cuántos usuarios completan el proceso de pago.
4. Evaluación de "Mi Cuenta" y gestión de pedidos
En la tarea "Revisión de pedidos y vista de Mi Cuenta", será clave asegurar que:
No haya errores al acceder a la sección "Mi Cuenta" o revisar pedidos anteriores.
Los usuarios puedan actualizar su información personal y direcciones sin dificultades.
La funcionalidad de listas de favoritos o compras guardadas sea clara y fácil de usar.
Lecciones aprendidas: diseño estratégico para e-commerce
El rediseño de la tienda online de E.pack Soluciones no solo mejoró la usabilidad del sitio, sino que también fortaleció su capacidad para generar confianza, facilitar la toma de decisiones y potenciar la conversión.
Cada ajuste realizado respondió a insights obtenidos a partir del análisis del comportamiento del usuario y de las mejores prácticas en e-commerce. Entre las estrategias clave implementadas se destacan:
Optimización de la información en el Home: Se priorizó la presentación de beneficios clave (envío gratuito, medios de pago, compromiso ecológico, soporte), reduciendo las fricciones en la decisión de compra y fortaleciendo la transparencia.
Incorporación de prueba social: La validación a través de experiencias de otros usuarios refuerza la confianza en la marca y mejora la percepción del producto.
Simplificación de la navegación: Se jerarquizaron los accesos clave, eliminando elementos de menor impacto y optimizando la estructura de categorías y filtros, manteniendo una experiencia fluida tanto en desktop como en mobile.
Rediseño de las fichas de producto: Se reorganizó la información para que los usuarios puedan visualizar de manera rápida y eficiente los datos más relevantes, favoreciendo la comparación y toma de decisiones.
Mejoras en el proceso de compra: Se garantizó que la ubicación del usuario en el flujo de pago fuera siempre clara, facilitando la edición del carrito y reiterando información relevante (pago seguro, envío gratuito, medios de contacto).
Estrategias de conversión: Se incorporaron mecanismos de venta sugestiva como cross-selling y up-selling, así como incentivos directos como cupones de descuento para primera compra, mejorando la retención y fidelización de clientes.
Refuerzo de la identidad de marca: La incorporación de una página “Sobre Nosotros” no solo mejora el posicionamiento SEO, sino que también aporta diferenciación y genera una conexión más profunda con el usuario.
Este proyecto reafirmó que el diseño UX/UI en e-commerce va más allá de la interfaz: cada decisión impacta directamente en el negocio. La combinación de investigación, validación con usuarios y estrategias de conversión permitió construir una experiencia optimizada, alineada tanto con las necesidades de los clientes como con los objetivos comerciales de la marca.
