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.

Raymond Luong
Raymond Luong
6 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in English

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.

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

Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
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.
Build a Design System with React and Tailwind CSS
React Summit 2022React Summit 2022
27 min
Build a Design System with React and Tailwind CSS
Top Content
Tailwind CSS, with its utility-first approach is known for speeding up the development process. Combining it with the power of React, let’s see how you can build a custom design system for your project to further speed it up, make it scalable and also easy to maintain.
Walking the Line Between Flexibility and Consistency in Component Libraries
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.
Find Out If Your Design System Is Better Than Nothing
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.
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
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.

Workshops on related topic

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
Richard Moss
Richard Moss
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