¿Diseñador o programador? Las herramientas que tu ‘startup’ necesita para crear productos digitales

Es hora de crecer. Una pequeña ‘startup’, constituida por tres amigos, contrata a una desarrolladora ‘front-end’ (la parte visual del ‘software’ que permite la interacción con los usuarios) para programar la interfaz de la web. La compañía no cuenta con un departamento de diseño, sino que, debido a su pequeño tamaño, colabora con una empresa especializada. Esta compañía entrega el resultado a la programadora, pero el trabajo se complica: no ha tenido en cuenta cuestiones técnicas que atañen al desarrollo. El trabajo conjunto podría haberse mejorado a través de herramientas virtuales para facilitar la comunicación.

En BBVA Open Innovation, ya explicamos las claves del proceso de creación de un producto digital en una ‘startup’, todo un proceso para el que existen aplicaciones web fáciles de usar; herramientas de trabajo que agilizan la labor entre emprendedores, desarrolladores y diseñadores UX. Estas herramientas pueden ser útiles también para los participantes del Hackathon BBVA 2022, la competición organizada por BBVA Open Innovation los días 21, 22 y 23 de octubre donde profesionales multidisciplinares abordarán los desafíos de transformación digital de las unidades de negocio del banco en Colombia, España, México y Perú. El prerregistro de la competición está abierto aquí.

El sistema de diseño, un idioma común

Para comenzar a crear un producto digital, es recomendable recurrir a profesionales de diseño que elaboren el ‘design system’ o sistema de diseño durante las etapas tempranas de la empresa. En esencia, es una referencia gráfica y escrita que permite unificar todos los aspectos relevantes de una marca. Los elementos básicos de cualquier sistema de diseño se conocen como fundacionales: la tipografía, la paleta de colores, la iconografía… Tener esto agilizará la creación posterior del producto digital. «Cuando tu ‘startup’ crezca, tener un sistema de diseño va a facilitar la curva de aprendizaje de las personas nuevas», argumenta Noe Medina, ingeniera UX en Paradigma Digital.

Jose Antonio Méndez, diseñador UX y arquitecto de la información en BBVA, coincide en la importancia del sistema de diseño para acortar el ‘time to market’, el tiempo que pasa entre que se idea un producto y llega al mercado. El experto detalla: «Si vas a lanzar un producto digital, es importante identificar que los elementos web funcionan igual en todos tus productos y que a nivel visual y de experiencia de usuario son homogéneos», detalla Méndez. María Fernández, diseñadora UX en BBVA añade que, gracias a los sistemas de diseño, «podemos diseñar más rápido un producto pulido y que sea consistente”.

Del diseño al desarrollo, paso a paso

Una vez el equipo cuenta con un sistema de diseño, se puede abordar la creación de cualquier producto digital. El uso del sistema de diseño es transversal para todos los departamentos involucrados en el proyecto. Medina, por ejemplo, asegura tener reuniones periódicas con el equipo al completo para «tomar un café y preguntar las dudas que pueda tener».

El equipo de Diseño de BBVA, ganador en 2021 de una mención especial en los Premios Nacionales de Diseño en España, recomienda que diseñadores, desarrolladores y responsables de negocio trabajen de la mano desde la fase de ideación del producto. «Deben utilizar un lenguaje común, el sistema de diseño y emplear las mismas herramientas en todas las fases de creación del producto», aconseja Méndez. «La gran ventaja es que hoy en día tenemos herramientas que nos permiten testear en todas las fases de forma muy barata», añade José Balaguer, director del Máster en UX en UNIR.

El equipo de BBVA usa soluciones digitales a lo largo del proceso de ‘design thinking’, una metodología de mejora continua que fomenta la innovación para resolver problemas en cuatro fases: comprensión, ideación, prototipado e iteración. Con base en estas cuatro etapas, los expertos consultados recomiendan plataformas, en muchas ocasiones ‘freemium’ (con una versión gratuita básica y funcionalidades avanzadas de pago) para concebir los productos digitales.

1. Comprensión

En esencia, se busca identificar para quién se diseña y cuáles son los rasgos del usuario a través de una investigación cualitativa y cuantitativa.

• Investigación cualitativa: Indeemo o Incling, ambas aplicaciones son muy similares que permiten generar claves para estudiar el comportamiento de los usuarios durante un tiempo determinado.
• Investigación cuantitativa: Existen varias herramientas para crear encuestas, como Survey Monkey, la herramienta ‘no-code‘ Typeform, Survio o Google Forms.

2. Ideación

En este proceso, se generan ideas de forma colaborativa en un ‘brainstorming’ y se plasman en un mapa visual. Gracias a las aplicaciones, se puede «romper la barrera geográfica y temporal entre los participantes», puntualiza José Balaguer.

• Miro: Permite usar un tablero en el que crear pósits, anotaciones, diagramas y agrupaciones de conceptos.
• Flowmap: Herramienta de planificación UX que permite crear perfiles de personas, mapas de experiencia de cliente y ‘wireframes’ (prototipos visuales de un producto digital).
• Mural: Es una pizarra virtual colaborativa en la que se puede combinar texto, imagen, vídeos etc.

3. Prototipado

El siguiente paso es crear prototipos visuales de esas ideas, es decir, darles forma para poder probar si funcionan.

• Sketch: Solo disponible para sistema operativo macOS, es la herramienta utilizada por el equipo de Diseño de BBVA. La complementan con una herramienta puente, InVision, para inspeccionar las especificaciones técnicas de esos componentes que se desarrollarán después.
• Figma: Es un ‘software’ de prototipado de productos digitales ‘no code’ que permite la colaboración entre equipos. Esta herramienta intuitiva y ágil se ha convertido hace unos meses en unicornio: la compañía está valorada en 10.000 millones de dólares. Noe Medina lo tiene claro: «Figma es la herramienta: permite dejar notas y comentarios para fomentar la conversación y mencionar a alguien del equipo de negocio o legal para que te apoye en momentos concretos».
• Adobe XD: Muy parecida a Figma, permite el diseño de experiencias e interfaces de usuario para sitios web, aplicaciones y mucho más.
• Marvel: Herramienta que permite testear ‘online’ los productos de manera sencilla.
• Storybook: Esta solución de código abierto para construir componentes UI (User Interface, diseño de interfaz de usuario).

4. Evaluación

El ‘handoff’ (entrega del trabajo de diseño a desarrollo) no es el final del trabajo del equipo de diseñadores. Se deben poner a prueba los prototipos e iterar, es decir, repetir el proceso para afinar el resultado teniendo en cuenta el ‘feedback’ de forma ágil. Las herramientas mencionadas anteriormente pueden servir para ello.

«Es importante hacer una buena revisión de herramientas y estar siempre actualizado porque cambian muy rápido en precio y funcionalidades», concluye José Balaguer. La clave está en probar qué herramientas se adaptan mejor a las circunstancias de cada emprendedor.

Para resolver sus problemas en la creación de productos digitales, la ‘startup’ imaginaria que presentábamos al principio del artículo ha desarrollado un sistema de diseño. La programadora ‘front-end’ tiene conversaciones periódicas con el equipo de diseño y trabajan juntos gracias a las plataformas virtuales. Deberán afrontar retos, pero la estrategia garantiza el éxito.