Compressflow

Primeros pasos:
Diseñando componentes y estableciendo la identidad visual del producto

El primer paso para crear la interfaz de Compressflow consistió en revisar la oferta previa de productos de la marca de Webflow. Durante este paso se pudo determinar qué expresión visual debía incluir el producto y cómo debía interactuar este con el universo de Webflow, para preservar la consistencia entre Compressflow y las demás herramientas que proporciona Webflow a sus usuarios.

Una vez hecho esto, se pudieron determinar un conjunto de componentes necesarios para crear la interfaz que sirvieron como esqueleto para el primer prototipo de Compressflow. En esta ocasión, fueron de vital importancia los casos de uso planteados en el brief del proyecto, puesto que estos disponían de los requisitos con los que debía cumplir la interfaz. Buenos ejemplos de ello eran la necesidad de que la herramienta fuera responsive, que se pudieran cargar archivos JPEG y PNG, que existiera la posibilidad de subir diversos archivos al mismo tiempo, así como determinar la calidad y el tamaño de los archivos de salida una vez hubieran sido convertidos.

Milestone inicial:
Creando un prototipo

Una vez definidos la identidad gráfica, la guía de estilo y el kit de componentes de la interfaz, fue necesario crear un prototipo que permitiera a los usuarios interactuar con la plataforma de manera que se pudieran llevar a cabo las acciones planteadas en los casos de uso incluidos en el brief.

Para ello, fue necesario diseñar un número de pantallas tanto para dispositivos móviles como para ordenadores, de manera que la experiencia fuera responsive y se adaptara a las expectativas de los usuarios, sea cual sea el dispositivo que utilizaran. Estos diseños contaron con su propio sistema de organización y etiquetado, de manera que el acceso a la información por parte de cualquier diseñador que pudiera formar parte del proyecto fuera lo más fácil y accesible posible.

Una vez creadas las pantallas necesarias para la interacción, llegó el momento de crear prototipos animados con los que simular la interacción que los usuarios iban a experimentar al interactuar con Compressflow. Para ello, se utilizaron las herramientas puestas a disposición por Figma. A continuación se incopora un link al prototipo inicial, fundamental para terminar con la primera etapa del diseño de la plataforma.

Siguientes pasos:
Evaluando la usabilidad

Tras haber definido el prototipo que reflejaba los dos escenarios de uso de la herramienta de compresión de imágenes de Webflow se decidió llevar a cabo un proceso de investigación y evaluación de la usabilidad de los prototipos con el objetivo de comprender más detalles acerca de la plataforma de la que se disponía, para posteriormente proponer ciertos cambios con los que mejorar la interfaz y la experiencia de los usuarios al utilizara. Para ello, se estimó oportuno llevar a cabo dos métodos de testeo diferentes.

Etapa 1: Tests de ususario

El primer método utilizado para evaluar la usabilidad de la interfaz fue llevar a cabo dos tests de usuario con los que evaluar tanto las funcionalidades prototipadas como los aspectos visuales y jerárquicos de la plataforma. Para ello, se trabajó en un test de usuario que pidiera a los participantes que realizaran dos tareas concretas utilizando la interfaz, de manera que se pudieran detectar las dificultades que experimentaran, así como los errores en el diseño de la plataforma.

Etapa 2: Análisis heurístico

Para redondear la investigación, se propuso realizar un análisis heurístico del prototipo con el fin de investigar de una manera más académica los posibles problemas en la interfaz sin la necesidad de implicar usuarios. En este caso, el análisis se llevó a cabo haciendo una referencia cruzada entre el diseño de la plataforma y los principios heurísticos de Jakob Nielsen.

Gracias a este análisis, se pudieron identificar diversos errores y problemas con los que los potenciales usuarios se podrían haber encontrado a la hora de utilizar el prototipo, de manera que posteriormente se pudieran modificar cambiando los diseños para que estos errores no llegaran a ver la luz del día una vez llegada la fase de implementación del prototipo.