Factoring Security

Mobile Desktop Banking UI Responsive Wireframes Hifi
  • Año: 2019
  • Cliente: Factoring Security
  • Equipo:
    • Project manager
    • Diseñadora
    • Desarrolladores
Mi rol en el proyecto:
  • Proponer flujos de usuario en etapas tempranas del proyecto.
  • Proponer wireframes.
  • Diseñar UI en desktop y mobile

Contexto

Factoring Security es parte de Grupo Security, un holding que a través de distintas filiales, participa en banca, seguros de vida, banca, entre otros.

Para este proyecto, el cliente buscaba una actualización de la interfaz que había sido implementada en otras secciones internas del sitio web. En particular se trataba de el Portal de Auto-Atención (PAA), donde los usuarios debían completar una serie de pasos para completar o simular operaciones de factoring, además de completar información sobre su empresa.

Screenshot del inicio del sitio web de Grupo Security.
Arriba: Screenshot de la página de inicio de Grupo Security (https://www.security.cl/).

Referentes visuales

Al principio del proyecto, se nos entregó un mockup en alta fidelidad del home del sitio web, como referencia para el resto de la interfaz que implementaríamos de nuestra parte. Ésto fue hecho por Nectia, empresa que ya estaba trabajando en esos momentos con Factoring Security.

Screenshot de Illustrator, donde se despliega el archivo que el cliente envió como referente.
Screenshot del archivo de referencia que se nos envió en Illustrator, hecho por la empresa Nectia.

Objetivos

Objetivo principal: Realizar los procesos de factoring de manera 100% online.

Objetivos específicos:

  • Instar a los usuarios a realizar procesos online.
  • Entregar una interfaz fácil de usar y que se adapte tanto a teléfonos como a computadores.

Usuarios

Siendo Factoring Security una empresa que ofrece soluciones a empresas, los usuarios finales serían personas que representan o administran cuentas de empresas de distintos tamaños y áreas del mercado. Son personas que manejan un lenguaje bancario y/o empresarial más avanzado, y que generalmente saben qué hacer y qué esperar cuando hacen este tipo de trámites o tareas.

Se consideró también que los usuarios podían ser tanto clientes como no clientes. Todas las personas que quieran realizar una operación de factoring son evaluadas en base a documentos que deben mostrar durante el proceso. Dependiendo de esta evaluación se continúa con la operación o se aborta.

Proceso

Al tener distintos "status", los usuarios podían seguir distintos flujos de navegación, por lo que fue necesaria una evaluación y mapeo de estos flujos para entender mejor el proceso y poder establecer los mockups que se necesitaban.

Diagrama con flujos de usuarios.
Diagrama con flujos de usuarios.
Diagrama con flujos de usuarios hecho con wireframes.
Wireflow (wireframe userflow).
Imágenes de wireframe (izquierda) y prototipo en alta fidelidad (derecha) de landing page.
Imágenes de wireframe (izquierda) y prototipo de alta fidelidad (derecha) de sección de resumen de operaciones.
Cuatro vistas de Portal Auto-Atención en versión mobile.

Aprendizajes

Este fue uno de esos proyectos que al principio parecen simples, ya que teníamos una base gráfica para diseñar, pero que terminó siendo desafiante debido a la complejidad de los flujos del usuario. Como diseñadora, no tengo gran conocimiento financiero o bancario, y nunca he hecho operaciones de factoring, por lo que entender los procesos fue complicado al principio.

Otra dificultad fue adaptar la interfaz a mobile, por la cantidad de tablas de datos que contenía el sitio. Las tablas son difíciles de implementar en espacios pequeños, pues la usabilidad se ve comprometida. Finalmente se llegó a una solución simple tanto en términos de UI como de front-end.

Dos teléfonos flotantes que muestran la aplicación.