En busca de una solución para las mentes creativas fuera del encasillado del inventariado en Excel.
Teniendo en cuenta los perfiles de user persona creados (basados en nuestros expertos entrevistados), determinadas las necesidades a cubrir y evaluados los programas que nos pueden servir para tomar de referencia, es momento de ponerse a construir las bases de lo que será el prototipo del proyecto de “eenventary”
En primer lugar, hay de determinar ciertos objetivos (alcance, canales de acceso del usuario, recursos, segmentos y sectores a los que nos vamos a dirigir) así como la propuesta de valor, aquello que nos distingue de lo que existe y se ofrece en el mercado.
- una de nuestras propuesta de valor es la agilización de procesos de inventariado, de manera que resulte .
- otra de las propuestas, tiene que ver con la capacidad del producto de permitir personalizar procesos de inventariado(desarrollo de creación, introducción del material, creación de alertas de falta de stock…)
- la tercera propuesta se centra en la parte visual, es decir, que el usuario sea capaz de no identificar como una herramienta de inventariado usual y que pueda ver el producto.
Una vez determinados los objetivos, en paralelo a esta determinación, se ha realizado una primera aproximación a la capa visual, seleccionando:
- una serie de gamas cromáticas de colores primarios o principales , de acento o secundarios, y neutros -que se emplearán en la realización de las pantallas en alta definición del producto. Se elige en este caso una gama cromática centrada en los tonos azules como primarios, colores de acento en tonos naranjas, y una gama amplia de neutros — una serie de grises con un tono azulado.
- una tipografía, en este caso, la tipografía “Lato”, ya que es fácilmente identificable por el usuario en una variedad de dispositivos digitales e idiomas. Su forma y detalles redondeados sans serif le quitan toda formalidad impuesta, sin dejar de ser visualmente clásica y transparente, proporcionada, todo ello propiciando esa sencación de calidez y estructura. En palabras de su creador -Lukasz Dziedzic- “Male and female, serious but friendly. With the feeling of the Summer” -“(una tipografía) femenina y masculina, serie pero amable. Con la sensación del verano”
Desarrollo de la arquitectura de información.
Al tratarse de un producto digital dirigido hacia actividades de inventariado, otro objetivo a conseguir era conseguir que el usuario dispusiera de la manera más accesible y pronta posible, de aquellas herramientas necesarias para la realización de tareas habituales (introducción de materiales, revisión de stock, introducción de procesos creativos…). Para ello, el no cargar de niveles internos a la aplicación, y crear una serie de secciones de acceso visual a los datos y notificaciones más importantes, debía de ser el planteamiento.
El producto se plantea en un momento como un producto para desktop, por lo cual se plantea una landing en la que tengan cabida resúmenes de las notificaciones e información principal de las posibles carpetas o secciones que el usuario haya creado; y dos elementos fijos: un menú lateral en el que aparecieran las secciones principales y menú de ajustes, y un buscador para poder realizar búsquedas por imagen o nombre del producto.
En cuanto a los flujos creados, volviendo a recordar los perfiles creados de user persona, se fijan los siguientes flujos como los de mayor interés:
- acceso al inventario, al stock de materiales, gestión de alertas y realización de pedido.
- introducción de nuevo material al inventariado, y comprobación del inventario actualizado.
Wireframes en Lo-Fi y en High-Fi.
Una vez determinadas al arquitectura de la información y los flujos a desarrollar, es momento de estructurar los elementos que aparecerán en las pantallas del producto digital.
Al tratarse de una webApp responsive para varios dispositivos (en este caso mobile y desktop), se realizan wireframes para las dos versiones, reacondicionando los elementos en distribución y tamaño según las pantallas.
Wireframes en Lo-Fi
En primera instancia, se realizan los wireframes en baja fidelidad, es decir, en escala de grises, sin textos definitivos, todo susceptible de modificación. En estos wireframes aparecen mediante fechas las interacciones de los flujos que hemos seleccionado para desarrollar, así como la cantidad de pantallas que serán necesarias para completar los mismos y la posible distribución de los elementos en ellas.
- En el caso de la versión mobile, se desarrollarán las pantallas base de “dashboard”, “archivos” e “inventario”, junto con las pantallas del flujo dedicado a la subida de un elemento nuevo a inventario/archivo.
- En el caso de la versión desktop, se desarrollarán las pantallas base de “dashboard”, “archivos” e “inventario”, junto con las pantallas del flujo dedicado al control de stock de inventario y la comunicación con proveedores.
Pantallas en alta fidelidad e interacciones de flujos
Una vez planteados los wireframes en baja fidelidad y con una estructura de los elemento más o menos prefijada, pero no libre de cambios, se pasa a desarrollar las pantallas en alta fidelidad, con la gama de colores y tipografía seleccionadas, y las imágenes y textos definitivos — aunque aún no libres de posibles iteraciones cara al producto final.
Las dos versiones presentan la siguiente estructura en cuanto a pantallas bases:
- Una primera pantalla corresponde a “dashboard” donde se encuentran los accesos rápidos y se muestran las notificaciones importantes.
- Una segunda pantalla corresponde a “archivo” donde se encuentran las distintas carpetas creadas por el usuario para clasificar los elementos de su inventario.
- Una tercera pantalla corresponde a “inventario”, que se divide en inventario general y por secciones, apareciendo en ambos los productos con fotografía, nombre de referencia, proveedor y cantidad, junto con la opción de realización de pedido.
Las interacciones correspondientes a los flujos se harían con ventanas modales, que contendrían wizards o guías por pasos para la realización del flujo correctamente.
- Versión mobile, capa visual de alta fidelidad y flujo de subida de un elemento nuevo a inventario/archivo:
En el siguiente vídeo, se observa el flujo de subida de un elemento nuevo a inventario/archivo. Los pasos a seguir por el usuario en este flujo son los siguientes:
- Desde el menú de hamburguesa desplegable, se selecciona la opción de subir archivo.
- Una vez seleccionada, se podrá hacer de dos maneras, bien desde un archivo ya existente en el dispositivo, o bien a través de la API de Google Lens.
- Seleccionando la opción de Google Lens, realizamos la fotografía, y nos saldrá una ventana en la que podremos elegir la carpeta a la que irá el archivo.
- Una vez seleccionada la carpeta de destino, el material se colocará dentro de la carpeta, y podremos comprobarlo tanto desde inventario como desde archivo.
2. Versión desktop, capa visual de alta fidelidad y flujo de control de stock de inventario y la comunicación con proveedores:
En el siguiente vídeo, se observa el flujo de control de stock de inventario y la comunicación con proveedores. Los pasos a seguir por el usuario en este flujo son los siguientes:
- Desde la pantalla de “dashboard”, se accede a las carpetas de archivo y se obervan los resúmenes de las alertas de stock del inventario. Interaccionando con el menú lateral fijo, el usuario puede ir de una pantalla a otra, y acceder a las distintas carpetas/ departamentos/ secciones que se hayan creado.
- Tal y cómo se ha observado en las notificaciones de inventario, hay una serie de alertas stock en una sección concreta, y podemos acceder al inventario de la misma tanto desde archivo como desde inventario.
- Desde la pantalla de inventario, accedemos al stock de la sección concreta que hemos estado observando — aunque también podríamos realizar el pedido desde el general- y realizamos el pedido de los materiales que faltan.
- Al realizar el pedido, saldrán una serie de pantallas modales en las que se pedirá al usuario la confirmación de pedidos de cantidades habituales de los materiales marcados con poco o con stock, y se le informará de la realización del pedido a los proveedores.
Al tratarse de pantallas en alta fidelidad, no de un prototipo, el producto todavía se encuentra sujeto a iteraciones relacionadas con el aspecto tanto visual como con el funcional. Ya que el objetivo es que el usuario del mundo de las bellas artes lo encuentre funcional a la par que agradable a la vista, después de haberlo testado con un número de usuarios, se llega a la conclusión de que es necesaria una iteración final de los wireframes en alta fidelidad presentados, para terminar de cubrir completamente las necesidades del usuario objetivo y que piense en “Eenventary” como un producto necesario en su vida para solucionar sus problemas respecto a el inventariado de material artístico y creativo.
Tras unas semanas de reflexión, me planteé realizar una serie de iteraciones en relación a los flujos desarrollados, ofrecer otras opciones de tablas de inventariado (recordando el público objetivo relacionado con las bellas artes) y también desarrollar el perfil de administrador y sus permisos.
Manteniendo las mencionadas pantallas base (Dashboard, Archivos e Inventario), se añaden una serie de flujos complementarios y se mejoran los wizards de los existentes.
Las iteraciones realizadas en la versión mobile tienen más que ver con la capa visual y con la recolocación de elementos:
En este video se puede ver una panorámica de las pantallas de dashboard, archivos e inventario, y las iteraciones realizadas en elementos de menú lateral de hamburguesa y en dashboard.
En este segundo video, se muestra el flujo de subida de un elemento nuevo a inventario/archivo.
Las iteraciones se realizaron en su mayoría en la versión desktop:
- Iteración en el flujo de control de stock de inventario y comunicación con proveedores.
En este video se puede ver una panorámica de las pantallas de dashboard, archivos e inventario, junto a la realización de pedido a proveedores, donde se ha añadido un paso más al wizard original y se han cambiado algunos elementos de la capa visual.
2. Desarrollo de nuevo flujo: añadir imagen/archivo a inventario. Al igual que en la versión mobile, con este flujo se permite al usuario subir una imagen desde su equipo o un dispositivo vinculado.
Esta acción de añadir imagen/archivo se realizaría desde el menú lateral (botón de “añadir archivo”) y aparecerían una serie de ventanas modales en las que se indican los pasos a seguir para completar satisfactoriamente el flujo.
3. Desarrollo de nuevo flujo: añadir columna de imagen. De esta manera, se ofrece una opción extra de inventariado, al poder añadir a la tabla una celda de imagen.
Esta acción de añadir columna de imagen se realizaría desde el menú lateral (botón de “añadir columna”) y aparecerían una serie de ventanas modales en qlas que se podrá elegir el formato para la celda de imagen , y que indican los pasos a seguir para completar satisfactoriamente el flujo.
4. Desarrollo de pantalla de ajustes. En el caso del perfil creado para la versión desktop -un perfil de administrador- nos permite ver las posibles restricciones y flujos no permitidos para otros usuarios — en este producto, serían los jefes de departamento y los miembros de departamento-.
En la pantalla de ajustes, el usuario de administrador puede realizar las siguientes acciones:
- Crear nuevos perfiles (jefe de departamento y miembro de departamento)
- Conceder permisos extras a los perfiles que seleccione.
- Eliminar perfiles seleccionados.
El producto todavía se encuentra sujeto a iteraciones relacionadas con el aspecto tanto visual como con el funcional, aunque la mayoría de aquellas pantallas, flujos y elementos que se quieren ofrecer para hacer que “Eenventary” sea percibido por el usuario potencial como un producto necesario en su vida para solucionar sus problemas respecto a el inventariado de material artístico y creativo.
