Typin — Proyecto final de Ironhack
En este artículo os guiaré sobre el proceso de mi proyecto final del Bootcamp de UX/UI de Ironhack, proceso que realicé durante 9 intensos días. Para este último proyecto quería centrarme en un tema que me gusta mucho, que es la tipografía, más concretamente en cómo puedo ayudar a los diseñadores a escoger la fuente más adecuada para su proyecto.
Primero debía conocer bien las necesidades de mi usuario para poder entender el problema al que me enfrentaba, artículos como este me guiaron en la dirección a seguir y a saber qué preguntas debía hacerme.
- ¿Quién es mi usuario potencial concretamente?
- ¿Cuál es el proceso de los diseñadores a la hora de buscar una fuente?
- ¿Cuáles son los problemas con los que se encuentran los diseñadores al buscar una fuente?
Investigación
Para empezar lancé encuestas, y aquí vi que las respuestas estaban muy polarizadas. Recibía respuestas de gente con altos conocimientos sobre tipografía y de gente con conocimientos básicos, lo cual condicionaba las respuestas posteriores.
Por ejemplo, cuanto mayor fuera el conocimiento sobre tipografía del usuario, más importancia creía que tenía escoger una buena fuente sobre un proyecto, y más tiempo le dedicaba a escoger una adecuada.
El dato más relevante sin embargo, llego cuando pregunté si consideraban que seleccionaban una fuente adecuada para sus proyectos.
El 16% de los encuestados no quedaba satisfecho con su elección, o creía no tener los conocimientos suficientes para discernir si estaba bien o mal, pero al analizarla con la pregunta sobre sus conocimientos, vemos que este porcentaje supone aproximadamente el 70% de los usuarios con conocimientos básicos. Mientras que el 100% de los encuestados con conocimientos avanzados respondieron que quedaban satisfechos con su elección, aunque el 45% de ellos consideran que podrían hacerlo mejor con más tiempo.
Además de esto, concluí que los factores que más influyen a la hora de escoger una fuente son:
- La finalidad del proyecto
- La legibilidad
- Una amplia familia de fuentes
Después realicé una serie de entrevistas para contrastar esta información, comprender a fondo el proceso de búsqueda, y buscar respuesta para otra pregunta clave que apareció. ¿Qué es lo que frustra a los diseñadores con experiencia a la hora de buscar una fuente?
Tras hablar con varios estudios y diseñadores freelance, había un elemento en el que todos coincidían, que se puede resumir perfectamente con una frase que me dijo uno de ellos.
“Todo lo que me ahorra tiempo lo uso.”
Y es que el gran problema que tienen los diseñadores de estudios o freelance, es el tiempo. De aquí nacen los dos User Persona sobre los que se basará el proyecto, desde ahora los diferenciaremos como Diseñadores Junior y Senior.
Definición
Como acabo de comentar, tenía dos User Personas, el diseñador junior, cuyas necesidades eran la ayuda para escoger la fuente adecuada, o una certeza de que la elección que estaba tomando era la correcta, mientras que por el otro lado, el diseñador senior, necesitaba agilizar el proceso para perder el mínimo tiempo posible.
Con todos los datos recogidos de las encuestas y entrevistas, era la hora de juntarlo y ver qué podía sacar. Para esto fueron clave el Lean UX Canvas y el User Journey, donde pude detectar oportunidades de diseño y aterrizar un poco toda la información que tenía en la cabeza.
De estos concluí la importancia que iban a tener los filtros en la plataforma, ya que son la forma más rápida y efectiva de llegar a lo que buscan, de modo que tenía que crear un sistema de búsqueda específico para las necesidades de cada usuario.
Además de esto, a partir del research vi que todos los diseñadores pasan por un proceso de “análisis de competencia”, donde ven que fuentes usa la competencia, o proyectos similares del sector para coger referencias. Para esto entraban en Behance, Typewolf, o simplemente buscaban en Google, entre otras.
Ideación
De esto último nace la idea de ofrecer un método de inspiración al usuario en forma de proyectos relacionados, donde poder comparar lo que hace la competencia, o ver qué usos le da la comunidad a ciertas fuentes desde una misma página.
Esta inspiración o colecciones serán muy importantes a partir de ahora, porque esto junto a las fuentes, de forma combinada será lo que ayude al usuario a encontrar lo que busca.
Combinando las colecciones y las fuentes conseguí también un modo de asesoramiento para el usuario que quiere recomendaciones para su proyecto. A través de cuatro preguntas donde el usuario selecciona lo que busca, le guiaremos hasta mostrarle una serie de fuentes y proyectos en base a sus necesidades.
Si quieres conocer más a fondo la Arquitectura de la Información, el asesoramiento y el Sitemap visita este otro post donde lo explico detalladamente.
Al tener la estructura preparada solo me faltaba comprobar que el usuario comprendiera lo que estaba viendo, por lo que tras unos Card Sorting abiertos y arreglar algunos problemas de taxonomía, era el momento de empezar a prototipar.
Prototipado
Con la estructura de la web clara era el momento de pasar a dibujar unos primeros bocetos para testear la idea.
Tras varios testeos de una versión inicial, realicé una serie de cambios, siendo la más importante la Home, la cual eliminé , y la reemplacé por el portal de fuentes, ya que los usuarios no comprendían bien el objetivo de este. De este modo los usuarios llegan directamente a ver las fuentes, dando prioridad a la falta de tiempo del senior sobre la falta de conocimiento del junior.
Después era el momento de pasar a un Mid Fidelity y comprobar que las funcionalidades y la estructura de la web funcionaban como había pensado, y por suerte el resultado fue positivo.
Moodboard
Para definir la parte visual empecé por crear un moodboard sobre el que basar mis siguientes decisiones. Este lo basé en el estilo Suizo, también conocido como el estilo internacional, una corriente de diseño que coge fuerza alrededor de los años 50.
The Swiss Style emphasised simplicity, communication and objectivity. Its hallmarks are the mathematical grid, sans serif typefaces arranged in a flush left and ragged right formation (asymmetry), black and white photography, and the elimination of ornament.
Este estilo gráfico coincidía perfectamente con mis atributos de marca ya que compartimos un mismo objetivo, comunicar simple y eficazmente. Para esto se basa en tres principios clave que son:
- El uso de la retícula modular
- Tipografías Sans Serif y disposiciones asimétricas de los elementos
- Uso de la fotografía en lugar de ilustraciones
Este último punto lo descarté, ya que el producto de Typin son las propias fuentes, destacando y dando más importancia así a estas.
High Fidelity
Una vez con el camino a seguir definido, era el momento de de dar vida al Mid Fidelity. Para empezar, la pestaña descubre nos ayuda con el asesoramiento tipográfico y de proyectos, en base a dos preguntas que filtraran las fuentes y otras dos para los proyectos, juntándolos obtenemos unas recomendaciones acordes a las necesidades del usuario.
En cuanto a la pestaña Inspiración, vemos una serie de proyectos realizados con las fuentes de la plataforma, estas se pueden filtrar por tipo de proyecto en base al formato o al sector (etiquetas), o en base a las fuentes que utilizan.
En la pestaña fuentes, se permite visualizar las fuentes en base a una serie de categorías como tamaño, tipo de letra o color de fondo, y para hacer una búsqueda más especifica dispone de los filtros de siempre como el tipo de fuente, y otras como recomendaciones según su uso o plataforma en la que se vaya a usar, también otras más específicas como la altura x, el peso o el contraste.
Conclusiones
Diseñar Typin ha sido una experiencia tanto frustrante como gratificante, por ejemplo ver cómo lo diseñado cae en los testeos con usuarios constantemente cuando los plazos de entrega están a la vuelta de la esquina, o ver que las ideas no encajan como habías pensado eran inconvenientes que iban surgiendo a medida que el proyecto avanzaba.
Aunque a la vez gratificante porque me llevo una experiencia en la que he tenido que trabajar bajo presión, lo que al final me ayudó a definir mejor un MVP y a trabajar sobre este.
Por último como Next steps, me gustaría investigar más sobre el proceso de matching de fuentes, punto muy importante para los diseñadores senior a la hora de escoger una fuente, y así poder ofrecer una herramienta donde puedan hacer sus pruebas sin limitaciones.
¡Gracias!
¡Muchas gracias a todos los que habéis llegado hasta aquí! ¡Y sobretodo gracias a todos los que me habéis ayudado con las entrevistas, rellenando encuestas, con los tests y en el día a día!
