badge label
badge label
badge label

BricoLab

Web adaptable de tutoriales y bricolaje 🛠

mockup tutorial 1
Cronograma
2025
Equipo
Proyecto Personal
Mi Rol
Diseñador UX/UI
Herramientas
Figma
FigmaJam

BricoLab es una plataforma web adaptable diseñada para centralizar y organizar el aprendizaje del bricolaje doméstico. El proyecto surge al detectar que los usuarios se sienten abrumados por contenido DIY disperso, irrelevante y carente de una estructura clara en plataformas convencionales. Mediante un proceso de diseño centrado en el usuario, transformé la frustración de la "sobreinformación" en una experiencia de aprendizaje guiada. La solución ofrece tutoriales curados y personalizados según el nivel de experiencia, permitiendo que tanto aficionados creativos como perfiles técnicos encuentren soluciones rápidas y visuales para mejorar su hogar.

El reto principal consistió en diseñar un ecosistema que eliminara las barreras psicológicas y técnicas que impiden a las personas iniciar sus propios proyectos. Los desafíos clave incluyeron:
  • Arquitectura de Información frente al Caos: El contenido DIY actual genera fatiga cognitiva. Mi reto fue desarrollar un sitemap y un sistema de filtros (por nivel, tiempo y herramientas) que permitiera al usuario encontrar exactamente lo que necesita en menos de 4 minutos.
  • Diseñar para la Seguridad y la Confianza: Los usuarios temen cometer errores por falta de instrucciones detalladas. Debía diseñar una interfaz que no solo mostrara pasos, sino que ofreciera retroalimentación visual clara y una jerarquía de información que minimizara el error por tarea.
  • Iteración Basada en Evidencia: Tras un estudio de usabilidad con una tasa de éxito del 86%, el desafío fue refinar puntos de fricción críticos, como la navegación entre secciones y la visibilidad de los estados de los botones, para asegurar que la herramienta fuera verdaderamente intuitiva para usuarios con baja experiencia tecnológica.

1
Para comprender el ecosistema del "Hazlo tú mismo", realicé entrevistas en profundidad a usuarios en tiendas de bricolaje, analizando cómo consumen tutoriales actualmente. Complementé esta fase con un análisis competitivo de plataformas como YouTube y Pinterest, identificando que, aunque ofrecen contenido vasto, carecen de una estructura adaptada al nivel real del usuario.
User Interviews
Competitive Analysis
Mapas de Empatía
2
Sinteticé la información creando User Personas (como María, la aficionada creativa, y Carlos, el profesional práctico) para representar arquetipos con necesidades distintas. Definí el User Journey para revelar puntos de dolor críticos, como la frustración por la sobreinformación. Esto culminó en un Sitemap y una arquitectura de información centrada en la categorización por tipo de contenido y dificultad.
User Personas
User Journey
Architecture & Sitemap
3
Pasé de bocetos en papel a wireframes de baja fidelidad en Figma, priorizando la búsqueda con filtros y la visualización clara de materiales. Construí un prototipo interactivo que validé mediante un estudio de usabilidad con usuarios reales. Los hallazgos, como la dificultad para retroceder o la falta de feedback visual, permitieron iterar el diseño antes de pasar a la alta fidelidad.
Sketches
Wireframes
Interactive Prototype
Usability testing
4
Consolidé el diseño visual mediante un moodboard y un sistema de diseño basado en la confianza (azules y naranjas) y la legibilidad (tipografía Plus Jakarta Sans). Refiné la interfaz final para garantizar un handoff eficiente, asegurando que los estados de los botones y la jerarquía de los tutoriales mitigaran el error del usuario, logrando una tasa de éxito del 86% en las tareas.
Figma
Design System
High-Fidelity Prototyping

La solución consistió en el diseño de una plataforma web adaptable que centraliza tutoriales de bricolaje bajo una arquitectura de información estructurada. El sistema elimina la fatiga cognitiva mediante:
  • Navegación Intuitiva: Implementación de una jerarquía clara basada en categorías, niveles de experiencia y tiempo estimado para evitar la parálisis por sobreinformación.
  • Interfaz de Alta Fidelidad Centrada en la Confianza: Uso de una paleta de colores (azules y naranjas) y tipografía legibles que transmiten calma y seguridad al usuario durante la ejecución de tareas técnicas.
  • Optimización basada en Datos: Refinamiento de puntos de fricción críticos, como la mejora del feedback visual y la visibilidad de materiales, logrando que el 86% de los usuarios completen sus proyectos con éxito en menos de 4 minutos.
  • Adaptabilidad Multidispositivo: Un diseño responsivo que garantiza una experiencia fluida tanto en escritorio como en móvil, permitiendo al usuario consultar la guía en tiempo real mientras trabaja.
moodboard proyecto 1
iPhone 16 Pro
mockup tutorial 1

Aprendizajes y reflexiones finales

Este proyecto representó un desarrollo en mi rol de diseñadora, donde comprendí que para resolver los problemas de usuarios principiantes no basta con ofrecer una solución, sino que debe ser una solución clara, estructurada y fácil de seguir.
  • Evidencia vs. Intuición: El test de usabilidad reveló fricciones reales que mi intuición no detectó, permitiéndome iterar el diseño con datos objetivos.
  • La Estructura es Confianza: Confirmé que una arquitectura de información clara es la mejor herramienta para reducir la parálisis por sobreinformación en el usuario.
  • Aprendizaje Continuo: Comprendí que detectar errores en las pruebas no es un fallo, sino la oportunidad necesaria para optimizar la experiencia final.

Este proyecto validó que una arquitectura de información clara y un diseño centrado en el usuario reducen drásticamente la frustración en tareas técnicas. Las decisiones finales se fundamentaron en métricas de usabilidad que garantizaron una herramienta eficiente para perfiles tanto creativos como prácticos.
86%
Tasa de éxito Los usuarios lograron completar tareas complejas de búsqueda y guardado de proyectos de forma autónoma.
1,4
Errores por tarea Una cifra significativamente baja que demuestra que la nueva jerarquía visual y el feedback de los filtros funcionan correctamente.
3
Iteraciones de diseño Una cifra significativamente baja que demuestra que la nueva jerarquía visual y el feedback de los filtros funcionan correctamente.
Made
with