• Menu
  • Cerrar
    • 1Intro 2Proyectos 3Mejoras 4UI Devx 5Deuda
    Engineering team 2024
    Pablo Nuñez UI Developer

    contextoIntro

    En mi arribo a EasyBroker, me enfrenté de cerca con la deuda técnica en la interfaz y la inconsistencia en los patrones de diseño que dificultaban el trabajo de Producto e Ingeniería. Hasta ese momento, la metodología y la forma de cómo diseñamos e implementamos la interfaz en EasyBroker era solo sostenida por una librería de diseño externa un poco deprecada. Por eso, se decidió —yo— bajar esa dependencia para iterar más rápido, sin deuda y estilos heredados. Con esto, se frenó el desarrollo desde la estructura HTML para darle más poderes y forma a nuestras hojas de estilos CSS.

    Luego de esquivar la muerte exitosamente en varias ocasiones y lograr la confianza del equipo para crear nuevos estilos y formas de abordar el diseño, pudimos transformar muchos elementos, conceptos y estructuras que no solo cambiaron en el apartado visual, sino también, en la experiencia. Todo esto se hizo atacando tres áreas clave:

    • Design System

      El objetivo principal era tener en Figma un reflejo fiel a lo que tenemos en producción y viceversa. Se logró crear un flujo de trabajo para que iterar fuese más sencillo y rápido, también se aisló todo lo relacionado al diseño de marca del resto del contenido; marketing, assets públicos, prototipos, etc.

    • Style Guide

      Documentar los principales componentes, objetos, layouts y ejemplos listos para usar. Se logró cambiar el layout para poder complementar los ejemplos agregando vistas diferenciadas por breakpoints, ejemplos de variantes, código versión Rails y HTML, notas de implementación, etc.

    • Nuevo código

      Se comenzaron a crear nuevos elementos más reutilizables, optimizados, flexibles y nativos, diseñados para coexistir con los componentes que serían paulatinamente descartados. Gradualmente, los elementos antiguos fueron reemplazados, asegurando que la transición fuera fluida y sin romper cosas.

    Todo esto tomó forma entre 2023 y mitad de 2024, se empezó trabajando con el Design System para Producto, y en paralelo, el Style Guide para Ingeniería. Logrando así, un flujo de trabajo más flexible y listo para futuros retos; como ser un Portal o un CRM, jeje.

    Proyectos

    Desde el 2021 tenemos un montón de proyectos con grandes aprendizajes y buenos resultados, pero como es el primer reporte anual, veremos los más relevantes del 2023 y 2024.

    También trabajamos en varios proyectos más pequeños que lograron un gran impacto en la usabilidad y la estandarización de la interfaz.

  • Q1 2024
    Búsquedas recientes

    Agregamos busquedas recientes en el manager

  • Q1 2024
    Directorio de apps

    Rehicimos lo que antes se conocia como integraciones

  • Q1 2024
    Mapa en mobile

    Habilitamos el mapa en mobile y agregamos GPS

  • Q2 2024
    Grid filtros tipo paneles

    Refactorizamos los filtros para que usen mejor el espacio

  • Q3 2024
    Carga de imágenes

    Hicimos más usable el loader de imágenes

  • Q3 2024
    Tipo de operaciones

    Le dimos vitaminas a los tipos de operaciones

  • Q3 2024
    Editar foto perfil

    Agregamos un plugins para mostrar un preview

  • Q4 2024
    Mapas en los sitios webs

    Agregamos mapas en las plantillas activas

    • UI/UXMejoras

    Lo lindo no basta; debe funcionar y sentirse mejor. Nuestro talón de Aquiles siempre ha sido la experiencia mobile, por esa razón, priorizamos mejoras UI enfocadas en usabilidad.

    Q2 2024

    Dropdowns

    Se cambió el comportamiento con el que fue concebido (Bootstrap) en mobile. Introducimos el estilo bottom sheet con selección de items visibles.

    Dropdowns
    Shared Design System
    Dropdowns
    Style Guide Componentes
      Beneficios
    • Eliminación de dropdown customizados poco sostenible
    • Estandarización completa y feedback de animación
    • Se agregó avatares y buscador opcionales
    • Reemplazado todos los select nativos
    • Mejorada usabilidad en mobile
    Q3 2023

    Modales

    Al igual que su primo el dropdown, en mobile también cambiamos su comportamiento a bottom sheet, se enriqueció el header con acciones y se homologaron todos en el proceso.

    Modales
    EB Design System
    Modales
    Style Guide Componentes
      Beneficios
    • Estandarización completa y feedback de animación
    • Flexibilidad de diseño en tamaño y composición
    • Mejorada usabilidad y patrón en mobile y desktop
    • Footer con safe area para la app
    Q1 2024

    Alertas

    Teníamos como objetivo dejar bien claras las diferencias entre alertas que interrumpen o inician un flujo, mensajes pasivos y notificaciones.

    Alertas
    EB Design System
    Alertas
    Style Guide Componentes
      Beneficios
    • Posicionamiento responsivoPodemos customizar la posición si hay un navbar bottom u otro elemento importante
    • Estandarización completa y animación de entrada y salida
    • Mejores notificaciones tipo toast en desktop y mobile
    • Mensajes inline flexible en composición y fácil de cambiar entre estados
    • Dialog (alertas) estandarizadas en estilo y construcción
    Q3 2024

    Checkboxes

    Usábamos una versión muy fea y usuario se quejaban del contraste y tamaño de las casillas. El estado “activado” no destacaba cuando tenías un listado más grande.

    Forms
    EB Design System
    Forms
    Style Guide Componentes
      Beneficios
    • Estandarización completa
    • Estilo moderno y contraste mejorado
    • Código refactorizado y listo para escalar
    • Target área y gap entre Checkboxes responsivos
    • Microanimaciones para feedback de :hover, :active y :checked
    Q3 2024

    Actividades

    Mejoramos la apariencia y la usabilidad de las cards de actividades para optimizar la experiencia en mobile e incorporar nuevos tipos de registros.

    Historial
    Figma EB Main
      Beneficios
    • Diseño más moderno, estandarizado y compacto
    • Agregamos un divisor de fechas dinámico
    • Código nuevo y listo para escalar
    • Nuevo patrón de usabilidad de acciones flotantes
    • CSS vitaminizados para ajustar las cards según el contexto

    UI Devx

    No todos es jiji jaja a la hora de implementar features, también sufrimos haciendo cosas nuevas. Por eso, todo lo etiquetado como devx es lo que nos ayuda a mejorar el código, patrones o concepto abstractos que solo le importa a un sector marginal pero no menos importante; los devs.

    Todo los proyectos grandes mencionados no hubiesen salido con éxito si al hacerlo agregamos deuda técnica —sería como pagar Netflix en cuotas—. Para no entrar en detalles muy técnicos, solo mencionaré superficialmente los trabajos UI Devx que tuvieron más impacto para desarrollo.

  • Q2 2023
    Tokens

    Movimos todos los valores clave a un sistema que conecta Figma y producción. Así, diseño y código dejan de pelearse y todo queda consistentemente bonito desde el boceto hasta el resultado final. Esto abarca valores tales como colores, sombras, tamaños, bordes, textos, fuentes, etc.

  • Q2 2023
    Style Guide

    La guía de estilo sufrió un cambio sustancial para poder escalar y ser de más utilidad para los devs. Se agregamos más componentes, más ejemplos y se rediseño todo el layout.

    Style Guide
  • Q1 2024
    Root 16px

    Sí, el cambio fue tan simple como pasar de 17 a 16 pixeles, pero el verdadero reto fue recalcular todo para que nada se rompiera. Al final, logramos una escala métrica más lógica y un estándar de diseño que no necesita traducción simultánea.

    Métricas
  • Q1 2024
    Sistema de columnas

    Inspirándonos en el clásico sistema de 12 columnas de Bootstrap (y del mundo editorial), creamos eb-grid. Este sistema usa columnas y gaps en lugar de depender del flex tradicional.

    EB Grids
  • Q2 2024
    Sistema de capas

    Este es un problema universal en desarrollo web: el temido z-index. Este parámetro define el sistema de capas, permitiendo posicionar elementos según el contexto. Ya hicimos toda la alquimia necesaria y ahora tenemos un sistema más sólido. Reducimos de 197 referencias a solo 98.

    Layers
  • Q3 2024
    Homologación

    Con los tokens y el nuevo root listos, estandarizamos todos los botones, inputs, selectores y elementos clickeables en el Marketplace y Manager. Larga tarea, pero lo logramos sin demasiados desastres.

    Buttons

    • Cabe destacar que estos cambios, aunque parezcan simples, fueron de gran impacto para desarrollo pero también en producto. En procesos así, de cambios masivos, los errores son comunes y pueden poner en riesgo la experiencia del producto si no se tiene un buen contexto de todos los flujos y vistas afectados.

    Deuda

    Como mencioné en un principio, EB tenía una deuda técnica interesante por el paso natural del tiempo, por la difícil adopción de Bootstrap y por lo nuevos proyectos a gran escala.

    En la siguiente tabla se enumeran los conceptos principales que podrían considerarse deuda en nuestro contexto. Aunque alcanzar una deuda cero es poco realista, se priorizaron aquellos elementos que podrían generar un gran impacto con poco esfuerzo o que no requirieran de un dev adicional.

    Item Categoría Estado Descripción
    Métrica Design System Done Valores estandarizado en la escala fijada en base de 16.
    Tamaños objetos Design System Done Estandarización de tamaños de objetos y componentes principales.
    Border color Design System Done Colores de los bordes y separadores estandarizados.
    Espaciados Design System Done Clases utilitarias y métricas para margins, paddings y gaps.
    Botones Design System Done Botones en sus distintos estilos, tamaños y scope.
    Border radius Homologación Done Redondeo de las esquinas en los elementos estandarizadas.
    Sistema de capas Homologación Done Gestión de capas de los elementos fuera del flujo principal.
    Divider Homologación Done Objecto separador con variantes de espacio, tipo, estilo y orientación.
    Arquitectura CSS UI Devx Done Orden y estructura de los archivos CSS entre los distintos layouts.
    Toast UI Upgrade Done Rediseño y mejora de las notificaciones flotantes con foco en mobile.
    Tooltips UI Upgrade Done Mejora en el diseño y experiencia de los tooltips en mobile.
    Mensajes inline UI Upgrade Done Rediseño de mensajes inline.
    Modales UI Upgrade Done Estandarizar el diseño de todos los modales.
    Dropdowns UI Upgrade Done Estandarización, limpieza y mejora mobile.
    Filtros Homologación Done Estandarización, limpieza y mejora mobile.
    Selects Homologación Done Migrar todos los selects a dropdowns.
    Tabs UI Upgrade Done Rediseño de la navegación por tabs
    Iconos UI Upgrade Done Actualización y limpieza de la librería de iconos.
    Sistema de columnas UI Devx Done Clases utilitarias para diseño de grids simples.
    Forms float UI Upgrade Done Diseño y consistencia eb forms.
    Forms tipo tabla UI Upgrade Done Mejora en el diseño y consistencia de los forms tipo tablas para desktop y mobile
    Colores primary Design System Done Colores primarios.
    Colores estatus Design System Done Colores de estados.
    Colores accent Design System Done Colores de acento o complementario.
    Botones segmentados Design System In progress Migrar a un comportamiento nativo para no depender de Javascript.
    Forms legacy Design System In progress Rediseño de formularios antiguos
    Email layouts UI Devx Hold Limpieza y consistencia del diseño y estructura de los correos.
    Colores neutrales Design System Hold Estandarización y modernización de los valores de todos los colores.
    Escala tipográfica Design System Hold Tamaños de textos responsivos y escala de tamaños.
    Breakpoints tablet UI Upgrade Hold Migrar la versión tablet en el manager.
    Empty states UI Upgrade Not started Diseño y consistencia de layouts vacíos o sin datos.
    Alertas UI Devx Not started Deprecar librería externa y usar diseño nativo.
    Sistema de elevación Design System Not started Definir las sombras de los elementos superpuestos.
    Emails billings UI Upgrade Not started Mejora en el diseño de emails transaccionales.
    Loaders UI Upgrade Not started Mejora en el diseño del elemento que indicativo de procesamiento.
    Reports layout UI Upgrade Not started Arreglar todos los layout de reportes en desktop y mobile
    Task list layout UI Upgrade Not started Mejora en el diseño del layout para desktop
    Property show layout UI Upgrade Not started Mejora en el diseño del layout para desktop y mobile
    Quick search UI Upgrade Not started Mejorar el diseño para mejorar la usabilidad

    Este último año logramos reducir significativamente la deuda, gracias a los nuevos ajustes en la base de nuestro sistema de diseño, lo que permitió abordar los cambios en toda la interfaz de EasyBroker con mayor orden y consistencia, desde el diseño hasta la implementación. Aunque las prioridades podrían cambiar a lo largo del año, por ahora el principal y más complejo desafío técnico será separar las vistas de tablet y mobile en el Manager.

    Wrap up

    El progreso alcanzado en los últimos años ha sido satisfactorio, transformando la deuda técnica y los retos iniciales en logros tangibles que mejoraron tanto la experiencia del usuario como los procesos internos. Gracias a un enfoque estratégico en el diseño, la implementación y la estandarización, EasyBroker ahora cuenta con una base más sólida, flexible y escalable para enfrentar cambios futuros.

    En conclusión, las próximas iteraciones serán más ágiles, ya que ahora contamos con mayor libertad para tomar decisiones sobre cambios y mejoras. Esto se debe a que nuestro diseño e interfaz ya no depende ni está limitado por una librería externa. Incluso si quisieramos integrar nuevas tecnologías para el desarrollo de interfaces y frontend, nuestro producto está mejor preparado para adaptarse y evolucionar.