REFLEXIÓN FINAL MÓDULO 5 CURSO UX / UI

Al inicio de este módulo, junto a nuestro grupo, decidimos continuar trabajando con el restaurante “Ají amarillo”, por lo que fue la continuación de lo que habíamos comenzado el módulo 4. Eso nos hizo partir con un poquito de ventaja, ya que si bien volvimos a aplicar muchas de las herramientas que ya habíamos aplicado el módulo anterior, con la diferencia de que ahora había que hacerlo con clientes reales, al menos haberlo realizado antes, nos permitió tener una base sólida sobre la que podíamos partir e impulsar nuestras ideas (algunas inclusive que surgieron en el módulo anterior).
Básicamente aprovechamos la oportunidad de ver materializadas todas aquellas proyecciones que vislumbrábamos en el módulo 4.

Ya sabíamos que ni el sitio web, ni su versión mobile de Ají Amarillo, respondía a los criterios de “usabilidad”, ni menos estaba centrado en el usuario. Más que “rediseño”, fue casi como partir de cero. Si bien rescatamos los conceptos de la cultura peruana con el estilo chicha y la definición de nuestra paleta de colores, voz y tono, y la elección de las tipografías. Muy poco fue lo que rescatamos del diseño actual del sitio web y su versión mobile.

Desde el rebranding de su imagen corporativa, de la cual únicamente mantuvimos el ícono del limón colores. Hasta desarrollar una plataforma efectivamente navegable, mediante la cual podías crear un perfil de usuario, navegar las cartas de sour y de platos, filtrar por tipo de plato, hasta poder comprar a través de este sitio versión mobile. Hasta repetir tus pedidos, hacer su seguimiento, agregar nuevas direcciones, inclusive, calificar el pedido, entre otras cosas. Básicamente todas fueron propuestas nuevas, ya que ninguna de estas interacciones se daban en el sitio web actual. Y todo, dando una imagen de seguridad, para que el usuario se pudiera sentir confiado a la hora de realizar un pedido.

Comenzamos por crear una biblioteca de componenetes, para después pasar a desarrollar wireframes de baja fidelidad, definiendo estructura mediante grillas, para dar uniformidad a como se presentaba la información.
Luego comenzamos agregando colores e imágenes, definiendo wireframes de alta fidelidad, para finalmente generar interacciones entre nuestras pantallas, ir evaluando nosotros mismos mientras íbamos avanzando, qué iba quedando mejor y más claro. Proponiendo nuevas pantallas de navegación. Cuando ya estábamos conformes, testeamos nuestro prototipo con usuarios, intentamos de que los mismos que habían participado del proceso inicial, pudieran ahora probar nuestro prototipo, ya que entendían fácilmente el contexto, además de ya haber conocido el sitio web actual de Ají Amarillo.

Luego del testeo, rescatamos sus comentarios para realizar las mejoras, y así tener como resultado un prototipo realista, en donde se pudieran probar la mayoría de las funciones que nuestra propuesta ofrece, rescatando los comentarios de los usuarios, adaptando nuestro prototipo a sus requerimientos.

Siento que finalmente el resultado obtenido, refleja que centrarse en el usuario, ES el mejor camino para diseñar.

Dentro de mis reflexiones iniciales, recuerdo haber mencionado en mas de una ocasión, mi preocupación profesionale de “producir sin pensar”, sin sentarse un momento a reflexionar. ¿Es esta la mejor alternativa que tengo para resolver el problema?

El día a día de nuestros trabajos “full time”, muchas veces nos convertimos en eso, en máquinas productoras, muchas veces nos toca complacer el gusto personal de algún cliente, o de algún compañero de trabajo, o de nuestros jefes. Más que reflexionar, entender y ponernos en los zapatos de nuestro usuario. Y para cualquier servicio. Creo que el UX es aplicable en TODO ámbito, más allá de los productos digitales. Toda institución que presta servicios, del tipo que sea, DEBE centrarse en su usuario. Así nuestras experiencias como consumidores de servicios, serían referencias replicables para una buena experiencia de usuario.

Elijo la siguiente imagen como síntesis de todo el trabajo de este módulo:

Miles de interacciones, y cada de una de ellas, representa una oportunidad de resolver las necesidades de nuestros usuarios.

Clase 19, módulo 5: Avance en clases proyecto final.

La clase de hoy comenzó nuevamente directo en nuestras salas para avanzar en el proyecto final. En esta ocasión ya empezamos a “hilar fino” y a ver detalles de cada pantalla, que todo estuviera alineado, que los textos estuvieran correctos, etc.

También nos centramos en la animación de nuestro prototipo, en mi caso particular, para desarrollar el seguimiento del pedido, animé el modal de seguimiento del pedido como “slider” ya que solo se podía mostrar el avance con el paso del tiempo. Como este es un prototipo, obviamente no íbamos a hacerlo con tiempos reales, así que la transición solo dura algunos segundos.

Por otro lado, también tuvimos un momento de “clases con Paz”, quien nos enseñó a crear variantes para los checkboxs y de esa forma, animarlos para que fuesen interactivos y funcionales en nuestro prototipo.

Como conclusión, creo que hemos avanzado súper bien, quizás un poco desordenado por le inevitable “improvisación” de “aprender haciendo”, pero nos hemos complementado bien como grupo, nos vamos enseñando las cosas que nos toca ir aprendiendo en el camino, como el día de hoy que, con mucha paciencia, Paz nos enseño a animar los checkboxs y el estado de “variante” de un componente.

ENLACES:

Clase 18, Módulo 5: Trabajo en Clases, Encuesta y requisitos entrega final

La Clase de hoy comenzó directamente en las salas para continuar con el avance de nuestros proyectos. Repasamos las cosas que nos faltaban y empezamos a ajustar detalles dando uniformidad y orden a nuestros wireframes, tanto en la versión desktop como la versión mobile.

Trabajamos en las salas hasta las 8:00, y luego el profesor comenzó a explicarnos lo de la encuesta de usabilidad que deberíamos comenzar a aplicar el sábado, cosa de tener resultados a más tardar el día martes y así dejar miércoles y jueves para aplicar mejoras en nuestros flujos y wireframes y también para preparar nuestras presentaciones de final de módulo.

Para la encuesta nos compartió un formato excel de google docs : CUESTIONARIO DE USABILIDAD-SUS que ya tiene las fórmulas listas para poder tabular los resultados y que podamos sacar conclusiones. Es algo un poco complejo de entender porque hay preguntas a las que se les debe “restar puntaje” o algo así entendí. Posiblemente entenderemos mejor cuando comencemos a aplicarla.

También nos compartió un sitio web que menciona el sistema de escalas de usabilidad, que nos ayudará a entender cómo medir la encuesta.
Por otro lado, nuestros compañero (y presidente) Carlos, nos compartió un video de youtube que también lo explica y que quedará en los enlaces de esta entrada.

Junto a lo anterior nos describió los requisitos de la entrega final:

Finalmente el profesor también nos mostró una herramienta para presentar flujos con las pantallas de nuestros wireframes, el sitio se llama “OVERFLOW.IO”, pero lamentablemente es de pago, Quizás pueda servirnos de referencia para presentar nuestros flujos.

Como conclusión, creo que ya estamos en el punto de afinar detalles, me preocupa un poco que haya algún flujo que no nos funcione, porque el tiempo es acotado para resolverlo, ya que debemos desarrollar el cuestionario durante este fin de semana. Ojalá que mañana ya logremos el 100% para poder ajustarnos a los tiempos que nos quedan.

ENLACES:

https://overflow.io/examples/

Clase 17, Módulo 5: Trabajo en clases y presentaciones estado de avance.

La clase de hoy comenzó directamente en las salas, trabajando para nuestro proyecto final. Logré dejar el card del seguimiento del pedido como esperaba que quedara. Al principio tuve problemas porque cambié el header por el componente, porque como antes estaba enfocada en que el mapa fuera navegable, solo había dejado una barrita fija en la parte superior de la pantalla, entonces cuando vi el mockup del prototipo, me percaté de que el menú no quedaba fijo, al igual que el card de seguimiento, que la idea era que se mantuviera fijo a menos de que el usuario decidiera cerrarlo haciendo tap en la X.

Luego vale animó el menú hamburguesa, pero tuvo un problema, animándolo en la página “sistema de diseño”, funcionó perfecto, pero si volvíamos a la página mobile, el flujo no funcionaba en el prototipo, así que sospechamos que es porque no todo (sistema de diseño, y versión mobile) se encuentra en la misma página. Así que será nuestro nuevo desafío averiguarlo.

Después del break, pasamos a las presentaciones por grupo. Los primeros en presentar, fueron los chicos de Ucrusos.

Se aprecia una notable mejora, es mucho más atractivo y ordenado. Sin duda mejorará la experiencia de usario.

Luego Carlos, eligió a Javier, así que nos tocó presentar a nosotros. Finalmente presentó Paz, mostró nuestros Wireframes con UI de alta fidelidad, además de mostrar lo que habíamos logrado animar hasta ahora. Aún nos queda bastante por hacer, lo importante es que lo que llevamos funciona.

Luego le tocó presentar al grupo del almacén cervecero. Hoy presentaron Benja y Javiera. Hay una notable mejora en comparación con el sitio original, destaca su paleta de colores, también mejoraron la distribución de los elementos y párrafos, se aprecia un muy buen resultado.

Por último, presentaron los chicos que están trabajando con buscalibre. Ellos llevan un estado de avance notable, la navegación y animación de sus flujos está lista, todo se ve muchísimo más unificado, que era justamente el problema que ellos identificaron en el sitio actual de buscalibre.

Como conclusión, a la mayoría nos queda trabajo por hacer, podríamos quizás llevar el avance de los chicos de buscalibre, espero que estos próximos días podamos ir avanzando mejor y lograr tener nuestros flujos listos el fin entre viernes y sábado para alcanzar a aplicar la encuesta que veremos mañana.

ENLACES:

Clase 16, Módulo 5: Avance en clases, alta fidelidad para wireframes.

La clase de hoy el profesor comenzó mostrándonos dos sitios web que nos podían servir para el diseño de alta fidelidad de nuestros wireframes.
Uno era un sitio web de descarga de gifs animados para utilizar en figma, lo que podría darle más dinamismo a nuestros wireframes. La mayoría se trataba de ilustraciones animadas, a las cuales inclusive se les podía manipular la paleta de colores y así darle el estilo gráfico de nuestra marca.

Luego de mostrarnos el sitio, su contenido y funciones, hizo la prueba en Figma para que pudiéramos aprender cómo aplicarlo en el caso de que fuera útil para nuestro trabajo.

Luego, nos mostró otro sitio web, que nos ayuda a crear variantes de nuestros componentes. Una herramienta súper útil, considerando que más de algún componente se repite pero no necesariamente en la misma versión.

Luego de estos tips, pasamos a las salas a avanzar en nuestros proyectos. Por nuestra parte, ya empezamos a darle estilos de alta fidelidad a nuestro wireframe, aplicamos la paleta de colores y agregamos imágenes, (algunas sacadas por mi en mi trabajo, el menos les dimos una segunda utilidad!).

Como conclusión, alegremente se notan los avances de varias semanas de trabajo, sin duda todo el research previo ya está viendo sus primeros frutos, se nota una mejora significativa en comparación con el sitio original, si bien por mi parte quizás me gustaría haber avanzado más, creo que el aprendizaje no siempre es tan rápido como quisiéramos, pero lo importante es continuar avanzando.

ENLACES:

Clase 15, módulo 5: Flujo carrusel en figma y trabajo en clases

La clase de hoy comenzó el profesor comenzó recordándonos algo que nos había mencionado unas clases atrás a cerca de la versión de Figma para estudiantes. Incribirse en el programa educativo de Figma, nos permitirá acceder a beneficios de Figma de pago de manera gratuita desde que nos inscribimos como estudiante hasta que se cumplan dos años de esa inscripción.

Inscribirse en este programa es una excelente alternativa para continuar con nuestra práctica UI en Figma y así ir generando contenido para nuestros portafolios.

Luego de recordarnos este programa y de describirnos la serie de beneficios que obtenemos inscribiéndonos en el, el profesor continuó con el contenido de la clase, en esta ocasión comenzamos a ver “Prototype” de figma, particularmente, cómo animar un Flujo carrusel.

Luego del contenido, pasamos a trabajar en las salas. Esta vez continuamos con la versión mobile, discutimos algunos elementos, intentamos simplificar un poco nuestros flujos y ya comenzamos a pensar la versión de alta fidelidad, pero antes debíamos afinar detalles en el prototipo de baja fidelidad.

Por mi parte, continué con la versión “Seguimiento del pedido” . Busqué algunas referencias que podrían servir para el estilo gráfico que quisimos darle a este “Nuevo Ají Amarillo”, mas limpio y moderno, con colores propios de la cultura chicha original del Perú.

Como conclusión, creo que vamos avanzando a paso firme, fijándonos en los detalles, ya estamos listos para comenzar a pasar el nuevo estilo gráfico a nuestros componentes y acercarnos ya al prototipo de alta fidelidad.

ENLACES:

https://dribbble.com/shots/5310929-Track-Order-Food-Shipment

Clase 14, módulo 5: trabajo en clases y presentaciones estado de avance.

La clase de hoy comenzó trabajando directamente en las salas junto a nuestros grupos, continuamos avanzando cada uno en su tarea, discutimos algunas pantallas y tratamos de completar las que ya llevamos del flujo.

Wireframe mobile

Para el card del mapa, decidimos agregar los íconos de google maps y waze, cosa de que la navegación se haga fuera de nuestra app y se vincule a alguna de las dos apps de navegación que la mayoría tiene instalada ya en el celular. Usamos a la app awto de referencia.

Luego del break, continuamos avanzando un ratito más en las salas y tipo 11:40 comenzaron las presentaciones.

El primer grupo en presentar fue el grupo 1, que está trabajando con busca libre, en general iban bien avanzados y se veía muchísimo mejor que la versión original.

Luego fue el turno del grupo 3, que están trabajando con el almacén cervecero, también tenían bastante avance, con wireframes de alta fidelidad, una paleta de colores muy bonita y acorde a los productos que venden. Solamente les faltaba ajustar un poco los espacios y “aire” en los textos.

Después del grupo 3, presentamos nosotros. Esta vez presentó Pato e hizo un recorrido general de todo lo que hemos hecho hasta ahora.

Finalmente, presentó el grupo 2 quienes están trabajando con la plataforma UCursos, hicieron un tremendo trabajo de iconografía, que es de lo que más tiene el sitio web. También se veían bien avanzados y con una estética muchísimo más consistente y clara que la original.

En conclusión, todos los grupos parecen tener un muy buen estado de avances y notables mejoras a los sitios originales. Aún queda bastante trabajo por desarrollar pero ya vamos tomando un ritmo más ágil y se puede esperar buenos resultados de todos los trabajos.

ENLACES:

https://www.flaticon.com/search/2?word=google+maps

https://figmaelements.com/tracking-map-app/

Clase 13, módulo 5: Figma Education plan y trabajo en clases

Hoy el profesor nos mostró un “plan educacional de Figma” que plantea lo siguiente: “Diseñado para aulas remotas y presenciales, Figma ayuda a los educadores a dedicar más tiempo a la enseñanza y menos a la lucha contra la tecnología. Cree, presente y distribuya cursos, ejercicios y actividades a través de Figma. Reúna a sus alumnos en un aula virtual para que se junten, repitan y critiquen.”

Nos contó que antes de comenzar la clase se inscribió y al parecer prueba algunas herramientas de Figma, y que nosotros también podríamos hacerlo.

Luego, nos mostró un pluguin que nos permite presentar nuestros proyectos de manera más atractiva, en este caso en un mockup 3D. El plugin se llamaba “Clay Mockups 3D” y generaba una vista 3D de cómo se vería nuestro sitio web en un celular, o bien, en su versión responsiva.

Luego de esto pasamos a trabajar en las salas.

Finalmente, siguiendo el tutorial de las salas logré conseguir lo que buscaba, al menos que el mapa pudiera ser navegable y que el ícono de ubicación navegara junto al mapa y no se quedara en una posición fija mientras al navegar en el mapa, éste se moviera atrás de ícono.

Le pregunté al grupo qué les parecía que el mapa fuera oscuro, y lo prefirieron en “colores mapa”, osea como los mapas corrientes de colores claros. Así que me puse a ver el tutorial nuevamente, para volver a seguir los pasos que eran un montón y no logré retener todo ayer después de la clase, y así hacer nuevamente el mapa pero en su versión “de día”. Además de agregarle un flow al hacer tap sobre el ícono. Un card emergente con la foto de la fachada y la dirección con el número exacto.

Ahora me queda agregarle el header con la botonera hamburguesa, preguntar a mis compañeritos si le agrego el footer, adaptar esta vista a todas las vistas que tengamos con mapa y hacer la versión “seguimiento de tu pedido” para la que Paz me dió una referencia.

En conclusión hoy tb invertí un montón de tiempo en avanzar en algo que parece poco, pero que servirá para más pantallas y para completar nuestros wireframes, pero que sin duda aportará al resultado final. Espero ir mejorando el ritmo de trabajo para poder participar en otro tipo de “pantallas” de nuestro flujo.

ENLACES:

El tutorial indicado:

La referencia de “seguimiento de pedido”
https://www.figma.com/file/UQMwatPDKDNwQiAaeXe7Ml/Sushi-Delivery-Popup-Smart-Animate-(Community)?node-id=6%3A751

https://www.figma.com/education/

Clase 12, módulo 5: Trabajo en Clases

La clase de hoy comenzó trabajando directamente en las salas para continuar avanzando en nuestros proyectos. Como lo estuvimos haciendo el tiempo de trabajo en clases los días anteriores, continuamos dividiendo tareas.

Por mi parte, estuve investigando como integrar un mapa, tanto para definir ubicación del restaurant, como para luego utilizarlos en las pantallas para hacer seguimiento del pedido una vez comprado el producto.

La verdad no fue fácil, ya que los tutoriales que encontré se centraban más en solo integrar el mapa utilizando plugins, pero al intentar navegarlo, el ícono de ubicación del restaurant, no se quedaba en el punto que indicaba la dirección exacta y solo se movía el mapa de fondo, quedando fijo en el espacio el ícono que indicaba la ubicación de Ají Amarillo.

El pluguin “MAPSICLE” me resultó muy fácil de usar, ahora lo complicado era que algunos tutoriales agregaban el mapa a un rectángulo y otros lo hacían directamente al frame, en ambos casos, tenía el mismo problema.

Hice varios intentos y no logré tener éxito, pero al final de la clase encontré un tutorial muchísimo más completo (y muchísimo más extenso también) que al parecer me permitirá realizar lo que quiero.

En conclusión, invertí un montón de rato intentando hacer algo que no me funcionó, a pesar de sentirme algo frustrada por no poder generar un aporte concreto al trabajo en grupo, entiendo que el proceso de aprendizaje ES ensayo y error, hasta que finalmente logramos nuestros objetivos. Espero que el tutorial que encontré al final de la clase, me permita conseguir mi objetivo.

ENLACES:

y este es el tutorial que me queda por ver y al que le tengo fé!!

Clase 11, Módulo 5: Figma y trabajo en clases

La clase de hoy, comenzó con una breve revisión de figma en la que el profesor nos sugirió nuevos sitios web en dónde encontrar herramientas de figma y aprender a utilizarlas de manera fácil, una de ellas fue “A to Z of Figma, Tips & Tricks”:

https://webdesign.tutsplus.com/tutorials/a-to-z-of-figma-tips-tricks–cms-36837

También nos mostró un sitio con 7 trucos para agilizar procesos simples de Figma, como por ejemplo sumar o restar pixeles a las mesas de trabajo, sólo escribiendo +xx o -x en la medida de la mesa de trabajo, osea Figma, suma y resta por ti, tu cerebro puede concentrarse en cosas “más importantes”:

https://marcandrew.me/7-super-handy-figma-tips/

Y Otro sitio muy interesante dónde encontrar tips y trucos de figma que nos mostró el profesor fue “Tips to fasten Figma workflow. Small but awesome tips to work faster in Figma” :

https://awesomefigmatips.com/

La idea es tener apoyo para familiarizarnos más con Figma y encontrar la forma más simple y rápida de realizar tareas para la creación de nuestros wireframes ya sea en versión mobile o desktop.

Por último, revisamos algunas referencias de diseño y componentes:

Luego de revisar estos trucos, tips y referencias, pasamos a las salas a continuar trabajando en nuestra entrega final.
Continuamos avanzando, con Desktop un poco más que con Mobile, pero avanzando al fin y al cabo. También continuamos completando nuestro design system.

Modal login de Nico

En conclusión, esta clase nos sirvió para saber donde encontrar sitios de ayuda en caso de no entender como realizar alguna tarea en figma, como también para hacer de manera mas eficiente nuestro trabajo. Pudimos avanzar, quizás no tan rápido como quisiéramos, ya que en el camino vamos aprendiendo mientras hacemos cosas, por ello puede que no sea tan rápido como quisiéramos, pero posiblemente poco a poco mejoraremos el ritmo.

ENLACES:

https://awesomefigmatips.com/

https://marcandrew.me/7-super-handy-figma-tips/

https://webdesign.tutsplus.com/tutorials/a-to-z-of-figma-tips-tricks–cms-36837