Aplicando los Principios del Pensamiento de Producto a tu Sistema de Diseño

Rate this content
Bookmark
Slides

Has plantado las semillas de tu sistema de diseño. Quizás hayas construido algunos componentes y configurado un Storybook básico. ¿Pero a dónde vas desde aquí?


Puede ser fácil dejar que tu perfeccionista interior se apodere e intentar cubrir todos los escenarios y casos límite, especialmente cuando se hace referencia a sistemas de diseño establecidos. Sin embargo, un enfoque más efectivo es tratar tu sistema de diseño como un producto que crece y evoluciona con tus usuarios. En última instancia, su valor radica en los problemas que resuelve y las necesidades que satisface.


En esta charla, exploraré cómo aplicar los principios del pensamiento de producto a tu sistema de diseño, entrelazando ejemplos de mi propia experiencia como líder de ingeniería de sistemas de diseño.

6 min
12 Dec, 2023

AI Generated Video Summary

La charla de hoy se centra en la aplicación de los principios de fabricación de productos a los sistemas de diseño, enfatizando la priorización, los MVPs y las métricas. Destaca la importancia de entender las necesidades del usuario y los objetivos comerciales a través de la investigación y la recopilación de datos. La charla también enfatiza el proceso iterativo de construcción de componentes, recopilación de comentarios y iteración basada en la validación del usuario. Por último, subraya la importancia de medir el progreso con métricas para seguir el uso y la adopción, y para demostrar el impacto de los esfuerzos del sistema de diseño.

1. Introducción a los Principios del Sistema de Diseño

Short description:

Hoy, hablaré sobre cómo aplicar los principios de creación de productos a su sistema de diseño. Un sistema de diseño no es solo una colección de componentes, sino un producto que resuelve problemas. Los principios en los que me centraré son la priorización, los MVPs y las métricas.

Hola a todos. Mi nombre es Raymond y soy un ingeniero de front end con sede en San Francisco. Hoy, hablaré sobre cómo aplicar los principios de creación de productos a su sistema de design.

Entonces, este eres tú. Eres un ingeniero de front end construyendo el sistema de design de tu empresa. Tienes una configuración básica de storybook y algunos componentes construidos, probablemente un botón. Todos siempre comienzan con un buen botón antiguo. ¿A dónde vas desde aquí? Comienzas a buscar en Google bibliotecas notables, bootstrap, material UI, ant design, chakra, blueprint, la lista continúa. Ves un montón de componentes, variantes, props, etc. Piensas que necesitas construir todo esto y empiezas a sentirte abrumado. Empiezas a sudar. ¿Alguna vez te ha pasado esto? Definitivamente me ha pasado a mí, pero lo que me ha ayudado es replantearme cómo pienso en un sistema de design. No es una colección completa de componentes perfectos que manejarán todos los posibles casos límite y escenarios. En cambio, es un producto que existe para resolver problemas, al igual que los productos que tu empresa está construyendo. Y puedes usar los principios de pensamiento de producto para ayudar a guiar tu camino hacia adelante.

Los principios en los que me centraré hoy son la priorización, los productos mínimamente viables o MVPs, y las métricas.

2. Priorizando las Necesidades del Usuario y los Objetivos Empresariales

Short description:

Comienza con tus usuarios y ponte tu sombrero de investigación de UX. Habla con ellos, descubre sus necesidades, encuentra sus problemas, síguelos, realiza encuestas y recopila datos. Además, considera los objetivos más amplios del producto y del negocio. Realiza auditorías de código para recopilar datos sobre el uso actual de los componentes. Utiliza esta información para priorizar tu trabajo.

Priorización. Hay un número infinito de cosas en las que podrías estar trabajando. ¿Por dónde empiezas? Empieza con tus usuarios, por supuesto. Probablemente sean otros ingenieros y probablemente internos, por lo que deberían ser más fáciles de alcanzar. Ponte tu sombrero de investigación de UX. Habla con ellos, descubre sus necesidades, encuentra sus problemas, síguelos, realiza encuestas y recopila data.

Además, piensa en los objetivos más amplios del producto y del negocio. ¿Hay un nuevo componente que aceleraría el lanzamiento de una característica importante que desbloquearía nuevas ventas? ¿Los clientes están escribiendo sobre problemas de UX en un área de producto importante? Aunque tu trabajo es generalmente interno, es importante no perder de vista el negocio más amplio. También puedes realizar auditorías de código para obtener data sobre el uso actual de los componentes. Me gusta usar el paquete React scanner, que escanea tu base de código y te da números sobre instancias de componentes, uso de prop, etc. A partir de aquí, probablemente verás patterns. ¿De qué se quejan comúnmente los ingenieros? ¿Qué usan a menudo? ¿Qué les resulta difícil de usar? ¿Qué es importante para el negocio? Utiliza toda esta información para priorizar en qué trabajar.

3. Construyendo Componentes y Recopilando Comentarios

Short description:

Prioriza tu trabajo y céntrate en la construcción de componentes. No te esfuerces por la perfección. Utiliza la regla 80-20 a tu favor, donde el 80% de los casos de uso se pueden construir con el 20% de tu tiempo. Lanza algo rápidamente para resolver la mayoría de los casos y recopila comentarios. Itera y valida tus soluciones.

MVPs. Así que priorizas tu trabajo, y lo más probable es que te centres en la construcción de componentes. Cuando pienses en construir, no dejes que la perfección se interponga. Puede que hayas oído hablar de la regla 80-20, que se aplica aquí. Aproximadamente el 80% de tus casos de uso se pueden construir con solo el 20% de tu tiempo total. Por otro lado, el último 20% de las partes más difíciles, o los casos de uso menos comunes, tomarán el 80% del tiempo. Secuencia tu trabajo de tal manera que puedas lanzar algo lo antes posible para resolver el caso del 80%. Después de lanzar, asegúrate de que hay canales para recibir comentarios. Aprenderás más lanzando e iterando que intentando hacerlo perfecto desde el principio. Y a través del lanzamiento más temprano, validarás continuamente si realmente estás resolviendo problemas para tus usuarios.

4. Midiendo el Progreso con Métricas

Short description:

A medida que construyes componentes, medir tu progreso es crucial. Comienza rastreando el uso y la adopción a través de herramientas como el paquete react scanner. Analiza las líneas de tendencia para identificar problemas o éxitos. Las métricas proporcionan validación para el trabajo de plataforma y demuestran el impacto de tus esfuerzos.

Métricas. Mientras estás construyendo componentes, haciendo actualizaciones, etc., es importante medir tu progreso. El primer lugar donde comienzo es el uso y la adopción. Mencioné el paquete react scanner anteriormente que te da números sobre cuántas veces se están utilizando tus componentes. Usa estos data para construir gráficos del uso de componentes a lo largo del tiempo. ¿Qué indican las líneas de tendencia? Si están planas o incluso bajando cuando no esperas que lo hagan, podría haber problemas, como errores o una API de componentes torpe, y tus usuarios pueden estar buscando otras soluciones alternativas. Si están subiendo y a la derecha, probablemente sea bueno. Tienes data que muestra que tu componente se está utilizando, por lo tanto, resolviendo los problemas de tus usuarios. Los gráficos también son útiles si estás depreciando o migrando un componente, y se sentirá tan satisfactorio cuando la línea de ese componente super antiguo o de mala calidad, todos tenemos esos, finalmente llega a cero. En general, las métricas juegan un papel crucial en el trabajo de plataforma que está menos directamente vinculado al impacto empresarial. Todos tenemos la sensación de que el trabajo de plataforma ahorrará tiempo a largo plazo, pero los números validan la importancia de nuestro trabajo y fundamentan esa sensación en data. Tiempo de historia. Bueno, veamos esto en la práctica. Basándome en mi propia experiencia construyendo un componente de tabla para el sistema de design de mi empresa. Priorización. Hablamos con otros ingenieros de muchas maneras diferentes. Casualmente, en el almuerzo, en Slack y a través de la programación en pareja. También hicimos encuestas periódicas y a través de esto, aprendimos que a mucha gente le disgustaba trabajar con su componente de tabla existente. La API no era intuitiva, básicamente era un mega componente con más de 40 props, había un montón de sobrescrituras y hacks de CSS necesarios, y algunas características estaban ausentes o eran defectuosas. Las tablas también se utilizaban en todo nuestro producto. Así que priorizamos trabajar en ello. MVP's. Si alguna vez has trabajado en un componente de tabla, sabes que hay una tonelada de complejidad. Ordenamiento, filtrado, paginación, estados de carga, encabezados pegajosos. Podría seguir y seguir. Pero no todos estos eran realmente relevantes para nuestro producto. Abordamos esto comenzando amplio y clasificando estos por importancia y desglosando esto en una lista de DEBES TENER para nuestro MVP. Después de eso, recogimos comentarios en Slack, que nos gustó porque es de baja fricción, y usamos eso para determinar en qué trabajar a continuación. A medida que surgieron más necesidades, agregamos nuevas características de manera compatible con versiones anteriores. Métricas. Para el nuevo componente de tabla, así como para todos los demás componentes que construimos, rastreamos las métricas a través de un trabajo cron recurrente que ejecutó el escáner React y envió data a nuestro panal que luego utilizamos para construir paneles que miden el uso de componentes a lo largo del tiempo. Compartimos periódicamente estos paneles fuera de nuestro equipo para generar entusiasmo por nuestros componentes, así como para mostrar el impacto de nuestro trabajo. Entonces, para resumir, prioriza tu trabajo manteniéndote cerca de tus usuarios, enfocándote en sus problemas, alineándote con el negocio y encontrando patterns. Luego, comienza con los MVPs. Practica la regla 80-20, lanza temprano, recoge comentarios y luego itera. Y por último, mide tu progreso para fundamentar la importancia de tu trabajo con data. Gracias por escuchar. Aquí está mi información de contacto si quieres ponerte en contacto.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2022React Summit 2022
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.
React Advanced Conference 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.
React Day Berlin 2022React Day Berlin 2022
23 min
The Sorcery of Building a Cross Platform Design System Architecture
When we want to build a “cross-platform mobile app” the answer always is React Native but what if you want to build a “cross-platform app” that runs across mobile and browser? Here’s where React Native falls short. react-native-web is trying to bridge this gap to some extent but the primary requirement is to write your code in React Native which gets converted to the web, but that itself has a bunch of downsides and the biggest one being - forcing mobile app developers to understand how browsers work. In this talk, I’ll share how we are building a true cross-platform architecture without using react-native-web for our design system at Razorpay.

Workshops on related topic

React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.
We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.
Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React