paint-brush
Sistemas de diseño: la clave para escalar eficientemente sus aplicacionespor@elevenspace
413 lecturas
413 lecturas

Sistemas de diseño: la clave para escalar eficientemente sus aplicaciones

por Eleven Space8m2023/04/27
Read on Terminal Reader

Demasiado Largo; Para Leer

Un sistema de diseño es una colección de reglas de diseño, patrones de interacción, pautas, componentes reutilizables y documentación. Es un documento vivo que proporciona la base para diseñar y construir nuevas funciones, así como para mantener las existentes. Fomenta una mejor comunicación entre diseñadores y desarrolladores, lo que garantiza un tiempo de iteración más rápido, costos reducidos y consistencia en el diseño.
featured image - Sistemas de diseño: la clave para escalar eficientemente sus aplicaciones
Eleven Space HackerNoon profile picture
0-item
1-item


Expandir la funcionalidad de su aplicación es emocionante y desafiante a partes iguales. Requiere mucha preparación, investigación, contratación de nuevos miembros del equipo, administración de la colaboración entre departamentos e inversión de recursos financieros considerables para construir una nueva arquitectura que pueda acomodar una gran base de usuarios y nuevas características.


Antes de decidir embarcarse en este viaje, asegúrese de haber agotado todas las oportunidades de escalamiento.

Crecer manteniendo los costos al mínimo

Muchos empresarios confunden "escalamiento" con "crecimiento" y usan los términos indistintamente, perdiendo el enorme potencial comercial que radica en llegar a más usuarios y aumentar los ingresos manteniendo los costos y recursos al mínimo. Una forma de lograr esto es integrando un sistema de diseño en el ciclo de desarrollo de su aplicación.


Incluso si los sistemas de diseño ganaron mucha popularidad en los últimos años, todavía parece haber cierta confusión en torno al concepto, especialmente para aquellos que no son especialistas en el campo.


Así que empecemos con lo básico.

¿Qué es un Sistema de Diseño?

Un sistema de diseño es una colección de reglas de diseño, patrones de interacción, pautas, componentes reutilizables y documentación que se puede usar al crear productos digitales. Es un documento vivo que proporciona la base para diseñar y construir nuevas funciones, así como para mantener las existentes.


Como resultado, fomenta una mejor comunicación entre diseñadores y desarrolladores, lo que garantiza un tiempo de iteración más rápido, costos reducidos y consistencia en el diseño. Eso contribuirá a una experiencia de usuario perfecta.

Componentes del sistema de diseño

Cada sistema de diseño es diferente pero, en general, alberga 4 pilares principales:


  • Los tokens de diseño son todos los elementos visuales que definirán los componentes del sistema, como el color, la tipografía y el sistema de cuadrícula. El equipo de producto los utiliza para mantener un diseño uniforme y sirven como base para crear las propiedades de la biblioteca de componentes.


  • La biblioteca de componentes reúne elementos interactivos que se utilizarán para crear la interfaz de la aplicación, como avatares, botones, insignias, casillas de verificación, selectores de fecha, elementos de entrada, botones de radio y barras de progreso, solo por nombrar algunos. Como se mencionó anteriormente, están diseñados con propiedades específicas basadas en los elementos del lenguaje de diseño que los hacen dinámicos. Son particularmente importantes para los programadores durante la etapa de desarrollo.


  • Las bibliotecas de patrones abarcan los componentes y los tokens de diseño que se usan en rutas comunes dentro de una aplicación, como los menús de navegación y los formularios. Comúnmente implementado con la metodología de diseño atómico , muestra cuándo y cómo se deben usar los componentes y sus diferentes estados (desplazamiento, clic, transición, etc.). Esto garantiza una experiencia uniforme para el usuario final de la aplicación.


  • Las pautas son todas las reglas y principios que los usuarios del sistema de diseño deben tener en cuenta cuando trabajan con el sistema. Sirve como un manual que muestra el comportamiento y la interacción del componente al mismo tiempo que hace que la incorporación de nuevos miembros sea más eficiente.


Ahora que cubrimos los cimientos, veamos cómo se puede aprovechar un sistema de diseño para escalar una aplicación sin tener que invertir una gran cantidad de recursos.

Costos de expansión de la funcionalidad de la aplicación

Consideremos el ejemplo de una empresa B2C de tecnología en etapa inicial que enfrenta el desafío de no cumplir con los plazos para el desarrollo de las características de su producto y necesita encontrar una solución para cumplir con las expectativas de sus accionistas e inversores.


Su equipo de producto está formado por 1 propietario del producto, 1 diseñador, 5 desarrolladores (frontal y administrativo) y 1 control de calidad.


Exploraremos más los escenarios potenciales que los tomadores de decisiones normalmente considerarían para implementar esto, cubriendo los costos y la asignación de recursos para cada opción. ‍

Opción A : en este caso, podrían asignar miembros del equipo existentes para respaldar la nueva funcionalidad además de sus tareas diarias y contratar especialistas basados en proyectos para manejar la carga de trabajo adicional. Esto requiere considerables recursos financieros para soportar el costo de mano de obra adicional, además del extenso tiempo necesario para incorporar a los nuevos miembros.


La alternativa a todo esto es invertir en un sistema de diseño.


Opción B: subcontratar el desarrollo del sistema de diseño a una agencia de diseño dedicada y diseñar la ruta de suscripción internamente una vez que el sistema esté implementado.


Opción A

Opción B

Mano de obra adicional

1 diseñador de experiencia de usuario ( promedio salario/hora: 49$ )
2 x desarrolladores ( promedio salario/h: 57$ Desarrollador front-end )

Agencia de diseño/freelance ( mín. $60/hora pero la tarifa depende de la ubicación y la experiencia de la agencia)

Plazo de ejecución del proyecto

- Reclutamiento: mín. 1 mes (scouting, entrevista, papeleo)
- Incorporación: 2 semanas
Diseño de ruta de suscripción: 1 mes (investigación, esquemas, diseño, pruebas, bucles de comentarios y actualizaciones)
- Desarrollo de ruta de suscripción: 2 meses
- Pruebas y optimización: 2 semanas

- Reclutamiento de agencias de UI/UX y configuración de colaboración: 2 semanas
- Desarrollo del sistema de diseño: ±2 meses
- Diseño de ruta de suscripción: 1 semana
- Desarrollo de ruta de suscripción: 2 semanas
- Testeo y optimización: 3 días

Tiempo Total

5 meses

4 meses

Costes adicionales

$ 40k
(1 x Diseñador $8k + 2 x Desarrolladores $32k)

±$20k
(por un promedio de ±60 USD por hora para el sistema de diseño, la ruta de suscripción en sí es desarrollada por el equipo existente, por lo que no se considera un costo adicional)

Con base en los escenarios anteriores, no solo es mucho más eficiente comenzar a pensar en implementar un sistema de diseño para lanzar la ruta de suscripción más rápido, sino que en realidad es una inversión que dará resultados durante al menos cinco años.


A los efectos de este ejercicio, ofrecemos un análisis básico del tiempo y los recursos necesarios para implementar un modelo basado en suscripción que requiere el diseño y desarrollo de una nueva ruta para los pagos de los usuarios finales.


Hemos decidido optar por un enfoque minimalista, que sea fácilmente comprensible para cambiar el malentendido popular de que la implementación de un sistema de diseño es un trabajo tedioso, que requiere demasiado tiempo y recursos. Por esta razón, muchos empresarios tienden a posponer la adopción, perdiendo la oportunidad de automatizar y optimizar su negocio.


Por supuesto, este cálculo será diferente en función de cada caso específico de negocio y alentamos a los empresarios a analizar sus costos reales, caso por caso.

Ahora profundicemos más para ver por qué las nuevas empresas en crecimiento deberían considerar un sistema de diseño.

Beneficios de un sistema de diseño

Según nuestra experiencia, la implementación de un sistema de diseño aumentó la velocidad de diseño e implementación en un 65 % en un equipo de ciclo completo, reduciendo el trabajo de un sprint de dos semanas, de 10 días a 3,5 días. Lleva algunos meses construirlo y configurarlo, pero cada vez que un equipo opta por este enfoque, obtiene resultados fantásticos.

  1. Reduzca la carga de trabajo y los costos Uno de los principales beneficios de un sistema de diseño es la escalabilidad. Una vez que se han diseñado todos los componentes, es fácil duplicarlos y hacer pequeños ajustes en función de las necesidades específicas.


    De esta manera, en lugar de tener que empezar de cero cada vez que su aplicación necesita una nueva función, su equipo puede seleccionar partes del sistema de diseño y construir sobre ellas. En lugar de perder tiempo decidiendo cómo debería verse un botón, pueden enfocarse en aspectos más importantes del negocio, como mejorar los flujos de usuarios o resolver problemas que no solo reducen los costos, sino que en realidad generarán un flujo de efectivo adicional.


  2. Mejore la colaboración entre equipos

    Con un sistema de diseño implementado, los diseñadores y desarrolladores pueden colaborar de manera más efectiva porque tienen acceso a la misma información, como patrones y componentes de la interfaz de usuario, en todos los proyectos. Reduce los bucles de retroalimentación y las innumerables horas desperdiciadas en reuniones y elimina las conjeturas. El proceso se vuelve más predecible y la incorporación se vuelve más fácil. Siempre que un nuevo miembro se una al equipo, la documentación del sistema de diseño permitirá la alineación del equipo.


  3. Implementación rápida de productos

    Los sistemas de diseño pueden reducir el tiempo que lleva incorporar nuevos diseñadores al proporcionarles ejemplos y pautas. Esto significa que pueden comenzar a contribuir más rápidamente y, como resultado, su equipo estará más cohesionado. Le permite escalar su equipo usando los mismos patrones una y otra vez. Esto se traduce en menos tiempo dedicado a capacitar a nuevos empleados y más tiempo dedicado a crear excelentes productos.


    Los sistemas también ayudan a los desarrolladores a comprender cómo deben verse y sentirse las cosas. Pueden hacer referencia a la guía de estilo mientras construyen nuevas funciones o realizan cambios en las existentes y no pierden el tiempo en la estética. Esto asegura que todo se vea consistente en todas las plataformas y dispositivos.


  4. Aumente la retención de clientes

    Una experiencia intuitiva y bien pensada tiene el poder de aumentar la conversión y fidelizar a los clientes, lo que genera un efecto compuesto a largo plazo.


    Como señala Nielsen Norman Group: "Si una tarea fue particularmente fácil de realizar en comparación con las expectativas del usuario, esa experiencia puede tener un efecto positivo en el producto; es probable que el usuario recomiende el producto a un amigo y se convierta en un usuario recurrente". .

    La consistencia, una mejor colaboración en equipo y la asignación inteligente de recursos contribuyen a crear una experiencia perfecta para sus clientes en todas las plataformas y dentro de la aplicación, preparando el escenario para el crecimiento a largo plazo de manera eficiente.

Opciones de adopción del sistema de diseño

Si ya comenzó a pensar en cómo integrar esos beneficios en su negocio, debe elegir entre dos opciones de adopción:


  • Creación de un sistema de diseño personalizado

  • Adaptar uno existente, como un código abierto


Es esencial tener una comprensión clara de las necesidades de su organización antes de configurar un proyecto de sistema de diseño y evaluar cuidadosamente las ventajas y desventajas.


Si una organización tiene requisitos específicos que no pueden cumplirse con un sistema de diseño de código abierto, sería una buena inversión crear un sistema de diseño personalizado.


Para probar un sistema de diseño, puede consultar algunos de los sistemas de código abierto más populares:

Porcentaje de opciones de sistemas de diseño de código abierto utilizados o probados entre 2019 y 2021 | Fuente


Pensamientos finales

Hay muchas maneras de abordar la expansión de aplicaciones, pero los sistemas de diseño proporcionan una base sólida para una escalabilidad eficiente, lo que representa una solución para preparar todo el sistema para el futuro. No solo ofrece ventajas a largo plazo, sino que nuestro cálculo rápido demuestra ser una opción financiera aún más inteligente para planes inmediatos.


Mediante el uso de sistemas de diseño, podemos reducir la cantidad de tiempo que se dedica a reinventar la rueda, mejorar la consistencia entre los productos y reducir los costos mediante la reutilización de componentes en lugar de construirlos desde cero cada vez.


Publicado originalmente aquí