{"id":10287,"date":"2026-07-03T15:47:07","date_gmt":"2026-07-03T15:47:07","guid":{"rendered":"https:\/\/datdesignlab.com\/?page_id=10287"},"modified":"2026-10-19T14:34:56","modified_gmt":"2026-10-19T14:34:56","slug":"auditoria-ux-tuningbox","status":"publish","type":"page","link":"https:\/\/datdesignlab.com\/es\/portfolio\/tuningbox-ux-audit\/","title":{"rendered":"Caso de estudio: auditor\u00eda UX del e-commerce de TuningBox | Dat Design Lab"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"10287\" class=\"elementor elementor-10287\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4dbae63 e-flex e-con-boxed e-con e-parent\" data-id=\"4dbae63\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6aa0037 elementor-widget elementor-widget-html\" data-id=\"6aa0037\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  .cs-hero{position:relative;overflow:hidden;background:#0a0a0a;color:#fff;border-radius:var(--radius-lg);margin:12px var(--panel-inset) 0;\r\n    padding:clamp(70px,10vw,110px) var(--pad) clamp(96px,13vw,150px);text-align:center}\r\n  \/* featured image behind the hero, darkened so text stays readable *\/\r\n  .cs-hero::before{content:\"\";position:absolute;inset:-30px;z-index:0;\r\n    background:url('\/wp-content\/uploads\/2026\/10\/featured-tuningbox-scaled.webp') center\/cover;filter:blur(14px) brightness(.32)}\r\n  .cs-hero>*{position:relative;z-index:1}\r\n  .cs-hero h1{color:#fff;font-size:clamp(30px,5vw,52px);max-width:20ch;margin:0 auto;line-height:1.08}\r\n  .cs-hero__sub{color:rgba(255,255,255,.72);font-size:clamp(15px,1.8vw,18px);max-width:54ch;margin:18px auto 0}\r\n  .cs-hero__meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:780px;margin:40px auto 0;\r\n    padding-top:26px;border-top:1px solid rgba(255,255,255,.15)}\r\n  .cs-hero__meta span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:7px}\r\n  .cs-hero__meta b{color:#fff;font-family:var(--font-head);font-weight:500;font-size:15px}\r\n  .cs-heroimg{max-width:1000px;margin:-72px auto 0;padding:0 var(--pad);position:relative;z-index:2}\r\n  .cs-heroimg img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);background:#e6e6e6;display:block}\r\n  .cs-crumb{text-align:center;color:var(--muted-2);font-size:13px;margin:24px 0 0}\r\n  .cs-crumb b{color:var(--ink)}\r\n  .cs-crumb a:hover{color:var(--ink)}\r\n  .cs-body{max-width:820px;margin:0 auto;padding:clamp(36px,5vw,60px) var(--pad) 0}\r\n  .cs-sec{padding:34px 0;border-bottom:1px solid var(--line)}\r\n  .cs-sec h2{font-size:clamp(22px,3vw,30px);color:var(--ink);margin:0 0 18px}\r\n  .cs-sec h3{font-family:var(--font-head);font-size:17px;color:var(--ink);margin:24px 0 8px;font-weight:600}\r\n  .cs-sec p{margin:0 0 16px;color:var(--muted);font-size:17px}\r\n  .cs-sec ul{margin:0 0 6px;padding-left:20px;color:var(--muted)}\r\n  .cs-sec li{margin-bottom:7px;font-size:16px}\r\n  .cs-sec li b{color:var(--ink)}\r\n  .cs-gallery{max-width:1100px;margin:40px auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}\r\n  .cs-gallery figure{margin:0}\r\n  .cs-gallery img{width:100%;border-radius:12px;background:#e6e6e6;aspect-ratio:4\/3;object-fit:cover;display:block}\r\n  .cs-gallery figcaption{font-size:12px;color:var(--muted-2);text-align:center;margin-top:8px}\r\n  .cs-quote{max-width:820px;margin:40px auto 0;background:var(--card);border-radius:var(--radius);padding:34px}\r\n  .cs-quote .stars{color:var(--accent);letter-spacing:3px;font-size:15px;margin-bottom:14px}\r\n  .cs-quote p{font-size:18px;color:var(--ink-2);margin:0 0 18px;line-height:1.6}\r\n  .cs-quote .who{font-weight:600;color:var(--ink)}\r\n  .cs-quote .who span{color:var(--muted-2);font-weight:400}\r\n  .cs-nav{max-width:1100px;margin:52px auto 0;padding:24px var(--pad) 0;border-top:1px solid var(--line);\r\n    display:flex;justify-content:space-between;gap:16px;font-family:var(--font-head);flex-wrap:wrap;font-size:16px}\r\n  .cs-nav a{color:var(--ink)}.cs-nav a:hover{color:var(--accent-ink)}\r\n  .cs-nav a.disabled{color:var(--muted-2);pointer-events:none}\r\n  .cs-cta{text-align:center;padding:clamp(60px,9vw,110px) var(--pad) clamp(50px,7vw,80px)}\r\n  .cs-cta h2{font-size:clamp(28px,4.5vw,50px);color:var(--ink);max-width:22ch;margin:0 auto;line-height:1.1}\r\n  .cs-cta h2 span{color:var(--muted-2)}\r\n  .cs-cta__card{display:inline-flex;align-items:center;gap:14px;background:var(--card);border-radius:999px;\r\n    padding:10px 24px 10px 10px;margin-top:34px;box-shadow:0 24px 44px -26px rgba(0,0,0,.45);text-align:left}\r\n  .cs-cta__card img{width:46px;height:46px;border-radius:50%;object-fit:cover}\r\n  .cs-cta__card b{font-family:var(--font-head);color:var(--ink);font-size:15px;display:block}\r\n  .cs-cta__card small{color:var(--muted-2);font-size:13px}\r\n  .cs-cta__card:hover{transform:translateY(-2px);transition:transform .2s}\r\n  @media(max-width:760px){.cs-hero__meta{grid-template-columns:1fr 1fr;gap:20px}.cs-heroimg{margin-top:-46px}.cs-gallery{grid-template-columns:1fr}}\r\n<\/style>\r\n \r\n<section class=\"cs-hero\">\r\n  <h1>Auditor\u00eda UX para una experiencia de e-commerce m\u00e1s fluida<\/h1>\r\n  <p class=\"cs-hero__sub\">Una auditor\u00eda UX que revela los principales puntos de fricci\u00f3n, con recomendaciones claras para mejorar las conversiones.<\/p>\r\n  <div class=\"cs-hero__meta\">\r\n    <div><span>Servicios<\/span><b>Auditor\u00eda UX\/UI<\/b><\/div>\r\n    <div><span>Cliente<\/span><b>TuningBox<\/b><\/div>\r\n    <div><span>Industria<\/span><b>E-commerce y rendimiento automotriz<\/b><\/div>\r\n    <div><span>Ubicaci\u00f3n<\/span><b>B\u00e9lgica<\/b><\/div>\r\n  <\/div>\r\n<\/section>\r\n<div class=\"cs-heroimg\">\r\n  <img fetchpriority=\"high\" src=\"\/wp-content\/uploads\/2026\/10\/featured-tuningbox-scaled.webp\" alt=\"Caso de estudio de la auditor\u00eda UX del e-commerce de TuningBox\" width=\"2560\" height=\"1600\" decoding=\"async\">\r\n<\/div>\r\n<p class=\"cs-crumb\"><a href=\"\/es\/\">Inicio<\/a> \/ <a href=\"\/es\/portafolio\/\">Portafolio<\/a> \/ <b>TuningBox<\/b><\/p>\r\n \r\n<div class=\"cs-body\">\r\n  <section class=\"cs-sec\">\r\n    <h2>El reto<\/h2>\r\n    <p><b>TuningBox<\/b>, referente en tuning de rendimiento automotriz, ten\u00eda problemas serios de usabilidad en su tienda en l\u00ednea, con pocas conversiones y muchos carritos abandonados. La experiencia de compra era confusa, desconectada y dif\u00edcil de navegar, lo que frustraba a los usuarios y costaba ventas.<\/p>\r\n    <p>El objetivo fue identificar problemas de usabilidad, analizar el comportamiento de los usuarios y dar recomendaciones de dise\u00f1o aplicables para mejorar la experiencia de compra, optimizar la navegaci\u00f3n y aumentar las conversiones.<\/p>\r\n  <\/section>\r\n \r\n  <section class=\"cs-sec\">\r\n    <h2>Hallazgos y recomendaciones de la auditor\u00eda<\/h2>\r\n    <h3>Presentaci\u00f3n y filtrado de productos<\/h3>\r\n    <ul>\r\n      <li><b>Problema:<\/b> A los usuarios les costaba distinguir entre productos compatibles y no compatibles.<\/li>\r\n      <li><b>Recomendaci\u00f3n:<\/b> Implementar filtros din\u00e1micos que solo muestren los productos relevantes seg\u00fan el veh\u00edculo seleccionado, para reducir el desorden y la confusi\u00f3n.<\/li>\r\n    <\/ul>\r\n    <h3>Navegaci\u00f3n y flujo de compra<\/h3>\r\n    <ul>\r\n      <li><b>Problema:<\/b> Muchos usuarios usaban el bot\u00f3n de regresar del navegador para moverse por el sitio, lo que generaba frustraci\u00f3n.<\/li>\r\n      <li><b>Recomendaci\u00f3n:<\/b> Agregar migas de pan y enlaces claros a las categor\u00edas para dar continuidad a la compra.<\/li>\r\n    <\/ul>\r\n    <h3>Optimizaci\u00f3n de la experiencia del carrito<\/h3>\r\n    <ul>\r\n      <li><b>Problema:<\/b> Ser enviado de inmediato a la p\u00e1gina del carrito cortaba el ritmo de compra.<\/li>\r\n      <li><b>Recomendaci\u00f3n:<\/b> Implementar un minicarrito que permita ver y editar el carrito sin salir de la p\u00e1gina, para mantener al usuario comprando.<\/li>\r\n    <\/ul>\r\n    <h3>Detalle de producto y flujo de pago<\/h3>\r\n    <ul>\r\n      <li><b>Problema:<\/b> Al hacer clic en un producto, el usuario iba a otra p\u00e1gina, lo que aumentaba los tiempos de carga y le quitaba fluidez a la compra.<\/li>\r\n      <li><b>Recomendaci\u00f3n:<\/b> Usar ventanas modales para mostrar el detalle del producto sin salir de la p\u00e1gina y mantener al usuario navegando.<\/li>\r\n    <\/ul>\r\n  <\/section>\r\n \r\n  <section class=\"cs-sec\">\r\n    <h2>Resultados y entregables<\/h2>\r\n    <ul>\r\n      <li>Reporte completo de auditor\u00eda UX con los principales puntos de fricci\u00f3n<\/li>\r\n      <li>Evaluaci\u00f3n heur\u00edstica del flujo de compra completo<\/li>\r\n      <li>Recomendaciones de navegaci\u00f3n, filtros y presentaci\u00f3n de productos<\/li>\r\n      <li>Hallazgos para optimizar la conversi\u00f3n<\/li>\r\n      <li>Wireframes para mejorar la vista de producto y el flujo del carrito<\/li>\r\n      <li>Propuestas de mejora del layout para p\u00e1ginas de categor\u00eda y producto<\/li>\r\n      <li>Patrones de interacci\u00f3n sugeridos (minicarrito, modales, migas de pan)<\/li>\r\n      <li>Lista de acciones priorizadas para desarrollo<\/li>\r\n    <\/ul>\r\n  <\/section>\r\n \r\n  <section class=\"cs-sec\" style=\"border-bottom:0\">\r\n    <h2>Conclusiones finales<\/h2>\r\n    <p>Esta auditor\u00eda UX le dio a TuningBox una hoja de ruta estrat\u00e9gica para mejorar su tienda en l\u00ednea, con mejor usabilidad, m\u00e1s visibilidad de productos y un pago m\u00e1s fluido. Al diagnosticar los puntos de dolor y entregar recomendaciones de dise\u00f1o aplicables, ayud\u00e9 a preparar el terreno para una experiencia de compra m\u00e1s fluida y m\u00e1s conversiones.<\/p>\r\n  <\/section>\r\n<\/div>\r\n \r\n<!-- SOLUTION GALLERY (swap the 3 image URLs) -->\r\n<div class=\"cs-gallery\">\r\n  <figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/11\/tuningbox-product-details-overlay.webp\" alt=\"Detalle de producto en ventana modal\" loading=\"lazy\"><figcaption>Detalle de producto en ventana modal<\/figcaption><\/figure>\r\n  <figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/11\/tuningbox-filtered-product-view.webp\" alt=\"Vista de productos filtrados\" loading=\"lazy\"><figcaption>Vista de productos filtrados<\/figcaption><\/figure>\r\n  <figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/11\/tuningbox-product-information-overlay.webp\" alt=\"Informaci\u00f3n de producto en ventana modal\" loading=\"lazy\"><figcaption>Informaci\u00f3n de producto en ventana modal<\/figcaption><\/figure>\r\n<\/div>\r\n \r\n<div class=\"cs-quote\">\r\n  <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n  <p>\u201cEl trabajo era una auditor\u00eda UX\/UI y Dat entreg\u00f3 justo lo que esperaba. Lo recomiendo mucho.\u201d<\/p>\r\n  <div class=\"who\">Jo\u00ebl L. <span>\/ Socio director, TuningBox<\/span><\/div>\r\n<\/div>\r\n \r\n<div class=\"cs-nav\">\r\n  <a href=\"\/es\/portafolio\/rediseno-pagina-de-inicio-skipthedrive\/\">\u2190 Redise\u00f1o de la p\u00e1gina de inicio de una bolsa de trabajo remoto<\/a>\r\n  <a class=\"disabled\">\u2192<\/a>\r\n<\/div>\r\n \r\n<section class=\"cs-cta\">\r\n  <h2>Construye mejor, m\u00e1s r\u00e1pido y con m\u00e1s claridad <span>con colaboraci\u00f3n directa y experta de principio a fin.<\/span><\/h2>\r\n  <a class=\"cs-cta__card\" href=\"\/es\/contacto\/\">\r\n    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/08\/Dat-strategy-image-941x1024-1.webp\" alt=\"Dat Truong\">\r\n    <span><b>Ponte en contacto<\/b><small>Hablemos de tu proyecto<\/small><\/span>\r\n  <\/a>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>UX Audit for a Smoother E-Commerce Experience A UX audit revealing key friction points with clear recommendations to improve conversions. ServicesUX\/UI Audit ClientTuningBox IndustryE-Commerce &amp; Automotive Performance LocationBelgium Home \/ Portfolio \/ TuningBox The Challenge TuningBox, a leader in automotive performance tuning, faced significant usability issues on their e-commerce platform, resulting in low conversions and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10860,"parent":5535,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-10287","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/pages\/10287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/comments?post=10287"}],"version-history":[{"count":10,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/pages\/10287\/revisions"}],"predecessor-version":[{"id":10891,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/pages\/10287\/revisions\/10891"}],"up":[{"embeddable":true,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/pages\/5535"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/media\/10860"}],"wp:attachment":[{"href":"https:\/\/datdesignlab.com\/es\/wp-json\/wp\/v2\/media?parent=10287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}