2023
Get on Board

Web final

🎁 ¿Qué es Insights Pro? - El Producto

Insights Pro es una herramienta poderosa y completa desarrollada por Get on Board que brinda a las empresas análisis detallados y estadísticas exhaustivas sobre los empleos publicados en su plataforma. Su objetivo principal es ayudar a las organizaciones a optimizar su estrategia de contratación al proporcionar información valiosa y perspicaz sobre el rendimiento de los empleos.

🌟 El Proyecto

Nos enfrentamos al desafío de actualizar la identidad visual de Insights Pro para reflejar de manera más precisa los valores y la personalidad de la marca. Esto implicó un rediseño completo del look & feel, incluyendo la paleta de colores, presentación de la información y elementos visuales.

Además, buscamos unificar la presencia web de Insights Pro en una sola landing dentro del sitio web de Get on Board. Durante la fase inicial del lanzamiento, creamos varias landings utilizando diferentes tecnologías como Webflow y Netlify + 11ty para iterar rápidamente sobre el contenido. Sin embargo, con una narrativa más clara y una visión más consolidada del producto, era el momento de ordenar y unificar todo en una experiencia coherente y centralizada.

Objetivos

Los objetivos del proyecto consistieron en:

• Diseñar un nuevo look & feel que reflejara la intención y los valores de la marca.
• Actualizar el diseño del landing page de Insights Pro con un enfoque fresco y renovado.
• Unificar la presencia web del producto en una sola landing dentro del sitio web de Get on Board.

☀️ El diseño : renovación total

Look & Feel

El principal cambio que hice a la identidad visual del producto fue en la paleta de colores, pasando de un esquema oscuro a un esquema claro, con el objetivo de darle un aspecto más ligero y refrescante. Se incorporaron nuevos colores, como tonos lila y verde claro, que complementan los colores azules y rojos de Get on Board.

Para lograr una apariencia moderna, se utilizaron gradientes sutiles en todas las secciones del landing. El gradiente principal, más llamativo, se encuentra en el encabezado y el pie de página, mientras que otros gradientes delimitan las diferentes secciones del landing, proporcionando una experiencia visual atractiva y coherente.

Parte de esta actualización de la identidad visual del producto fue también crear nuevas ilustraciones que reflejaran los valores de la marca.

Para las nuevas ilustraciones, utilicé perspectiva y sombras para dar una sensación de profundidad. Estas ilustraciones brindan un toque visual único al landing y ayudan a transmitir mensajes clave de manera atractiva.

El elemento más importante de esta nueva landing era la sección que explicaba el reporte de manera más detallada. Para esta sección, reinterpreté y simplifiqué los gráficos del reporte para hacerlos simples de entender a primera vista. Realizé ajustes en la presentación de los datos para destacar los puntos clave.

Estructura y funcionalidad

La página ofrece tres acciones clave enfocadas en la venta del producto. En resumen, los usuarios pueden elegir "Contactar Ventas", "Obtener un sample report" para experimentar el producto de primera mano, o "Ver Perfiles Disponibles" dentro de un paquete predefinido o explorar todos los perfiles disponibles para un paquete personalizado.

Contactar Ventas: Al seleccionar "Contactar Ventas", se abre un formulario donde los usuarios pueden completar su información de contacto. Esta opción desencadena una serie de correo de ventas diseñados para involucrar y ayudar a los posibles clientes. Esta es la opción más directa para las ventas.

Obtener un Sample Report: También representado por un botón de "Más información" en el encabezado, la acción "Obtener un Sample Report" desencadena un correo que contiene un enlace para acceder a un Reporte de Insights Pro de muestra. Esto está destinado a usuarios que desean experimentar el producto de primera mano. El informe de muestra se acompaña de una secuencia de correos de ventas que proporcionan información adicional.

El Sample Report también incluye un banner que anima a los usuarios a comprar el producto completo Insights Pro.

Ver Perfiles Disponibles: Al elegir "Ver Perfiles Disponibles", se abre una ventana emergente que muestra los perfiles disponibles dentro de cualquiera de los 5 paquetes predefinidos. Cada paquete tiene una descripción y una lista de perfiles adaptados a las necesidades comerciales más comunes del usuario.

Además, existe la opción de un 6to "Paquete personalizado", donde los usuarios pueden elegir sus perfiles personalizados. Esta tarjeta se resalta utilizando un fondo degradado y un botón de color diferente, y su ventana emergente muestra los 46 perfiles principales disponibles (sin contar seniority, siendo un total de 125 perfiles si incluimos diferentes seniorities).

Cada modal de perfil incluye un botón que permite al usuario contactar a ventas, siguiendo la misma secuencia que en la acción "Contactar a ventas". La diferencia principal aquí es que esta acción incluye la información del paquete preferido por el usuario.

💻 Implentación

La implementación del nuevo diseño la llevé a cabo directamente en el codebase utilizando Haml y Ruby. Como responsable del front-end, me encargué de implementar el diseño del landing page, mientras colaboraba con otros desarrolladores para agregar la funcionalidad necesaria a los formularios de leads.

Ver sitio final (screenshot) ↓ Ver sitio final (web) →

🧠 Aprendizaje

Durante este proyecto, adquirí valiosos aprendizajes en diversas áreas. Aprendí a gestionar eficientemente la actualización de un landing page, desde la adaptación de la identidad visual hasta la incorporación de nuevos elementos gráficos. Además, tuve la oportunidad de trabajar directamente en el codebase, lo que me permitió mejorar mis habilidades en Haml y Ruby. También gané experiencia en la creación de ilustraciones personalizadas y en la implementación de un diseño adaptable, lo cual contribuyó a mi desarrollo profesional.

2022
Get on Board

Prototipo de testeo aquí

🎁 Qué es Get on Board? - El Producto

Get on Board es una plataforma de empleo y reclutamiento que conecta a empresas y profesionales del campo de la tecnología en América Latina. Desde su fundación en 2011, ha logrado posicionarse como una referencia líder en la industria, proporcionando una solución integral para ayudar a empresas de diversos tamaños a encontrar talento altamente calificado, al mismo tiempo que ofrece a profesionales del área tecnológica excelentes oportunidades laborales.

🌟 El proyecto - postulación rápida para reducir la fricción en el proceso de postulación

El proyecto surgió con la finalidad de abordar la necesidad original de minimizar la fricción en el proceso de postulación, especialmente para los nuevos usuarios. Se buscaba proporcionar una opción de postulación alternativa que requiriera menos formularios y pasos, lo que se concretó en la implementación de la funcionalidad denominada "Quick Apply", garantizando que el proceso fuera rápido, sencillo y sin obstáculos que desmotivaran a los candidatos a postularse.

Objetivos

Los objetivos del proyecto fueron:

1. Generar una nueva opción de postulación ágil, reducciendo la fricción de los formularios largos.
2. Garantizar la coherencia en la experiencia tanto para los postulantes como para las empresas.
3. Mejorar la experiencia de postulación. Además de agilizar el proceso de postulación, el objetivo era sumar valor a la experiencia en su conjunto

☀️ El proceso

Primera fase: y el problema, antecedentes y primeros acercamientos.

En la etapa inicial, se trabajó en la revisión de una versión temprana de Quick Apply que había sido des-priorizada previamente. Debido a la persistente necesidad de reducir la fricción en las postulaciones, se retomó el proyecto con un enfoque renovado.

Para comprender mejor el problema, analizamos las necesidades de los usuarios y las empresas. Por un lado, los usuarios necesitaban una manera menos demandante de postular, mientras que las empresas preferían tener postulaciones completas.  A partir de estos dos extremos, determinamos la menor cantidad posible de campos de información necesarios para la postulación. En un inicio, Se concluyó que los campos esenciales eran el correo electrónico, nombre del postulante, CV y Github/Linkedin del postulante, de ser necesario.

Cómo funciona Quick Apply y su integración con la experiencia de las compañías.

Desde el punto de vista técnico, la implementación de Quick Apply se basó en la utilización de un enlace mágico enviado al correo electrónico del postulante para iniciar sesión en la plataforma. Una vez dentro, los usuarios tienen la posibilidad de agregar más información a su postulación. Para los usuarios existentes, los campos se autocompletan, lo que simplifica aún más el proceso.

Desde la perspectiva de expriencia para el postulante, Quick Apply pasaba por varios touchpoints de manera lineal:

1. El formulario inicial de postulación
2. El correo enviado al usuario con el Magic Link
3. Los formularios para que el postulante complete más información una vez dentro de Get on Board

Sin embargo, surgió el desafío de integrar los postulantes de Quick Apply con la experiencia de las compañías. No solo los postulantes, si no la opción de tener o no Quick Apply habilitado en un empleo. Para solucionarlo, se establecieron dos cosas:

1. Que los postulantes que utilizan Quick Apply sean fácilmente distinguibles mediante un ícono en el funnel/kamban.
2. Que las empresas tengan la opción de activar o desactivar Quick Apply para cada empleo, brindando flexibilidad a las empresas en su proceso de selección.

Desarrollo y mejoras basadas en prototipos y pruebas

Durante la fase de prototipos y pruebas, se realizaron ajustes y mejoras basados en insights obtenidos. Algunas de las mejoras implementadas incluyeron hacer más visible el botón de postulación y dividir los campos requeridos para los postulantes en dos categorías: esenciales y opcionales. Los campos esenciales se limitaron al correo electrónico, nombre y currículum vitae, y en caso de ser necesario, se agregó el campo de salario. Los campos opcionales, como el perfil de GitHub, LinkedIn o portafolios, podrían ser agregados posteriormente para completar la postulación de manera más detallada y personalizada.

Versión final y evolución del proyecto Quick Apply

Después de iterar en múltiples prototipos y realizar pruebas exhaustivas, se llegó al prototipo final que incorporaba todas las mejoras y ajustes realizados a lo largo del proceso. Este prototipo final fue considerado listo para su implementación y representó la versión actual del proyecto. La versión final de Quick Apply es el resultado de una evolución completa, que incluye todas las mejoras y funcionalidades diseñadas y probadas durante el desarrollo del proyecto, junto con nuevas mejoras visuales que brindan una experiencia aún más satisfactoria.

🧠 Aprendizajes

A lo largo del proyecto, se obtuvieron valiosos aprendizajes que contribuyeron al conocimiento y habilidades en el diseño y desarrollo de experiencias de postulación más eficientes. Se destacó la importancia de la simplicidad en el proceso de postulación, comprendiendo que reducir la fricción y eliminar obstáculos innecesarios es esencial para motivar a los candidatos a postularse. Además, se reconoció la necesidad de adaptarse a las preferencias y necesidades de los usuarios existentes, brindando opciones flexibles que se ajusten a sus expectativas. La iteración constante y las pruebas jugaron un papel crucial en la obtención de insights valiosos que guiaron las mejoras continuas y permitieron ofrecer una experiencia de postulación más eficiente y satisfactoria tanto para los postulantes como para las empresas.

2022 - 2023
Get on Board

🌟 El proyecto y objetivos

Para complementar la marca de Get on Board, se necesitaba estilo de ilustración que representara a la humanidad sin limitarse a características físicas específicas. Para lograrlo, creé unas un estilo de ilustración basado en formas geométricas con sombras, reflejando la superposición de elementos también presentes en el logo de Get on Board.

💡 Componentes

Colores

Para los colores, utilicé una paleta de colores basada en los colores de Get on Board, pero extendida, con varios tonos de cada color para permitir mezclas en las ilustraciones.

En cuanto a la paleta de colores de los personajes, normalmente se asigna un color primario a cada personaje y se utilizan varios tonos de ese color para las distintas partes del diseño del personaje.

Fondos

Los fondos consisten en colores sólidos con elementos flotantes, como estrellas, líneas, puntos u objetos concretos, que encapsulan o enmarcan las ilustraciones.

Los elementos en el fondo pueden ser estrellas, lineas, puntos o incluso objetos más concretos.

Objetos

Los objetos sirven para complementar la acción de una ilustración. A menudo van a estar flotando en los alrededores de los personajes. Se mantienen en la paleta de colores.

No todas las ilustraciones presentan personajes. En las que carecen de personajes, el foco principal se centra en un objeto central rodeado de objetos secundarios de menor importancia.

Elementos de UI

Para representar la plataforma de Get on Board, usé versiones simplificadas de la UI de la plataforma, agregando perspectiva.

Composición

El punto de ancla de las ilustraciones son los personajes, y los demas elementos "flotan" a su alrededor. El personaje sobresale de los límites del fondo y toma protagonismo.

🚀Usos

A lo largo del 2022 -2023, he creado un banco de ilustraciones y un sistema para reconstruirlas para hacer la creación de estas más eficiente. Estas ilustraciones se han implementado de manera estratégica en diversos puntos de contacto, como newsletters, cubiertas de podcast, sitios web y stickers. Su propósito es fortalecer la identidad visual de la marca y transmitir la conexión entre la empresa y la dimensión humana.

🧠 Aprendizajes

Como aprendizaje clave, destaco la efectividad de utilizar formas geométricas primitivas para representar la humanidad de manera inclusiva. Además, se reconozco la importancia de utilizar estas ilustraciones de manera coherente en todos los canales de comunicación, asegurando una imagen de marca sólida y consistente.

2022
Get on Board

Web actual (post Awesome Fest)

Web final (pre Awesome Fest) contraseña: awesomefest2022

🎁 ¿Qué es el Awesome Fest? - El producto

El Awesome Fest de Get on Board es un evento anual que reúne a profesionales y empresas de tecnología en América Latina. Durante el festival, los asistentes tienen la oportunidad de participar en charlas inspiradoras, talleres prácticos y actividades de networking. El objetivo del evento es fomentar el intercambio de conocimientos, promover la colaboración y impulsar el crecimiento profesional en la comunidad tecnológica.

🌟 El proyecto

En el marco de la edición del 2022, mi labor principal consistió en la creación de un landing hub que sirviera como centro de información clave sobre el Awesome Fest. Este espacio fue diseñado estratégicamente para brindar a los participantes un acceso fácil y rápido a detalles sobre los sponsors, los media partners, la programación del evento, los speakers destacados y la feria de talentos.

Objetivos

Los objetivos del proyecto fueron:

1. Centralizar la información: Diseñar un espacio digital donde los participantes encuentren fácilmente todos los detalles relevantes del evento, desde sponsors hasta programación y speakers.
2. Garantizar experiencia de usuario intuitiva: Brindar una navegación fluida y amigable, con una estructura clara y secciones bien definidas para que los usuarios encuentren rápidamente lo que buscan.
3. Promover la participación: Facilitar la interacción activa de los asistentes mediante enlaces a actividades en tiempo real durante el evento y contenido actualizado para revivir las conferencias, manteniendo el compromiso de la comunidad tecnológica.

💻  El sitio

Estructura

La estructura del landing hub del Awesome Fest comprende varias secciones clave.

1. La página principal da la bienvenida a los visitantes y destaca los aspectos más importantes del evento.
2. Los speakers presenta a los expertos que compartirán sus conocimientos en el evento.
3. La sección de sponsors presenta a las empresas que apoyan el festival, así como sus links de contacto.
4. Los media partners muestran a las comunidades asociadas con el Awesome Fest, que colaboraron con la realización del evento.
5. La programación detalla las conferencias y actividades planificadas.
6. Finalmente, la feria de talentos/jobs brinda la oportunidad de explorar opciones de empleo en las empresas sponsor.

Identidad gráfica

La identidad visual del Awesome Fest 2022 se basó en el concepto de fiesta y transmitió energía y vitalidad. Se utilizaron colores vibrantes como el azul, el rojo y el verde para crear un impacto visual. Las formas orgánicas enmarcaron las fotografías y agregaron dinamismo. Se incorporaron elementos visuales "hand drawn" (dibujados a mano) para un aspecto personalizado y creativo. Patrones y tags eclécticos se utilizaron para transmitir un ambiente festivo y libre. La tipografía principal fue Work Sans, con decoraciones en los textos.

💻 Implementación

La implementación del landing hub se realizó en Webflow, utilizando componentes reutilizables para crear una experiencia consistente a lo largo del sitio. Se aprovechó la flexibilidad de Webflow para actualizar rápidamente el contenido y mantenerlo actualizado durante todo el evento.

Ver sitio final (screenshot) ↓ Ver sitio final (web) → Contraseña: awesomefest2022

🤹 Versiones

El landing hub del Awesome Fest tuvo diferentes versiones a lo largo del evento.

1. Antes del evento, se presentó información relevante y detalles sobre la celebración.
2. Durante el evento, se proporcionaron enlaces para acceder al evento en sí, permitiendo a los participantes sumergirse en las actividades en tiempo real.
3. Después del evento, se actualizó la landing hub con la programación y enlaces a cada bloque de contenido, brindando a los participantes la oportunidad de revivir las conferencias y actividades.

Me encargué de suervisar y actualizar estas versiones durante la duración de la temporada del evento.

🔑  Otras tareas

Además del desarrollo del landing hub, llevé a cabo otras tareas para complementar la experiencia del Awesome Fest. Creé las graficas de streaming, como cintillos, fondos, pantallas, etc, para transmitir las conferencias en línea, brindando una experiencia visual atractiva y coherente. Además hice las plantillas para crear los gráficos promocionales del evento y ads.

También se diseñé y programé un filtro de Instagram llamado "destino nómade", que permitió a los participantes conocer más sobre distintos destinnos con visas para nómades digitales, haciendo referencia a uno de los paneles principales del evento.

Aparte, ayudé en el evento en vivo moderando el panel de Brecha de género en tecnología.

🧠 Aprendizajes

A través del desarrollo del Awesome Fest, obtuvimos valiosos aprendizajes. Nos dimos cuenta de la importancia de tener una identidad visual coherente y atractiva que transmitiera la esencia del evento. La planificación y estructura cuidadosa de nuestro landing hub fueron fundamentales para brindar una experiencia de usuario intuitiva y accesible. Además, nuestra flexibilidad y capacidad de adaptación en las diferentes etapas del evento nos permitieron satisfacer las necesidades cambiantes de nuestros participantes y maximizar el impacto del festival en nuestra comunidad tecnológica.

2022 - 2023
Get on Board

Ver sitio de muestra (landing)

Ver sample report final

🎁 ¿Qué es Insights Pro? - El Producto

Insights Pro es una poderosa herramienta creada por Get on Board que proporciona análisis detallados y estadísticas sobre los empleos publicados en su plataforma. Está diseñada específicamente para ayudar a las empresas a obtener información valiosa sobre la efectividad de sus empleos y tomar decisiones estratégicas para mejorar sus resultados.

🌟 Proyecto

Para comenzar la venta de Insights Pro, nos dimos cuenta de la necesidad de crear una versión pública y navegable del reporte, conocido como "Sample Report". El objetivo principal era compartir el producto con los usuarios de una manera más visual y accesible, lo que nos llevó a emprender el proyecto de integrar el Sample Report y el landing page en una sola web.

Objetivos:

Los objetivos clave del proyecto fueron los siguientes:

1. Crear el Sample Report público: Desarrollar una versión del reporte que pudiera ser compartida con potenciales clientes y demostrar los beneficios y capacidades de Insights Pro.
2. Diseñar una landing page atractiva: Crear una página de destino que incluyera el Sample Report junto con información relevante y de contacto para campañas de marketing y ventas.
3. Mantener la agilidad en la edición y iteración: La landing page debía ser fácil de editar y permitir cambios rápidos para adaptarnos a las necesidades cambiantes del mercado y las demandas de los usuarios.

☀️ El proceso

El landing: desafíos con Tecnología y UX

Nos enfrentamos al desafío de iterar rápidamente y probar nuevo contenido de manera constante. Para superar este desafío implementé la landing en 11ty, un generador estático web, que permitía hacer cambios y deploys rápidos en un repositorio indepenidiente conectado a Netlify. Utilicé Nunjucjks para el templating y JavaScript para la funcionalidad.

Uno de los retos técnicos más importantes fue encontrar una solución efectiva para capturar los leads que llegaban a la landing page.

Desde un punto de vista de UX, necesitabamos mantener la experiencia del usuario similar a la de Get on Board, así que implementé pop-ups que permitían recopilar la información de contacto de los usuarios interesados. Esta parte del proyecto pasó por varias iteraciones, comenzando con un formulario externo conectado a automatizaciones a través de Zapier y finalmente utilizando los formularios del sistema interno de Get on Board para la recopilación de leads.

En el camino, pasamos por varias estrategias, como hacer el reporte visible solo después de que el usuario llenara su infomación o tener un link a un webinar explicando el producto para una secuencia de mail. Al final, logramos internalizar completamente la landing page en otro proyecto para mejorar la gestión de los leads.

En cuanto al contenido, a medida que avanzaba el proyecto, añadimos una explicación más larga y profunda del producto, sus características y sus variantes. Experimentamos con distintas formas de mostrar esta información y nos acercamos al objetivo con cada iteración.

El reporte: Generando Gráficos Dinámicos y Mejorando la Experiencia

Antes de la creación de esta landing page, el Sample Report existía únicamente en estructura. Para dar vida al reporte, desarrollé gráficos dinámicos utilizando la biblioteca de JavaScript D3. Estos gráficos se generaron a partir de archivos CSV extraídos de los datos de Get on Board, lo que permitió presentar información real de manera visualmente atractiva y comprensible. Los gráficos en D3 también se implementaron en la versión final del reporte ya en el codebase, con mejoras significativas en su presentación y capacidad de análisis.

Me preocupé por que los gráficos reflejaran tanto la identidad de Get on Board como el concepto de Insights Pro

En términos de diseño y estructura, nos esforzamos por garantizar una presentación clara y coherente con la información en el sample report. Establecimos secciones distintas para proporcionar una experiencia de usuario fluida. Además, nos aseguramos de que la información más relevante y los puntos clave del Sample Report estuvieran resaltados, utilizando elementos visuales como iconos y gráficos para transmitir de manera efectiva los datos y las estadísticas.

🧠 Aprendizajes

A lo largo de este proyecto, adquirí valiosos aprendizajes en términos de gestión de contenido, integración de tecnologías y diseño de experiencia de usuario. Aprendí a aprovechar las herramientas como 11ty, D3 y Netlify para crear una web dinámica y funcional, así como a implementar estrategias efectivas de captura de leads. También desarrollé habilidades en la interpretación y presentación visual de datos, utilizando gráficos y elementos visuales para transmitir información de manera clara y concisa.

2022
Get on Board

Escucha el podcast acá

🎁 ¿Qué es Hecho por Humanos? - El producto

El podcast "Hecho por Humanos" de Get on Board es un programa de audio que se sumerge en la dimensión humana detrás de la creación de sistemas, herramientas y plataformas tecnológicas. Reconociendo que la tecnología está hecha por personas y para personas, este podcast busca responder preguntas fundamentales: ¿Cómo nos organizamos, crecemos y adaptamos para llevar adelante estas innovaciones?

🌟 El proyecto

El concepto central del podcast es la unión entre la tecnología y la humanidad. A través de cada episodio, exploramos cómo las personas se organizan, crecen y adaptan para llevar adelante la creación y el desarrollo de sistemas tecnológicos, resaltando la importancia de la dimensión humana en este proceso.

Para crear la identidad visual de "Hecho por Humanos", busqué establecer un lenguaje visual propio que, si bien se relaciona con la marca Get on Board, tenga su propia identidad independiente y reflejera el concepto del podcast.

Objetivos

El objetivo principal del proyecto fue:

1. Crear una identidad visual para el podcast que respire tanto la esencia de Get on Board como su propio concepto.

🎨 La marca

Identidad

Durante el proceso de creación, el logo de "Hecho por Humanos" fue sometido a varias iteraciones y refinamientos para asegurarse de que capturara de manera efectiva la esencia del podcast. Realicé pruebas y ajustes en el diseño con el objetivo de transmitir visualmente la interacción entre la tecnología y la humanidad.

La identidad visual final de "Hecho por Humanos" se compone de varios elementos que reflejan su propósito y mensaje. El logo distintivo presenta dos letras "h" (una al revés) con una "x" en el centro. Estas letras no solo representan el nombre de la marca (Hecho por Humanos), sino que también simbolizan dos sillas y una mesa, aludiendo al acto de conversación y colaboración.

En cuanto a la tipografía, utilicé una combinación de la tipografía Archivo Black para resaltar el nombre del podcast y la fuente Archivo Light Underlined. Para los textos de apoyo, establecí 4 tipos de texto principales:

Colores

Originalmente, diseñé versiones tanto en modo claro como en modo oscuro de la paleta de color, pero con el uso y la retroalimentación, quedó evidente que el esquema de colores oscuros era más que suficiente para transmitir la identidad de la marca.

Los colores utilizados en la identidad visual de "Hecho por Humanos" son una variación de los colores principales de Get on Board, modificados para ajustarse a una paleta más oscura.

Elementos decorativos

Para agregar dinamismo y profundidad visual, utilizé gradientes como elementos decorativos. Hay dos colores de degradado, azul y rojo, y ambos deben fusionarse con el fondo en los bordes para lograr un efecto visual armonioso.

Además, incorporé otros elementos decorativos como 1s y 0s desvanecidos, que hacen referencia tanto al código binario como al logo de "hxh". Estos elementos ayudan a reforzar la conexión entre la tecnología y la humanidad, y se integran de manera sutil

Para agregar una mayor sensación de "humanidad" a la marca, se incorporaron doodles como elementos decorativos en el diseño de "Hecho por Humanos". Estos doodles aportan un toque creativo y lúdico, añadiendo un elemento visual distintivo y representando la conexión entre la tecnología y la humanidad.

Ilustraciones

Además, con el uso de la de marca, decidimos integrar las ilustraciones que creé especialmente para Get on Board. Estas ilustraciones presentan personajes geométricos, pero con una clara representación humana. Al combinar elementos abstractos y formas reconocibles, estas ilustraciones refuerzan el enfoque del podcast en la intersección entre la tecnología y las personas.

Fotografía

La fotografía de personas desempeña un papel crucial en la identidad visual de "Hecho por Humanos". Utilizamos imágenes de los invitados al podcast para capturar la diversidad y la conexión humana que subyace en la temática central del programa. Estas fotografías transmiten el mensaje de que la tecnología es creada por personas y para personas, resaltando la importancia de la dimensión humana en el mundo tecnológico.

Además, todas las fotos se enmarcan en una forma curva para darle un flujo orgánico al elemento visual. Esta decisión de diseño crea una sensación de armonía y suavidad, reforzando la idea de que el podcast "Hecho por Humanos" se centra en la interacción humana y la relación entre las personas y la tecnología.

🧠 Aprendizajes

En resumen, en el proyecto de creación de marca para "Hecho por Humanos" comprendí la importancia de tener clara esencia de la marca, encontrar el equilibrio entre independencia y conexión visual, prestar atención a los detalles, utilizar elementos visuales efectivos y mantener una mentalidad de adaptación y aprendizaje continuo. Estos aprendizajes me permitieron desarrollar una identidad visual sólida y coherente para el podcast, transmitiendo su mensaje central de la relación entre la tecnología y la humanidad.

2021
Proyecto personal

Mira la web final aquí

Mira el código que usé para analizar la data aquí.

🌟 El proyecto

Con el objetivo de aprender análisis de datos en python y mejorar mis habilidades de visualización de datos, decidí empezar un proyecto corto comparando las canciones más populares de los años 2020 y 2010.

✈️ Proceso

Realicé todas las funciones del proyecto, desde el diseño y la ilustración hasta el análisis y limpieza de datos en python.

Para crear la base de datos, junté dos datasets de Kaggle, uno de Spotify con información general de las canciones: fecha de lanzamiento, calificación como explícita, duración, etc; y el otro con todas las entradas en Billboard por fecha con puestos. Utilicé la librería Pandas para hacer todo el análisis y Plotly para las visualizaciones.

La data

Desde un inicio, las mayores diferencias entre ambos años fueron claras : hubieron más artistas y más canciones en el ránking en el 2020. Además, el porcentaje de canciones explícitas había aumentado.

Cuando observé la data con más profundidad algo me llamó la atención de la lista de las canciones que habían llegado al número 1. No solo era evidente el giro musical que los hits habían tenido en la década, si no que ahora habían menos artistas "repetidos". Las canciones más populares ya no eran solamente de Katy Perry o Bruno Mars, había algo más de variedad.

Esta realización, combinada con la reducción en la duración de las canciones y la mayor cantidad de canciones explícitas en general parecían sugerir que en la última década, el cambio musical había sido propiciado por los canales de distribución de música. Streaming vs radio, mayor acceso a artistas variados, menos uso de versiones censuradas de canciones explícitas, trends de internet que volvían a poner canciones de varios años antes en el chart...la radio parecía haber perdido terreno como el metrónomo que marcaba la tendencia.

Entonces decidí enfocar mi análisis en estos indicadores de cambio: géneros musicales, duración, cantidad de artistas, cantidad de semanas en el rank por canción, etc.

Para poder analizar los géneros musicales, decidí enfocarme por el momento solamente en las canciones que llegaron al número uno. Conseguir data precisa de los géneros musicales de todas las canciones resultó ser algo un poco difícil de hacer, así que opté por limitar mi análisis.  De esta lista de los que llegaron al numero 1, registré manualmente los géneros y subgéneros de cada canción desde Wikipedia. Consideré como géneros principales (o "padres") los siguientes:

Para cada subgénero, consideré dos de estos géneros principales como "padres". Por ejemplo, en el caso del dance-pop (subgénero con influencias del pop y la música electrónica, a menudo house), sus padres fueron el Pop y EDM. Cada canción tiene entre uno y tres subgéneros en Wikipedia, así que clasifiqué cada uno de ellas en sus respectivos géneros/subgéneros.

Para mantener el análisis simple, limité a los padres a solo dos géneros e incluí el disco y funk en la categoría de R&B y cualquier tipo de música electrónica en EDM.

Otras observaciones importantes  incluyeron la cantidad de semanas en el ranking por canción, artistas por canción, artistas en ambas décadas, etc. Una observación interesante que no llegué a incluir en la web final es la relación entre la fecha de primera aparición en Billboard vs la fecha de mejor puesto. No la incluí en esta versión del análisis porque quiero profundizar más en ella. Sin embargo, a simple vista se evidencia que en el 2020 las canciones llegaron a su mejor puesto en mucho menos tiempo que en el 2010.

La estructura

Luego de analizar la data, decidí presentarla en una página web simple, con gráficos y visualizaciones en SVG, por practicidad.  La librería de visualización Plotly incluye una función para exportar los gráficos en svg, así que me basé en eso para crear las visualizaciones.

Para organizar mis ideas sobre como presentar el análisis, realicé un Wireframe. Quería que la data pudiera contar una historia, que siguiera una linea lógica. Organicé de esa manera.

Ver wireframe (screenshot) ↓

El wireframe me hizo darme cuenta de algo fundamental: era necesario adaptar cada gráfico o visualización de data a tres tamaños (desktop, tablet y movil) para que se puedan apreciar bien. Quizá la mayor desventaja de hacer este proyecto con SVG y no con una librería como D3 es que el SVG no es de por si responsive. Tan pronto exporté los gráficos como html desde Plotly me di cuenta también que si quería usarlos como HTML requerirían de bastante customizacion y código para hacerlos ver como o quería. Así que al final opté por adaptar yo misma a tres tamaños cada gráfico que usé en el sitio.

Elegí tres dimensiones específicas que se ajustaban mejor a los distintos tipos de visualización.

Ya tenía el análisis, ya tenía los gráficos adaptados. Quería crear un sitio de una sola página, que alojara este proyecto y su futuro.

Para la parte más "tangible" del proyecto, la web, empecé buscando referencias. Siempre me ha gustado la estética de los instrumentos virtuales o VST, tienen un carisma que es pasado de moda y a la vanguardia al mismo tiempo. Como una idea noventera de futurismo.

En un inicio, quería crear algo con un feeling similar. El tema subyacente del análisis - como el giro hacia el streaming marca tendencia en la estructura y construcción de la música popular hoy en día- parecía resonar bastante bien con este estilo.

Sin embargo, los primeros conceptos que hice con esta idea en mente no me convencieron.

Quizá lo que hacía que esta estética encajara tan bien con los VSTS es que el solo concepto de un instrumento virtual es bastante retro-futurista. Y el hecho también está en que las interfaces sobrecargadas y llenas de rueditas y espectros de audio que son tan comunes en los instrumentos virtuales existen porque la misma funcionalidad del instrumento virtual las amerita. Se ve sobre-cargado, si, pero al final todo elemento de esa interfaz responde a una función importante.

No quería abandonar el concepto del todo, pero si modificarlo. De todas maneras quería que la web tuviera una interfaz oscura, con colores vibrantes contrastantes. Sin irnos muy lejos de la esfera musical, Spotify mismo conseguía esta identidad visual que me llamó la atención.

Decidí saltar a la piscina y probar modificando lo que ya había avanzado. Quizás un poco menos recargado, quizás menos distintos tonos de gris. Tenía ya en mente los colores para diferenciar al 2010 y el 2020, así que partí de ellos para generar más componentes.

Las tarjetas fueron lo primordial. A parte de los gráficos y visualizaciones, toda la información importante iba a ser contenida en tarjetas. No quería utilizar mucho texto en la web (por eso me explayo acá), así que las tarjetas eran mi materia prima para construir el sitio.

Decidí limpiarlas de todo elemento inecesario, líneas, sombras, etc, y valerme principalmente del texto y color. Diferencié las tarjetas con colores por año para hacer la lectura de los datos más ágil.

Enfocandome en limpiar los elementos del UI, conseguí llegar a un concepto que me agradaba. A partir del wirefrme, reconstruí cada componente en su versión más limpia.

Quería que hubiera bastante contraste. Entre el fondo y el texto, la data y el fondo, las tarjetas de un año versus de otro. La escala tipográfica también debía ser contrastante. Se trata de una comparación, un análisis que pone dos momentos del tiempo uno frente a troto, así que decidí remarcar ese contraste.

Para la escala tipográfica use una versión ligeramente modificada  de 1.4 (redondeando a menos en vez de a más) para asegurar alto contraste entre los títulos y el cuerpo. Para enfatizar aun más este contraste, puse los títulos en black o bold.

La sección más complicada fue la de los géneros musicales. En el wireframe había planteado tener los dos años uno al lado de otro y separarlos por bordes. Quería que el usuario pudiera comparar los dos estados en un mismo lugar, pudiera ver como la distribución de cada género se había movido.

En mi misión de limpiar todo el UI, pensé deshacerme de ese concepto y poner cada gráfico/card uno después de otro, intercalando años. Pero no funcionaba. No era el mismo impacto. Obviamente esta distribución solo era posible en pc, en tablet o movil no habría suficiente espacio. Al final,  conservé la idea de tenerlos juntos pero agregué badges para señalar el año y usé sombras con color difuminadas en vez de bordes sólidos.

La tarea más difícil en realidad fue adaptar las visualizaciones a el estilo gráfico del sitio. Quería ser lo más precisa posible con la data, pero habían visualizaciones que simplemente no eran agradables de leer (como la de abajo, derecha) Tuve que decidir cuando cortar información no escencial y que conservar en cada plot.

Por último, realicé algunas ilustraciones decorativas para dividir la introducción en párrafos y hacerla más fácil de leer. Además hice una ilustración para el header

Desarrollé el sitio en HTML y CSS usando de base una versión modificada de Bootstrap con SASS. El sitio final está en vivo en este link (a través de Netlify)

Incluyo acá algunas de mis ilustraciones realizadas en los últimos años.

Incluyo ilustraciones propias y para cliente.

2021 Trabajo para cliente: Concept Art para un video 3D para Plan International.

El video final está acá.

2021 Trabajo para cliente - ilustraciones para la campaña digital de Rímac Seguros. Hasta donde sé, no llegaron a utilizar estas.

2021
Freelance

Puedes ver el sitio web final aquí

😄 El cliente

Cafuné es una joyería independiente que se especializa en accesorios de acero quirúrgico.

🌟 El proyecto

La tienda opera a través de Instagram y Facebook. El cliente requería de un sitio web que pudiera albergar un catálogo con todos sus productos. Cada producto tendría una página individual que describiera sus principales características y se vincule a las redes sociales de la empresa.

El proceso

La estructura del sitio era simple: el cliente quería una página principal con áreas delimitadas para las secciones de introducción, información de contacto y sobre nosotros y una página individual para cada producto.

Como el mapa del sitio era bastante simple, el análisis de la experiencia del usuario se centró principalmente en establecer un flujo claro desde la página de inicio hasta un enlace a Facebook o Instagram.

Probé dos opciones de flujo para la visualización del catálogo con tres clientes de la empresa:

• Una página de catálogo separada de la página principal. La página principal se vincularía al catálogo y la página de catálogo mostraría todos los productos.
• Los productos destacados en una grilla en la página principal, con un botón de "ver más productos" o un enlace a una página diferente que aloje el catálogo completo.

Los usuarios sugirieron un enfoque diferente: tener todo el catálogo en exhibición en la página de inicio, como si fuera un feed de redes sociales. Esta tercera opción terminó siendo la elegida.

A partir de toda esta información, y para orientar el resto del proceso de diseño, creé un flujo de usuario y un mapa de sitio sencillos:

Para continuar con el proceso de diseño visual, comencé a analizar la marca y sus características. La marca ya tenía una paleta de colores bien definida y un estilo general, así que recopilé referencias con un enfoque similar: colores tierra, líneas delicadas, sensación de mano alzada. El cliente quería en específico secciones limpias y bien definidas para su sitio, así que basé los primeros wireframes en este concepto.

Wireframe (screenshot) ↓

A partir de los wireframes iniciales y la guía de estilo preexistente, presenté los estilos y componentes principales del sitio:

Como se trataba de la web de una tienda, le di a las fotografías el mayor peso visual, resaltándolas con collages y tamaños grandes.

Para la tipografía, diseñé una escala tipográfica de alto contraste.

Usé una tipografía monospace (Roboto mono) para texto decorativo como la definición del nombre de la marca.

Los botones impulsan la interacción de este sitio. Diseñé dos estilos principales para los botones: el secundario, delineado y utilizado para enlaces de redes sociales y enlaces de productos y uno primario verde utilizado para el CTA principal del sitio: ir al catálogo.

Para agregar interacción a los botones, hice esta suave animación de hover.

El lenguaje visual de la marca se basa en gran medida en ilustraciones lineares mínimas. Creé algunas ilustraciones personalizadas en un estilo similar para usarlas como elementos decorativos. También usé versiones reducidas de este tipo de ilustraciones para crear los íconos para el sitio.

Las cards son los componentes básicos del catálogo en el sitio. Diseñé estas cards para combinar con el flujo de la página y hacer una experiencia de usuario más consistente.

Una vez que se aprobó el diseño final, comencé a construir el sitio. Programé el sitio web utilizando Ghost CMS, un sistema de gestión de contenido de código abierto, como un headless CMS y Eleventy como el generador de sitios estáticos. Incursionar directamente en la arquitectura Jamstack sin conocimientos previos fue un desafío al principio, pero el desafío brindó grandes oportunidades de aprendizaje.

Construí el tema del sitio personalizado sobre el tema predeterminado de Ghost, Casper. Modifiqué las plantillas principales en el lenguaje de plantillas de Handlebars y agregué interacciones de front-end de JavaScript personalizadas. (Por ejemplo, el tema Casper predeterminado no tiene una barra de navegación plegable, así que construí una yo misma). Decidí no usar ningún frameowrk de interfaz de usuario como Bootstrap para este proyecto. No solo para evitar el aspecto uniforme que los frameworks pueden dar, sino también como un desafío para mí misma.

Puedes chequear el sitio final aquí.