Calipso APP
Descubre cómo reordenamos los procesos y la interfaz de un aplicativo web, replicándolo en la versión mobile.
Actividad:
- Software para empresas
Servicio:
- Diseño UI/UX
Sobre el cliente
Calipso nació hace casi 30 años en Argentina y marcó tendencia al ser el primer software ERP & CRM estándar del mercado. Así es como esta compañía se convirtió en líder en desarrollo y entrega de software ERP para gestión de empresas en toda Latinoamérica.
El desafío: interfaz web a mobile
El cliente ya poseía una interfaz web que contaba con los elementos necesarios. Entonces, en primer lugar, el desafío estaba en ordenarlos para simplificar la navegación. Para lograrlo nos propusimos que el usuario tan solo necesitara de 3 clics para obtener la acción o información que necesita.
En una segunda instancia, nos abocaríamos a resumir y adecuar toda la información de la versión desktop al formato mobile.
El proceso de la versión desktop
Comenzamos analizando diversas plataformas con el objetivo de reorganizar los elementos para que al usuario pueda encontrar de forma intuitiva lo que busca.
Luego de este paso propusimos transformar la presentación de la información con base en 4 recursos:
- Sidebar fijo donde se podía ir sumando los módulos más utilizados en el listado de Favoritos. Además, en el caso de la sección de Favoritos podrían seleccionar módulos y en cada uno de ellos agregar subcategorías.
- En la pantalla principal, cards con los distintos módulos disponibles.
- Un breadcrumb, es decir, un link con sección y subsecciones que permitiría al usuario identificar de forma clara dónde se encontraba.
- Un buscador para facilitar la localización de la información que necesita.
Para renovar el formato de la información incluida en cada uno de los módulos, simplificamos el listado. De esta forma, el usuario podría ver en pantalla solo la información indispensable, a la vez que evitaríamos la sobre carga visual.
En la List View era necesario simplificar el menú de íconos para no hacerlo tan pesado a nivel visual y ordenar por acciones o filtros de búsqueda.
Para lograrlo analizamos junto al cliente los elementos que debían incluirse sí o sí y propusimos una nueva estructura. Dentro de lo cual el usuario final podría personalizar los filtros, elegir el formato para ver los elementos y la información que aparece en la lista.
Otro aspecto que podría customizar es la semaforización que permitiría catalogar las transacciones de forma visual. Como así también la confección de las facturas, pudiendo modificar cabecera, detalle y pie.
El proceso de la versión mobile
Utilizamos como punto de partida Material Design, un sistema de diseño visual, presentado por Google en 2014. Luego realizamos customizaciones para poder adecuarlo a los requerimientos del proyecto.
Para aligerar la carga visual elegimos mostrar unos pocos íconos en la parte inferior de la pantalla y luego, a través de un menú, dar acceso al resto de las funcionalidades.
Al presionar menú, el usuario podría abrir el sidebar, como el de la versión desktop, accediendo a los módulos y las funcionalidades marcadas como favoritas.
Por otra parte, empleamos el recurso del buscador que aparecía bien accesible en la parte superior de la pantalla.
La app también contaría con diversas formas de personalizar la navegación. Por ejemplo, a través del “Centro de Filtros” y la Semaforización. También en el caso de emisión de facturas, a través de la funcionalidad de Transacciones, le daría la posibilidad de editar el encabezado, el detalle y el mail.
Por último, para probar que la app cumpliera con los criterios de usabilidad, realizamos el testeo de un prototipo con usuarios reales. Este paso fue clave, ya que aportó al proceso valiosa información para optimizar la aplicación.
El resultado
Luego de 18 meses de trabajo, mucho feedback dentro de la empresa e iteración con el cliente, logramos una notable mejora visual y de usabilidad. La clave estuvo en simplificar el flujo del usuario para conseguir una navegación mucho más intuitiva.
Comencemos a trabajar en la presencia digital de tu marca
¡Hagamos equipo!