Salina
A B2B solution for third-party authentication
Project Overview
Salina is a mobile/desktop hybrid application built to help users authenticating in third-party applications using their mobile’s biometric tools. Its technical complexity required to work towards isolating complicated processes from the user. In this project it was key to formulate accurate writing and flows.
My Contributions
When I first met Cuantix they didn't have a clear design system, not even a functional style guide able to reflect their brand. I was able to engage the team into a functional design process. Two of the main features we were able to build for the platform were the Survey builder: a tool to create surveys linked to stardardized indicators and the Beneficiaries module, which helped them to track individually beneficiaries impact.
The Challenge
How can we build a coherent communication between the system and the user while providing a smooth flow between tasks in the desktop and the mobile simultaneously?
When we began to think about the optimal conversation between the system and the user, we detected two main challenges:
- Be able to create a smooth flow between mobile/desktop, as the user will need to configure their accounts and further authenticate using both devices
- Create a common language to explain how to use the application, posible errors, and other system messages without making them heavily technical
Technical Context
I had several meetings with the technical team to understand what they were doing.
Biometrics are commonly used to control access to digital resources. It reduces password fatigue, improves user experience, and avoids stress on company's support and IT teams (traditional authentication require passwords to be reset, and managements of password databases and systems).
Salina is a SAAS and users can easily enter Salina's environment through a common browser. However, the entry point for the user will always be another application in which they intend to authenticate. The first time they try to enter these applications in their work environment (think tools like Github, Slack or Jira), they should activate their account by providing their work email and validate it through a code they will receive in their email. Until here, very traditional.
But then, the second part is users should activate their account in their mobile. They will use biometric tools (Face ID or fingerprints ID) to authenticate automatically without using passwords.
We began by creating flows for the general interactions between the user and the platform. By drawing the flows in the early stages of a new feature, we facilitate the process of creating state screen (as empty states or edge cases). This was the happy path of an authentication:
- User try to enter a 3rd party application and they choose Authentication with Salina
- User enters only their email in their desktop version of Salina and a push notification is sent to their device
- User clicks on their device's notification and it will open Salina
- Salina opens the mobile's biometric tool and, after verification, provides information about the login attempt, which the user should validate
- The mobile application sends information to the back-end and after several verifications, send the password directly to the desktop application via Bluetooth.
- User's identity is validated and the login is automatically granted and executed.
In the flows drawing, we allow ourselves to add notes, comments, and special information when applies.
User Testing
We used the flows as maps to create our first mobile screens. By doing so, still with placeholder illustrations, we began to test with users the flows we were creating to clean any friction we might find.
Before going deeper into the visual design, we planned Usability testings for 5–10 users. We gave users a set of main instructions and created a script to be able to explain the activity before putting hands on the job. This helps us to be able to watch the users interacting with the prototype without feeling the urge of give away hints.
Gracias por aceptar participar en esta evaluación. Nuestro objetivo es ver qué tan fácil o difícil de usar es este producto digital. Te queremos avisar que nos gustaría grabar tus reacciones y opiniones. Es completamente con una finalidad de estudio, los testeos son anónimos y nadie aparte del equipo de investigación los verá. Una vez que nos des tu consentimiento, comenzaremos a grabar y te pediremos que lo repitas, para que quede constancia de tu aprobación.De todas maneras, es posible que te pidamos que nos aclares algunas afirmaciones de vez en cuando.
Esta actividad no busca probar tu habilidad como usuario sino la habilidad de la empresa de diseño de aplicaciones para generar una plataforma clara, intuitiva y simple. Por eso mismo te pedimos que seas lo más crítico posible con el sitio, lo que encuentres bueno, malo o que falta. Todo eso nos servirá para mejorar la navegación.
- No se trata de una prueba de tus capacidades, lo que se está probando es el sitio. Así que no te preocupes por cometer errores, cada error que encuentres nos ayudará a mejorar nuestro proyecto.
- La manera en que esto funciona es que tu en todo momento me manifiestes lo que estás pensando, ya sea esta una buena o mala impresión sobre lo que estás viendo.
- No hay comentarios correctos o incorrectos. Realmente sólo queremos saber si hemos diseñado el sitio apropiado para ti.
- Si alguna vez sientes que estás perdido o no puedes completar una tarea con la información que se te ha dado, por favor házmelo saber. Te voy a preguntar qué habrías hecho si estuvieras en el caso real y luego decidiremos si te ayudo a encontrar el camino correcto o definitivamente saltamos a la siguiente tarea.
- Como te mencionamos, estaremos grabando esta sesión para complementar nuestro análisis si es necesario. Tu nombre no será asociado con los datos o conclusiones de esta evaluación
- Por último, por favor, usa el sitio como lo harías en tu casa o tu oficina. Cuando yo te pida que busques información, hazlo tan pronto y tan exactamente como sea posible.
¿Tienes alguna pregunta o comentario que hacerme antes de comenzar? Comencemos…
2. Users were encouraged to finish three tasks in the prototype. The researchers asked the users to think out loud while they were interacting with the product and kept silence during the activity.
From these user testing we found some conclusions:
We could add some delightful yet funny illustrations and tone to lighten up the common authentication task
- It was not clear in several steps how to recover from errors
- Our ‘tone’ was still too technical for beginners. We had to simplify the way we communicate any possible error from the user
- We had to set a first set of instructions when activating the account to help the users understand they needed biometric tools and Bluetooth connection from the desktop to their mobile
- We could add some delightful yet funny illustrations and tone to lighten up the common authentication task
Final Prototype
We were able to create a smooth, simple, and fun application for authentication, taking into considerations all possible human errors and system crashes to craft a seamless interaction between the app running in both devices and the users.
Authentication - Bluetooth Connection Error
Authentication Prototype Flow
