Brenda ContrerasBrenda Contreras
Todos los casos
Product Design · Fintech2019

Arquitectura No-Code: Reducción de Carga Cognitiva en Flujos Complejos

Rediseño de la arquitectura y navegación de una plataforma 'no-code' para desarrollo a medida, enfocada en reducir la carga cognitiva de los usuarios mediante principios de Material Design y jerarquías visuales claras.

Contexto

Sacscloud nació para permitir a las empresas crear desarrollos a medida sin equipos técnicos, pero la complejidad de las herramientas actuales generaba una barrera de entrada crítica. Mi reto como diseñadora fue transformar una herramienta confusa en un flujo de trabajo fluido.

El reto

El problema principal radicaba en la confusión del usuario al interactuar con sistemas de creación de software. La plataforma actual carecía de una estructura clara, lo que dificultaba que las personas pudieran realizar sus tareas diarias sin fricción visual o cognitiva.

Cómo lo abordé

  1. 1

    Alineación de los pilares de Negocio, Tecnología y Experiencia mediante Design Thinking.

  2. 2

    Reestructuración de la arquitectura de información mediante sistemas de etiquetado y navegación.

  3. 3

    Implementación de un sistema de diseño basado en Material Design para evitar la saturación visual.

  4. 4

    Definición de comportamientos de componentes (push y overlay) para optimizar el espacio de trabajo.

  5. 5

    Diseño de estados vacíos (empty states) empáticos para guiar el onboarding del usuario.

Lo que me llevé

La jerarquía visual no es solo estética; en herramientas de productividad, es la base de la eficiencia. Entender que el usuario pasa horas en el sistema nos obligó a priorizar la claridad sobre la ornamentación.

Metodología

  1. 01

    Comprender

    Fase inicial de análisis de necesidades de usuarios y negocio para evaluar el problema y plantear la hipótesis.

  2. 02

    Idear

    Generación de soluciones basadas en los insights detectados sobre la complejidad del software a medida.

  3. 03

    Prototipar

    Creación de wireframes de baja fidelidad para identificar áreas de oportunidad en el flujo de creación de proyectos.

  4. 04

    Evaluar

    Pruebas de la hipótesis con usuarios reales para permitir una evolución constante del producto.

Hallazgos de investigación

  • Las aplicaciones de desarrollo a la medida existentes son percibidas como muy confusas por el usuario final.
  • La saturación visual en sistemas de uso prolongado afecta directamente la productividad.
  • Los estados vacíos son puntos críticos de abandono si no ofrecen orientación clara.
  • La navegación debe adaptarse al espacio disponible sin perder la jerarquía de los módulos principales.

Entregables

  • Wireframes de baja fidelidad
  • Arquitectura de información
  • Sistema de navegación (Push & Overlay)
  • Interfaz de usuario (UI) Mobile & Desktop
  • Guía de estilos Material Design

Evidencia del proyecto

Fotografía de un documento físico con bocetos hechos a mano (low-fidelity wireframes) que muestran el flujo de navegación entre seis pantallas diferentes de la aplicación.
Exploración inicial de flujos mediante wireframes físicos para definir la creación de proyectos y selección de módulos.
Capturas de pantalla de la interfaz de escritorio y móvil mostrando una tabla de inventario con productos, marcas y existencias bajo una estética limpia.
Interfaz final aplicada con Material Design, priorizando la legibilidad en tablas de inventario y datos densos.
Muestra el comportamiento del menú lateral y un menú desplegable en el header sobre la interfaz de la aplicación.
Definición del comportamiento del menú lateral y navegación superior para optimizar el espacio de trabajo.
Diseño de pantallas de estado vacío (empty state) para versiones web y móvil con ilustraciones amigables y botones de acción clara.
Diseño de empty states orientados a la acción, transformando pantallas vacías en guías de inicio rápido.

Sigue leyendo

Conversemos

¿Necesitas escalar,
alinear o automatizar decisiones de diseño?

Agenda una sesión exploratoria de 30 minutos. Sin formularios largos: conversamos, diagnostico tu contexto y te propongo el siguiente paso.