USERNOOK

Este proyecto surgió a partir de un reto que me propuso una empresa. Me pareció muy interesante la idea y comencé a diseñar toda la estructura inicial del mismo. Os comparto mi idea inicial y como planteé el diseño de la aplicación como primer planteamiento. Al ser una idea inicial muestro ésta con wireframes de baja y alta fidelidad, no llegando a realizar los prototipos al ser un estudio y vista a grandes rasgos sin entrar en detalles y testeo.

CASE STUDY

mockup-of-a-space-gray-macbook-floating-in-a-solid-color-room-22557 (2).png

DISEÑADORES UX Y USUARIOS EN UN MISMO LUGAR

La idea de Usernook ha sido a partir de la necesidad de crear una plataforma web que sirva para que agencias del ámbito del diseño estratégico y la experiencia de usuario puedan reclutar una muestra de participantes lo más representativa y segmentada posible para la realización de tests con usuarios. El objetivo de la plataforma es agilizar todo el proceso actual de recruiting que se lleva a cabo en las agencias de UX. En lugar de contactar con una empresa de recruiting que busque una serie participantes que se ajusten a unos parámetros dentro de su base de datos, ofrece una plataforma que conecta directamente a los consultores UX con cualquier participante que se preste, obviando así a los intermediarios.

Para crear la aplicación web he tenido en cuenta dos puntos fuertes a considerar. Contamos con dos tipos de perfiles:

El consultor UX. Su objetivo es contar con una herramienta online pública que le permita facilitar las tareas de captación, calendarización y contacto de los participantes para un test con usuarios en particular.
El participante. Su objetivo es disponer de una plataforma abierta a la que se pueda inscribir para participar en tests con usuarios, remunerados. Su posible participación dependerá del encaje de su perfil con el filtro de captación (screening) de los tests que publican los consultores UX.

DIAGRAMA DE FLUJO

He diseñado un diagrama de flujo con todo el proceso global y las acciones que irá siguiendo tanto el consultor como el usuario, fuera y dentro de la plataforma, desde que se dan de alta , hasta que se paga al participante por acudir y participar en el test.

A continuación muestro el diagrama con todos los pasos y una explicación general de cada uno de ellos, aconsejo para un mejor entendimiento leer previamente la leyenda que se muestra en el lateral derecho.

Comenzamos entrando en la página principal de la herramienta (Landing Page) donde debemos introducir independientemente si somos Consultor o Usuario, nuestro email y contraseña para registrarnos. El siguiente paso es indicar si somos Consultor o Usuario ya que así la herramienta nos redirigirá a una página u otra:

Si somos Consultor lo siguiente será añadir una serie de campos con nuestros datos, éstos serán los realmente imprescindibles, como nombre, apellidos, empresa, cargo en la empresa, email para las notificaciones. Lo siguiente será crear un test para su publicación y realizar por los usuarios elegidos posteriormente.

Si somos Usuarios tendremos que cumplimentar un formulario mucho más exhaustivo, ya que es lo que servirá para encontrar los usuarios correctos para una sesión determinada. Estos datos serán nombre, apellidos, fecha de nacimiento, género, ubicación, idiomas, email para notificaciones, estudios, profesión, sector, situación laboral actual e ingresos netos anuales.

Como he comentado anteriormente, tras la creación del perfil del usuario y los datos introducidos, el sistema procederá a la búsqueda de coincidencias en la base de datos, con las características que el consultor pide para los usuarios que participaran en la sesión, haciendo así un filtrado entre todos los usuarios disponibles en la plataforma. Una vez que el sistema haya encontrado coincidencias se le notificará al usuario del nombre del proyecto, la sesión, así como la fecha, hora y lugar de realización. Si el usuario está dispuesto, aceptará la propuesta, si no, el sistema volverá a hacer nuevamente un filtrado para ese proyecto con los usuarios correctos.

Partiendo de que el usuario a aceptado, la propuesta se le notificará al consultor a través de la plataforma. Al revisar el perfil del usuario, si el consultor considera que encaja para la sesión, éste aceptará la solicitud del usuario, el cual será notificado de que su solicitud ha sido aceptada. En el caso de que considere que el usuario no cumple los requisitos para la sesión, se le notificará igualmente de que no ha sido aprobada la solicitud.

Llega el momento de la sesión y tenemos dos casos a tener en cuenta, si el usuario no asiste a la sesión, el consultor lo anotará en la aplicación como “No asistencia”, cancelando la sesión a este usuario, el sistema notificará al usuario de que su cita ha sido cancelada.

En el caso de que el usuario asista y realice la prueba, el consultor marcará la asistencia del usuario en la aplicación y realizará el pago mediante la pasarela de pago HappyPay*, igualmente el sistema notificará al usuario de que su incentivo ha sido enviado. *Pasarela de pago ficticia.

WIREFRAMES EN PAPEL

El siguiente paso que he realizado ha sido estudiar las distintas funcionalidades que podría tener la aplicación y realizar los bocetos de cada pantalla en papel, teniendo en cuenta principalmente las que se pide en la prueba propuesta:

Se debe diseñar como mínimo las pantallas de:

Alta de un test de usabilidad (Perfil Consultor UX)
Mantenimiento de los distintos tests de usabilidad. Haciendo hincapié en el sistema de filtrado. (Perfil Consultor UX)
Página de detalle de un estudio de usabilidad dado (y sus sub- pantallas), sobre el cual ya se hayan apuntado varios usuarios. (Perfil Consultor UX).

Además de estas funcionalidades, consideré necesario desarrollar otras para conocer mejor en contexto la aplicación y tener una visión más global de la misma. Las funcionalidades añadidas bajo mi criterio son:

• Login (Consultor y Usuario).
• Creación de Perfil (Consultor y Usuario)

EL LOGO Y SU DISEÑO

Para diseñar el logo he tenido en cuenta hacia quién va dirigida la aplicación. Personas que están en contacto con la tecnología, de todas las edades pero con un espíritu joven, todo tipo de géneros y etnias. Por un lado tenemos el circulo que lo engloba todo, y por otro, la abertura del circulo, que muestra tecnología que está en constantes cambio y que tenemos un sinfín de posibilidades con ella.

Los colores muestran la diversidad, expresando a través de éstos que cualquier persona, sin barreras, puede hacer uso de ella.

Se me ocurrió este nombre, Usernook, y me pareció divertido, llamarlo “El rincón del usuario” viene mucho al caso, además que visualmente da mucho juego haciendo un “Camel Case” con los colores.

FUENTES Y COLORES

La fuente elegida es la misma que utilicé para el logo, me parece muy clara y versátil. En la página “Fuente” en Figma, encontrarás todos los estilos, tamaños y colores.

Los colores con los que creé el logo, son los que me ayudaron como partida para crear la paleta completa. No faltan los colores acento, sobretodo para los distintos estados de los Botones, escalas de grises, notificaciones del sistema algún que otro estilo de borde y algo de opacidad.

COMPONENTES

En la página componentes están recopilados los componentes y sus variables usados en la aplicación diseñados con la metodología Atomic Design. Más adelante junto a las funcionalidades de pantallas, explicaré algunos y sus distintos estados.

WIREFRAMES DE ALTA FIDELIDAD

En este apartado muestro los wireframes de alta fidelidad desde el login y creación de perfil, tanto de usuario como de consultor, creación de workspace donde el consultor hará la gestión y mantenimiento de la aplicación y desde donde podrá consultar el resument del test.

CREACIÓN DE PERFIL DE USUARIO

Creando Perfil2 (Consultor y Usuario).png

El perfilado del Consultor no hay mucho más que añadir, es similar en componentes al del Usuario pero con menos campos a rellenar. Sólo sería una pantalla de perfilado.

TABLERO DE GESTIÓN Y MANTENIMIENTO (Consultor)

Ahora vamos a hacer hincapié en el recorrido del Consultor tras haber realizado el perfilado. La siguiente pantalla que encontrará es crear su Workspace o espacio de trabajo, me pareció interesante esta opción para que el Consultor pudiese organizar mejor sus proyectos. Como por ejemplo tener distintos workspace para empresas diferentes para las que está trabajando. Como apreciarás ya tenemos una vista diferente, mas adelante aparecerán más detalles y podrás visualizarla mejor.

DISEÑO DEL FORMULARIO (CONSULTOR)

RESUMEN ALTA DE TEST

En la siguiente pantalla vemos el tablero con el resumen de las sesiones creadas por el Consultor. Pensé en esta forma por ser tan visual. Cada tarjeta cuenta con información y funcionalidades. Por ejemplo fecha de creación, cuando fue publicada la sesión, fecha y hora del día de la sesión, las solicitudes de Usuarios enviadas y las aceptadas por el Usuario. Por otro lado contamos con un menu inferior donde podemos marcar como favorita, eliminar, compartir, enviar mail y editar.

La opción editar tengo que aclarar que al pulsar este icono nos llevará a la pantalla donde creamos el formulario y en el mismo formulario se habilitaran los campos para que pueda ser modificada. *Añado la captura de pantalla para que sea más fácil de recordar.

MANTENIMIENTO

Al pulsar sobre uno de los test entramos en la pantalla de Mantenimiento. Desde esta pantalla podemos gestionar los Test para la sesión, el estudio de usabilidad y a los usuarios de cada proyecto, además de editarlo, eliminarlo y compartirlo.

Vamos a seleccionar, por ejemplo, al participante Leonardo. Seguidamente podrás ver un resumen de todos los datos del participante, respuestas del test realizados asistió a la sesión, y si recibió el pago.

ESTUDIO DE USABILIDAD

Ahora voy a mostrar las pantallas con el estudio de usabilidad y ejemplos. Desde la segunda card de la pantalla anterior accedemos al tablero del Estudio de usabilidad. Se han organizado por participantes en la sesión y así poder gestionarlo desde las mismas respuestas que el usuario contesto en la sesión.