UI ABC
Vistas por usuarios
- Vistas para todos los usuarios
- Landing page
- Login
- Navbar
- Vistas empresas
- Registro
- Dashboard inicial
- Ver proyectos
- Búsqueda candidatos
- Entrevistas programadas
- Asignación/selección de candidatos
- Vista Proyectos
- Creación de proyecto
- Vista Proyectos
- Botón en la vista de proyectos
- Formulario de creación de proyectos
- Resultados de entrevistas
- Botón en la vista de proyectos para ir a resultados
- La entrevista tiene un puntaje (visto en estrellas) y un comentario.
- Listado de personas que presentaron entrevistas para el proyecto
- Filtros: Fechas, Rol, Tipo y Candidato
- Sección Candidatos contratados
- Un listado de candidatos contratados con un botón al frente que diga calificar
- Al dar clic al botón calificar muestra un modal con estrellas y campo para dejar comentario
- Vista Búsqueda de candidatos
- Listado de candidatos según filtros aplicados
- Panel para escoger y aplicar filtros
- Modal para ver el detalle de un candidato
- Vista entrevistas programadas
- Listado de entrevistas con fecha y hora, nombre candidato, proyecto.
- Es un maestro detalle que al desplegarlo muestra toda la info
- Vista de asignación de candidatos
- Listado de candidatos que participaron en el proceso con nombre, número de cédula y correo electrónico
- Un check para escogerlos y finalmente guardarlos
- Vistas candidatos
- Registro
- Dashboard candidatos
- Listado de pruebas a presentar
- El listado es un maestro detalle con un botón al frente que diga presentar
- Vistas ABC
- Registro
- Registro de nueva prueba técnica
- Cargue de banco de preguntas
- Asignar pruebas a candidato
- Listado de candidatos
- Un botón asignar pruebas
- Se despliega una modal con un dropdown para escoger las pruebas disponibles
Al definir las vistas se optó por crear un prototipo de papel que nos permitió aclarar dudas sobre las interacciones que debería tener el usuario con la aplicación. El proceso que se siguió fue el siguiente:
- Identificar las historias de usuario que se van a implementar en el MVP
- Enumerar las vistas a elaborar
- Definir el contenido de las vistas
- Realizar el cableado entre vistas
- Testear el prototipo con un posible usuario y evaluar las interacciones
- Anotar y corregir
Las conclusiones a las cuales llegó el equipo a partir del prototipo fueron:
- Falta incluir varias vistas para cargar información de pruebas y preguntas
- Se deben ajustar algunos flujos en la aplicación correspondientes a la asignación de pruebas
Basado en la teoría de psicología del color y los aspectos que queremos transmitir:
- Profesionalismo
- Seriedad
- Exclusividad
- Seguridad
El color primario que escogimos es el azul y el secundario el gris, por tanto, la paleta de colores escogida es la siguiente:
La establecemos en los mockpus de figma con la ayuda de la herramienta de Material IU dispuesta para los colores
Accesibilidad
Para mejorar la accesibilidad del sitio se utilizó un plugin de Figma que permite revisar el contraste de los mockups. Con esta herramienta identificamos las partes que presentaban dificultades para personas de una condición visual y fueron corregidas según las indicaciones de la misma herramienta.
Internacionalización y localización
Para incluir estas dos características se debe adjuntar la librería i18Next. La documentación está disponible en la página oficial https://www.i18next.com/