Una guía para aceptar desafíos y sobresalir en su pasantía de diseño de UX
Publicado: 2022-03-10Esta es la historia de mi pasantía de diseño de usuarios. No estoy diciendo que tu pasantía vaya a ser como la mía. De hecho, si hay algo que puedo decir para moldear sus expectativas, sería esto: prepárese para dejarlas todas a un lado. Por encima de todo, recuerda darte espacio y tiempo para aprender . Comparto mi historia como un recordatorio de lo mucho que luché y lo bien que salió todo a pesar de mis dificultades para que yo nunca deje de intentarlo y tú tampoco.
Todo comenzó en mayo de 2018, cuando bajé del avión en Granada, España, con un equipaje a mi lado, una computadora portátil en la espalda y algo de español muy oxidado en la cabeza. Era mi primera vez en Europa y estaría aquí durante los próximos tres meses haciendo una pasantía en diseño UX en Badger Maps. Todavía estaba bastante verde en UX, había estado aprendiendo sobre él durante apenas un año en este momento, pero me sentía listo y ansioso por adquirir experiencia en un entorno profesional.
Siga mientras aprendí cómo aplicar el conocimiento técnico para completar las tareas prácticas de diseño que me asignaron:
- Cree un sistema de diseño para nuestra aplicación iOS usando Sketch;
- Diseñe una nueva función que muestre los errores que ocurren en las importaciones de datos;
- Aprender los conceptos básicos de HTML, CSS y Flexbox para implementar mi diseño;
- Crea animaciones con Adobe Illustrator y After Effects.
Este artículo está dirigido a principiantes como yo . Si eres nuevo en el diseño de UX y buscas explorar el campo, ¡sigue leyendo para saber si una pasantía de diseño de UX es lo adecuado para ti! Para mí, el trabajo que terminé completando fue mucho más allá de mis expectativas. Aprendí cómo diseñar un sistema, cómo comprometer el diseño con las necesidades del usuario, los desafíos de implementar un nuevo diseño y cómo crear algunos "momentos de placer". Cada día en la pasantía presentaba algo nuevo e impredecible. Al finalizar mi pasantía, me di cuenta de que había creado algo real, algo tangible, y fue como si todo con lo que había luchado de repente cayera en su lugar.
Lectura recomendada : Cómo conseguir una pasantía de diseño gráfico de primer nivel
Capítulo 1: Legos
Mi primera tarea fue crear un sistema de diseño para nuestra aplicación iOS existente. Había creado sistemas de diseño en el pasado para mis propios proyectos y aplicaciones, pero nunca los había hecho retrospectivamente y nunca para un diseño que no fuera mío. Para completar la tarea, necesitaba aplicar ingeniería inversa a las maquetas en Sketch; Primero necesitaría actualizar y optimizar el archivo para crear el sistema de diseño.
También fue en este momento oportuno cuando supe que el programa Sketch en mi computadora había estado desactualizado durante aproximadamente un año y medio. No conocía ninguno de los símbolos, anulaciones y otras funciones de las versiones más recientes. Lección aprendida: mantenga su software actualizado.
Antes de preocuparme por la página de símbolos, revisé las maquetas mesa de trabajo por mesa de trabajo, asegurándome de que estuvieran actualizadas y fueran fieles a la versión actual de la aplicación. Una vez hecho esto, comencé a crear símbolos y anulaciones para diferentes elementos. Empecé con el encabezado y el pie de página y continué desde allí.
Como regla general, si un elemento aparece en más de una página, lo convertiría en un símbolo. Agregué diferentes íconos al sistema de diseño a medida que avanzaba, construyendo la biblioteca. Sin embargo, rápidamente quedó claro que el sistema de diseño estaba evolucionando y cambiando más rápido de lo que podía intentar organizarlo. A la mitad, dejé de tratar de mantener los símbolos organizados y opté por volver atrás y reorganizarlos una vez que había terminado de recrear cada página. Cuando dejé de ir y venir entre maquetas y símbolos y de preocuparme por la organización de ambos, pude trabajar de manera más eficiente.
Fue fácil llegar a apreciar las anulaciones y los símbolos en Sketch. Las funciones hicieron que el programa fuera mucho más poderoso de lo que estaba acostumbrado y aumentaron la funcionalidad del archivo para diseños futuros. La tarea de crear el sistema de diseño en sí me desafió a profundizar en el programa y comprender todos los detalles del diseño de nuestra aplicación . Empecé a notar pequeñas inconsistencias en el espaciado, el tamaño de los íconos o el tamaño de las fuentes que pude corregir mientras trabajaba.
El paso final fue volver a la página de símbolos y organizar todo. Eliminé todos los símbolos, eliminé los que no estaban en uso y cualquier réplica. A pesar de ser un poco tedioso, este fue un paso muy valioso en el proceso . Revisar los símbolos después de trabajar en el documento me dio la oportunidad de reevaluar cómo había creado los símbolos para cada página. Agruparlos me obligó a considerar cómo se relacionaban a lo largo de la aplicación.
Al pasar por este proceso de pensamiento, me di cuenta de lo difícil que era crear un sistema de nombres. Necesitaba crear un sistema lo suficientemente amplio para abarcar suficientes elementos, lo suficientemente específico para evitar ser vago, y que otro diseñador pudiera entender fácilmente. Me tomó algunos intentos antes de dar con un sistema viable con el que estaba feliz. En última instancia, organicé los elementos según el lugar en el que se usaron en la aplicación , agrupando las piezas como si fueran listas. Funcionó bien para una aplicación como Badger que tenía diseños distintos para diferentes funciones en la aplicación. El producto final fue un archivo más organizado con el que sería mucho más fácil trabajar para futuras iteraciones de diseño.
Como culminación de este proyecto, experimenté con la modernización del diseño. Rediseñé los encabezados en toda la aplicación, inspirándome en aplicaciones nativas de Apple. Afortunadamente, el equipo también estaba entusiasmado y está considerando implementar los cambios en futuras actualizaciones de la aplicación.
En general, trabajar un archivo de Sketch con tanto detalle fue una experiencia inesperadamente útil. Me fui con una comprensión fundamental mucho mayor de cosas como el tamaño de fuente, el color y el espaciado en virtud de rehacer cada página. El ejercicio de copiar el diseño existente requirió una minuciosa atención al detalle que fue muy satisfactoria. Era como armar un modelo de Lego: tenía todas las piezas y sabía cómo debía ser el producto final. Solo necesitaba organizar todo y juntarlos para crear el producto terminado. Esta es una de las razones por las que disfruto haciendo diseño UX. Se trata de resolver problemas y armar un rompecabezas para crear algo que todos puedan apreciar.
Capítulo 2: El diseño
La siguiente parte de mi pasantía me permitió meterme en la maleza con un poco de trabajo de diseño. La tarea: diseñar una nueva página de importación para la aplicación web Badger.
El equipo estaba trabajando en el rediseño de la integración de Badger con CRM para crear un sistema que permitiera a los usuarios ver cualquier sincronización de datos y administrar sus cuentas ellos mismos. La conexión actual implica una gran cantidad de trabajo práctico de Badger CSA y AE para configurar y mantener. Al proporcionar una interfaz para que los usuarios interactúen directamente con las importaciones de datos , queríamos mejorar la experiencia del usuario para nuestra integración de CRM.
Mi objetivo era diseñar una página que mostrara los errores que ocurrían en cualquier importación de datos que también comunicara a los usuarios cómo y dónde realizar los cambios necesarios en sus datos. Si hubiera más errores asociados con una sola importación o si los usuarios quisieran ver todos los errores a la vez, deberían poder descargar un archivo de Excel con toda esa información.
Objetivos
- Crear una página de importación que informe al usuario sobre el estado de una importación en proceso;
- Proporcione un registro histórico de sincronizaciones de cuentas entre Badger y CRM con errores detallados asociados con cada importación;
- Proporcione enlaces al CRM para cada cuenta que tenga un error de importación en Badger;
- Permita que los usuarios descarguen un archivo de Excel de todos los errores pendientes.
Historias del usuario
Cliente Badger con cuenta de CRM :
Como cliente con un CRM, quiero poder conectar mi CRM a mi tejón y visualizar todas las sincronizaciones de datos para estar al tanto de todos los errores en el proceso y poder hacer los cambios necesarios.
tejón :
Como tejón, quiero que los usuarios puedan administrar y ver el estado de su integración de CRM para poder ahorrar tiempo y trabajo manual ayudando y solucionando problemas de los usuarios al sincronizar su tejón con sus cuentas de CRM.
Antes de profundizar realmente en el diseño, necesitábamos pensar un poco para decidir qué información mostrar y cómo:
- Importaciones a granel versus continuas
Según el tipo de usuario, hay dos formas de importar datos a Badger. Si se hace a través de hojas de cálculo, las importaciones se procesarían por lotes y podríamos visualizar las importaciones en grupos. Sin embargo, los usuarios integrados con sus CRM necesitarían que sus datos de Badger se actualizaran constantemente a medida que hicieran cambios dentro de su CRM. El diseño necesitaba poder manejar ambos casos de uso. - Importar registros
Debido a que esta era una característica nueva, no estábamos absolutamente seguros del comportamiento del usuario. Por lo tanto, decidir cómo organizar la información fue un desafío. ¿Deberíamos permitir que los usuarios busquen un desplazamiento infinito en una lista de su historial? ¿Cómo buscarían una importación específica? ¿Deberían poder hacerlo? ¿Deberíamos mostrar la actividad día a día o mes a mes?
En última instancia, solo pudimos hacer una mejor suposición para cada uno de estos problemas, sabiendo que podríamos hacer los ajustes apropiados en el futuro una vez que los usuarios comenzaran a usar la función. Después de pensar en estos temas, pasé a la estructuración de alambres. Tuve la oportunidad de diseñar algo completamente diferente y esto fue a la vez liberador y desafiante. El diseño final fue la culminación de elementos individuales de varios diseños que se crearon a lo largo del camino.
Proceso de diseño
La parte más difícil de este proceso fue aprender a empezar de nuevo. Eventualmente aprendí que forzar algo en mi diseño con fines únicamente estéticos no era lo ideal. Entender esto y dejar ir mis ideas fue clave para llegar a un mejor diseño. Necesitaba aprender a empezar de nuevo una y otra vez para explorar diferentes ideas.
Desafíos
1. Usar espacios en blanco
Desde el principio, necesitaba explorar qué información queríamos mostrar en la página. Había muchos detalles que podíamos incluir, y definitivamente el espacio para hacerlo.
Toda la información innecesaria agregaba demasiada carga cognitiva y quitaba lo que realmente preocupaba al usuario. En lugar de tratar de deshacerme de todo el espacio en blanco, necesitaba trabajar con él. Con esto en mente, finalmente eliminé toda la información irrelevante para mostrar solo lo que esperamos que a nuestros usuarios les preocupe más: los errores asociados con las importaciones de datos.
Esta fue la versión final:
2. Navegación
El siguiente desafío fue decidir entre una barra lateral o un encabezado para mostrar información. Las ventajas de la barra lateral eran que la información sería visible de manera constante a medida que el usuario se desplazaba. Pero también teníamos que asegurarnos de que la información contenida en la barra lateral estuviera lógicamente relacionada con lo que sucedía en el resto de la página.
El encabezado ofrecía la ventaja de un diseño limpio de una sola columna. La desventaja era que ocupaba mucho espacio vertical dependiendo de la cantidad de información contenida en el encabezado. También priorizó visualmente el contenido del encabezado sobre lo que estaba debajo para el usuario.
Una vez que descubrí qué información mostrar y dónde, la navegación de la barra lateral se convirtió en la decisión más lógica. Esperamos que los usuarios se preocupen principalmente por los errores asociados con sus importaciones y con un encabezado grande, demasiada información caería debajo del pliegue. La barra lateral podría ser un contenedor para un resumen de importación y actividad que sería visible a medida que el usuario se desplazaba.
Diseño de la barra lateral : después de decidir tener una barra lateral, todo se redujo a decidir qué información incluir y cómo mostrarla.
Luché por crear un diseño que fuera visualmente interesante porque había poca información para mostrar. Por esta razón, una vez más me encontré agregando elementos innecesarios para llenar el espacio, aunque quería priorizar al usuario. Experimenté con diferentes combinaciones de contenido y color , tratando de encontrar el compromiso entre diseño y usabilidad. Cuanto más trabajaba con él, más podía analizar el diseño hasta los huesos básicos. Se hizo más fácil diferenciar la información útil de los rellenos. El producto final es un diseño simplificado con solo unas pocas estadísticas de resumen. También ofrece una gran flexibilidad para incluir más información en el futuro.
Proceso de importación : la página de progreso de la importación se creó después de finalizar el diseño de la página de importación. El mayor desafío de diseño aquí fue decidir cómo mostrar la sincronización de importación en curso. Probé diferentes soluciones de ventanas emergentes y superposiciones, pero finalmente me conformé con mostrar el progreso en la barra lateral. De esta manera, los usuarios aún pueden resolver cualquier error y ver el registro histórico de los datos de su cuenta mientras se realiza una importación. Para evitar interrupciones en la importación, los botones 'Sincronizar datos' y 'Volver a Badger' están deshabilitados para que los usuarios no puedan salir de la página.
Con los diseños terminados, pasé a HTML y CSS.
Capítulo 3: HTML/CSS
Este proyecto fue mi primera experiencia con cualquier tipo de codificación. Aunque había intentado aprender HTML y CSS antes, nunca había alcanzado ningún nivel de competencia. ¿Y qué mejor manera de empezar que con una maqueta de diseño propio?
Comprender la lógica de organizar un documento HTML me recordó a organizar el documento de Sketch con símbolos y anulaciones. Sin embargo, las similitudes terminaron ahí. La codificación se sentía como algo muy extraño que constantemente estaba tratando de entender. Como diría mi mentor, " Estás ejercitando músculos muy diferentes en la programación que en el diseño ". Con el producto final en la mano ahora, estoy completamente convencido de que aprender a programar es lo mejor que he aprendido a hacer desde que aprendí a ir al baño.
El primer desafío, después de configurar un documento y comprender los conceptos básicos, fue trabajar con Flexbox. El diseño que había creado involucraba dos columnas una al lado de la otra. La parte derecha estaba destinada a desplazarse mientras que la izquierda permanecía estática. Flexbox parecía una solución limpia para este propósito, suponiendo que pudiera hacerlo funcionar.
La implementación de Flexbox consistió en muchas pruebas y errores y copias ciegas del código mientras navegaba por varios sitios web, leía tutoriales e inspeccionaba el código. Con la guía de mi mentor a lo largo de todo este proceso, finalmente logramos que funcionara. Nunca olvidaré el momento en que finalmente entendí que al usar flex-direction: column obtendría todos los elementos en una sola columna, y flex-direction: row ayudó a colocarlos en una sola fila.
Tiene mucho sentido ahora, aunque mi comprensión inicial fue exactamente lo contrario (pensé flex-direction: column pondría elementos en columnas uno al lado del otro). Sorprendentemente, ni siquiera me di cuenta de esto hasta después de que el código estaba funcionando. Estaba revisando mi código y me di cuenta de que no lo entendía en absoluto. ¿Qué me avisó? En mi CSS, había codificado flex-direction: row en la clase que nombré column . Este escenario fue bastante indicativo de cómo fue el resto de mi primera experiencia de codificación. Mi modelo mental rara vez se alineaba con la lógica del código, y a menudo chocaban y tomaban caminos separados. Cuando esto sucedió, tuve que regresar, encontrar mis conceptos erróneos y corregir el código.
Después de configurar Flexbox, necesitaba descubrir cómo hacer que la columna izquierda permaneciera fija mientras la parte derecha se desplazaba. Resulta que esto no se pudo lograr con una sola línea de código como esperaba. Pero trabajar en esto me ayudó a comprender la relación padre-hijo que me ayudó inmensamente con el resto del proceso.
Codificar la línea de tiempo vertical y el dial también fue un proceso. La línea de tiempo fue más simple de lo que había anticipado originalmente. Pude crear un rectángulo delgado, configurarle una sombra interna y un relleno degradado, y asignarlo al ancho de cada registro de actividad.
El dial era complicado. Intenté implementarlo con CSS puro con muy poco éxito. Hubo algunas veces en las que consideré cambiar el diseño por algo más simple (como una barra de progreso), pero estoy muy contento de haberlo seguido.
Una dificultad importante fue lograr que el dial de progreso exterior se superpusiera con el círculo de fondo a lo largo del borde. Aquí fue donde cambié un poco el diseño: en lugar de cortar la parte descargada del dial de progreso, se superpone por todas partes. Fue un compromiso entre mi diseño y el código que inicialmente no estaba dispuesto a hacer. Sin embargo, resultó que estaba satisfecho con el resultado final y una vez que me di cuenta de esto, estaba feliz de hacer ese compromiso. El dial final se implementó a través de JavaScript.
Hubo un momento en mi proceso de codificación en el que lancé cada línea de código que había escrito en cada clase para intentar que funcionara. Para compensar esta falta de retrospectiva, tuve que pasar bastante tiempo revisando e inspeccionando todos los elementos para eliminar el código inútil . Me sentí como un casero echando a patadas a los inquilinos que no pagaban el alquiler. Definitivamente fue una lección aprendida en mantener un nivel de limpieza y ser juicioso y considerado con el código.
La mayor parte de la experiencia se sintió como un recorrido a ciegas y un aprendizaje retrospectivo. Sin embargo, nada fue más satisfactorio que ver el producto terminado. Pasar por el proceso me hizo interactuar con mi trabajo de una manera que nunca antes había hecho y me dio una idea de cómo se implementa el diseño. En todas mis expectativas para la pasantía, nunca anticipé poder codificar y crear uno de mis propios diseños. Incluso después de que me dijeron que podría hacerlo en mi primer día, no lo creí hasta después de ver esta página completa.
Capítulo 4: Trabajar con tejones bebés
Como parte del proceso de integración de los usuarios de Badger con sus cuentas de CRM, necesitábamos que nuestros usuarios iniciaran sesión en su CRM, lo que nos obligaba a redirigirlos fuera de Badger al sitio web nativo de CRM. Para evitar un cambio repentino y molesto de un sitio web a otro, necesitaba diseñar páginas de carga intermedia.
Empecé con su página de redirección estática común y corriente. Eran simples y definitivamente cumplían su propósito, pero no estábamos muy contentos con ellos.
El desafío era crear algo simple e interesante que informara al usuario que abandonaba nuestro sitio web en solo unos segundos, era visible. El diseño tendría que presentarse, explicar por qué estaba allí y marcharse antes de que nadie se cansara de mirarlo. Era esencialmente un ejercicio de citas rápidas. Con eso en mente, decidí probar animaciones, específicamente la de un pequeño tejón descarado, inspirada en el logotipo existente.
Usando el logotipo del tejón como punto de referencia inicial, creé diferentes personajes de tejón en Adobe Illustrator. El logo original se sentía demasiado severo para una animación de carga, así que opté por algo un poco más lindo. Mantuve el cofre rojo y los rasgos faciales del logotipo original por consistencia y trabajé para crear un cuerpo y una cabeza alrededor de estos elementos. La cabeza y las rayas tardaron un tiempo en masajearse en formas con las que estaba feliz. El cuerpo tomó la forma un poco más fácil, pero tomó un poco más de tiempo encontrar la proporción adecuada entre el tamaño de la cabeza y el cuerpo. Una vez que clavé eso, estaba listo para pasar a la animación.
Mi primer instinto fue intentar una animación stop-motion. Supuse que iba a ser genial, a lo Wallace y Gromit. Pero después del primer intento y luego del segundo, y todos los siguientes, quedó claro que ver ese programa cuando era niño no me había equipado completamente con las habilidades necesarias para hacer una animación stop-motion.
Simplemente no pude lograr la suavidad que quería, y había pequeñas inconsistencias que parecían demasiado discordantes para una animación de carga muy corta. La animación generalmente se ejecuta a 23 cuadros por segundo, y mi animación de tejón solo tenía alrededor de 15 cuadros por segundo. Consideré agregar más fotogramas, pero por sugerencia de mi mentor, decidí probar la animación de personajes.
Esta fue la primera vez que animé algo que tuviera más de 5 partes móviles y definitivamente hubo una curva de aprendizaje para comprender cómo animar un personaje bidimensional de una manera visualmente satisfactoria. Necesitaba animar los elementos individuales para que se movieran por sí mismos independientemente del todo para que el movimiento fuera creíble. Mientras trabajaba en la animación, las capas que importé se volvieron cada vez más granulares. La cabeza pasó de ser una capa a cinco a medida que aprendí el comportamiento del programa y cómo hacer que el tejón se moviera.
Anclé cada miembro del cuerpo y coloqué cada parte del cuerpo como un niño en la capa principal del cuerpo. Establecí los puntos de anclaje en consecuencia en la parte superior de los muslos y los hombros para asegurarme de que se movieran correctamente y luego, usando rotaciones y relajación, simulé el movimiento de las partes del cuerpo. La cabeza era un poco complicada y requería un movimiento vertical independiente del cuerpo. Para hacer que el salto pareciera más realista, quería que la cabeza colgara en el espacio un poco antes de ser empujada hacia arriba por el resto del cuerpo y que bajara un poco después del resto de él. También ajusté el ángulo que traté de hacer que pareciera como si estuviera guiando con su nariz, apuntando hacia arriba durante el salto y directo mientras corría.
La animación que aparece en la página que redirige al usuario de vuelta a Badger muestra al bebé de Badger corriendo de regreso a Badger con una mochila llena de información del CRM.
Y finalmente: el tejón confundido. Esto se hizo para la última página que necesitaba crear: una página de error que notifica al usuario sobre complicaciones inesperadas en el proceso de integración. ¿Y qué mejor manera de hacerlo que un tejón compasivo y confundido?
La parte complicada aquí fue combinar el perfil lateral del tejón de dibujos animados existente y el logotipo para crear una forma de cabeza mirando hacia el frente. Antes de comenzar este proyecto, nunca había visto un tejón vivo de verdad. No hace falta decir que Badger se abrió camino en mis búsquedas de imágenes de Google este mes. Me sorprendió ver lo plana que es la cabeza de un tejón. En mis primeros diseños, traté de imitar esto pero no estaba satisfecho con el resultado. Trabajé con la forma un poco más, ajustando la ubicación de la nariz, las rayas y las orejas para lograr el resultado final:
Este proceso de animación me ha obligado a llevar mis conocimientos previos a un nivel superior. Necesitaba esforzarme más allá de lo que sabía en lugar de limitarme a lo que pensaba que podía hacer. Originalmente comencé con la animación stop-motion porque no confiaba en mí mismo para hacer animación de personajes. Al darme la oportunidad de probar algo nuevo y diferente, pude lograr algo que superó mis propias expectativas.
Conclusión
Los tres meses que pasé en mi pasantía fueron increíblemente gratificantes. Cada día se trataba de aprender y probar algo nuevo. Hubo desafíos en todo lo que hice, incluso con tareas con las que estaba más familiarizado, como el diseño. Cada vez que creaba algo, estaba muy inseguro y preocupado por cómo sería recibido. Había muchas dudas sobre uno mismo y muchas ideas descartadas.
Por esa razón, fue increíble ser parte de un equipo y tener un mentor que me guiara en la dirección correcta. Que me dijeran que intentara otra cosa a menudo era el único estímulo que necesitaba para probar otra cosa y lograr algo más grande y mejor. Me gusta imaginarme como un roedor en un juego de golpear al topo, siendo golpeado en la cabeza una y otra vez pero siempre apareciendo una y otra vez. Ahora que las luchas y los desafíos han llegado a su fin, solo quiero hacerlo todo de nuevo.
Aprecio lo que he aprendido y cómo me empujaron a ir más allá de lo que pensé que podía hacer. Es una locura ver lo lejos que he llegado en unos pocos meses. Mi comprensión de ser un diseñador de UX ha crecido enormemente, desde descubrir las características hasta elaborar el diseño y luego escribir el código front-end para implementarlo. Esta pasantía me ha enseñado cuánto más tengo que aprender y me ha motivado a seguir trabajando. He llegado a comprender que lo que puedo hacer nunca debe estar limitado por lo que sé hacer.
