¡Clay versión 0.3!
¡Clay versión 0.3!
Cada cierto tiempo nos gusta mejorar la experiencia que tienen nuestros clientes en contacto con la aplicación. Cada iteración incorpora nuevos aprendizajes, nuevas tecnologías y por qué no, un poco de nuestras ganas de mostrar lo que podemos hacer 😊. Acá puedes ver cómo cambiamos a la versión 0.2 hace ya 3 años!
¿Aún no sabes lo que es Clay? Te invitamos a conocernos y probarlo por 15 días 👇
Gestión Financiera Inteligente
Clay busca ser el punto de encuentro entre la gestión financiera y la contabilidad. Los que usan Clay son tanto dueños…
En un comienzo costó decidirnos por un gran cambio, pero cada día se sumaban más y más usuarios, lo que nos hacía mirar Clay con ojos más críticos.
¿Realmente estamos entregando un producto acorde a las necesidades de nuestros usuarios?
En ese entonces la respuesta fue “no del todo”.
Clay se ha convertido en una aplicación muy grande que abarca muchísimas funcionalidades. Debíamos crear un espacio óptimo para cada una de ellas, dándole la identidad y jerarquía que necesitaban para situar al usuario con más fuerza en el centro de nuestra aplicación
Pero, ¿por qué rediseñar la app? Tratando de convencernos de que era el momento óptimo para un cambio. Antes de ponernos a presentar maquetas, debíamos tener un respaldo, así que nos propusimos hacer estudios, entre sesiones de design thinking, evaluación heurística, mapa de navegación, definición de perfil y test de usuario, logramos mirar la aplicación desde un punto más objetivo, y visualizando las oportunidades de mejora.
Gracias a todos estos ejercicios llegamos a poder empatizar, entender y ponernos en los zapatos de nuestros usuarios, para crear soluciones conscientes y eficaces. Darnos la oportunidad de revisar y re-trabajar en nuestros flujos nos permitió mejorar y pulir cosas que no vimos desde un comienzo y pasamos por alto.
Dentro de los problemas más fuertes que identificamos fue el contraste de los elementos, la tipografía muy delgada y, a veces, muy pequeña; lo que complicaba la legibilidad. Además, una paleta cromática poco estable, botones que parecían deshabilitados y así… suma y sigue.
Sistema de diseño
Nuestro primer desafío fue unificar todas las acciones y elementos que existían dentro de Clay. Para lograrlo comenzamos definiendo un sistema de diseño homogeneizando y centrando el foco en el contenido.
Decidimos que partiríamos programando los problemas más grandes que habíamos identificado y luego iríamos avanzando de a poco hasta completar toda la aplicación de manera eficaz. Lo primero en plasmar fue cambiar la paleta cromática por colores que fueran de la mano con nuestro color corporativo y lograran el contraste que necesitábamos mejorar.
Luego seguimos con la tipografía. Decidimos cambiar de “Assistant” a “Roboto”, una tipografía Sans simple que tiene una excelente legibilidad tanto en forma como grosor. Era la adecuada para el nuevo Clay.
Empezamos a definir márgenes, espaciados, alturas, anchos, radio de los bordes, estilos de los botones, formularios y tablas.
Con todo esto junto creamos el sistema de diseño de Clay el cual tiene las siguientes reglas:
Todo componente nuevo debe responder a los estilos y lineamientos.
No se crea nada nuevo a menos de que sea estrictamente necesario.
Usamos los componentes que definimos al comienzo.
Si un módulo es parecido a otro se reutilizan los elementos.
La paleta cromática no es transable.
Todos los elementos tienen un redondeado de 8px
Es nuestra responsabilidad el uso que le damos a los recursos de diseño dentro de la app.
Con todo prototipado y listo, solo quedaban hacer las últimas revisiones de diseño. Junto a nuestro equipo y algunos usuarios de Clay realizamos sesiones guiadas de test de usuarios. Muchos no notaban grandes cambios al comienzo, pero luego de ir navegando pudieron darse cuenta de que encontraban todos los elementos que necesitaban de forma mucho más clara y precisa.
Estos son algunos de los comentarios que nos dejaron:
“Mucho más explicativo en cada movimiento”
“Me encantaron los textos y párrafos explicativos, ayudan un montón a saber qué hacer. Los iconos también están increíbles!!”
“Es más fácil de visualizar, los colores destacan las acciones a realizar”
“La forma que muestras los asientos contables, ahora se destacan más con ese color oscuro”
“Los match sugeridos se notan más”
“Mejor visualización de lo importante”
Esto no se termina aquí
Con estos test volvimos a iterar en algunos casos bordes que no habíamos contemplado, cuando todo quedó listo ¡ya estábamos preparados para mostrárselo al mundo entero!
10 cosas que vienen dentro de esta actualización:
Si bien tenemos un post que explica en detalle las actualizaciones (revisa el post acá), acá te dejamos un top 10:
Agregamos avatar personalizado para los usuarios
Rediseñamos del panel multibanco
Creamos un nuevo buscador avanzado para movimientos y obligaciones
Agrupamos cuentas bancarias por tipo de moneda
Cambiamos de flujo en documentos relacionados
Creamos una nueva forma de asociar centros de costos a tus obligaciones
Rediseñamos el buscador de RUT nacional e internacional
Creamos un nuevo filtro de clientes por categoría de clientes
Agregamos la posibilidad de adjuntar archivos a los asientos
Optimizamos Clay 100% para teléfonos y tablets
Cosas que aprendimos en el camino
Sin duda algo que aprendimos de todo este proceso es no dejar pasar el tiempo y siempre ser consciente de lo que nuestro usuario necesita.
Utilizar diferentes metodologías nos ayudó para evaluar el producto y poder identificar problemáticas y flujos que dimos por olvidados en el tiempo, con la magnitud de nuestra aplicación es muy fácil olvidar algo.
La clave es no dejar de escuchar a nuestros usuarios y siempre iremos encontrando oportunidades de mejora y focos de nuevos negocios.
¿Crees que nos faltó algo? Escríbeme y estaré encantada de conversarlo! 💚
