Diseñando la Intranet de Pans&Co.
Timing: 3 días | Tipo: Prueba Técnica | Ejercicio: Diseño de Intranet
A continuación quiero presentar una prueba técnica realizada en 3 días. Los objetivos eran los siguientes…
This mission consists of a redesign of an intranet for Pans & Company. Our main audience is crew-members that work on the franchises worldwide.
Project Goals
- Build an online community where users can communicate, share their knowledge and activities for work and non-work related topics. Provide employees with the necessary tools to learn and develop their carrier.
- Such as training, calendars or other similar features. Build a platform where the crew-member can access relevant and updated information to ease their daily tasks. Create a platform to help managers communicate better with the staff.
Minimum Features
- Homepage Login-register process. Shift calendar.
- You have absolute creative freedom, as long as the result ends up in a consistent and justified proposal.
- We are looking for an outstanding concept and result that helps us understand your abilities to analyze and propose a solid strategy in terms of UX/UI Designer Any extra deliverable that helps to accomplish the objectives of the project will be also appreciated.
Una vez recibí el correo con la prueba técnica, lo primero que hice fue definir los pasos que iba a seguir para lograr el mejor resultado. Hice benchmarking para conocer cuáles son los atributos y elementos que funcionaran mejor en cada sección.
La primera sección por la que decidí comenzar fue Shift Schedule. Quizás lo más lógico era comenzar por el Dashboard pero, para mí, tenía sentido finalizar con él ya que sería un resumén de lo construido anteriormente. Más o menos, algo similar cuando realizo el footer de una web. Lo dejo para el final ya que resume o engloba todo el contenido de ésta.
0. Navbar
Aunque he mencionado que lo primero que diseñé era la sección de “shift schedule”, lo que realmente diseñé antes de nada y tener claro, son los elementos comunes a cada una de las distintas pantallas o secciones que componen la intranet, el navbar.
En el sidebar podemos encontrar el logotipo de pans & company y los distintos elementos que contiene la intranet. Estos son el “Dashboard”, “Shift Schedule”, “Chat” para el staff y una sección de “Learning”.
Más adelante veremos que hay otra sección extra pero, solo aparecerá si el rol del usuario es el de manager.
En el mismo sidebar inferior encontramos un botón para finalizar la sesión y otro de ayuda, siempre necesario éste último que, veremos que está presente en distintos espacios.
En la parte superior tenemos un buscador y unos botones que nos mostrarán rápidamente si tenemos nuevas notificaciones o mensajes que atender. Pueden ser de compañeros o managers y es clave visualizarlo de forma rápida.
También tenemos otro botón de ayuda y un mensaje dándonos la bienvenida con la foto de nuestro usuario para identificar siempre que nos encontramos en nuestro perfil y no en el de un compañero que haya podido olvidar cerrar la sesión.
1. Shift Shedule
Ahora sí, una vez tenía claro los elementos comunes para navegar por las distintas secciones, comencé por la sección “Shift Schedule”.
Tenemos una primera parte en la que podemos filtrar la vista del calendario de empleados de forma diaria, semanal o mensual.
Además nos dice el número de horas trabajadas en ese mes hasta la fecha (127 hours).
Encontramos botones para imprimir o realizar una copia de la pantalla actual. También podremos acceder al día que queramos en la intranet gracias al filtro.
Muestra una tabla en la que podemos ver los distintos miembros del staff acompañado de información que nos indica qué funciones ha realizado de de forma diaria, qué turno y el total de horas trabajadas durante el periodo de tiempo que hemos insertado en el filtro.
En éste caso podemos ver lo que se ha trabajado en la semana, cuántas horas, quiénes y la función que ha desempeñado cada uno.
De forma global podemos ver la pantalla al completo con la sección del sidebar seleccionada indicando al usuario dónde se encuentra.
2. Chat
En ésta sección he querido combinar dos puntos que me pedían en la prueba, en un uno. Estos “Project Goals” fusionados en una misma sección son…
- Online community where users can communicate, share their knowledge and activities for work and non-work related topics.
- Build a platform where the crew-member can access relevant and updated information to ease their daily tasks.
La clave aquí desde mi punto de vista, era crear un chat con varios canales en los que por topics, pueden hablar de cosas relacionadas o no, con el trabajo y, del mismo modo, otro canal en el que los miembros del staff pueden tratar asuntos sobre sus actividades diarias.
En la columna de la izquierda y primeros dos items…
Share their knowledge and activities for work and non-work related topics.
Staff
Aquí podemos ver que existen unas categorías que les concierne a todos como son las #Vacations, #Shifts, #Rules o #Welcome para recibir a los nuevos miembros, que es donde se encuentran actualmente dando la bienvenida a María Soria en éste caso.
Fundays
Aquí pueden tratar temas ajenos al trabajo, como celebraciones conjuntas navideñas, de verano, after work, ponerse de acuerdo con las vacaciones…
Community
Crew-member can access relevant and updated information to ease their daily tasks.
En éste canal, todos los miembros del staff pueden encontrar información relevante sobre las actividades que pueden realizar día a día y poder consultar así cualquier duda que tengan y preguntar en el chat a los compañeros de forma rápida.
En la parte central tenemos el chat con la conversación y en la parte inferior el input donde escribir los mensajes, adjuntar imágenes,…
En la parte de la derecha un listado con los miembros del staff y de los managers y su estado actual, conectados o no conectados.
En la pantalla completa podemos ver que la sección de “Chat” en el sidebar está activada indicando al usuario dónde se encuentra.
3. Learning
Para ésta sección tuve en cuenta como referencia una página con la que tanto he aprendido conceptos de programación, programación, Figma,… Ésta página es “Udemy”, página que me encanta por cómo distribuye la información y el contenido para que siempre recuerdes en qué sección estás o cómo encontrar rápidamente lo que buscas una vez has finalizado el curso.
Top area
En la parte superior elegimos uno de los 4 principales temas que nos plantea el curso completo. Una vez seleccionamos el que queremos (Customer Service and Hospitality), podemos elegir cómo queremos visualizarlo, a través de “Video Tutorial”, “Documentation” o “Presentation”.
Left area
Una vez hemos seleccionado el topic que nos interesa (Customer Service and Hospitality), Vemos las distintas secciones. Dentro de cada sección se encuentran 2 ó 3 áreas. En éste caso, nos encontramos dentro de Industry Knowledge viendo el capítulo “Customer Services” que se indica seleccionado o activo con el background de color amarillo.
Right area
Dentro del capítulo de Customer Service seleccionado en el “left area”, encontramos todas las secciones que lo componen. Podemos ver que nos encontramos en la introducción del curso en “Course Workbook”.
4. Manager
Ésta sección es especial ya que solo tendrán acceso aquellos que estén registrados bajo el rol de Manager.
En ésta sección el manager es capaz de comunicarse directamente con el miembro del staff que desee.
En el sidebar, vemos que aparece un elemento nuevo que no aparece en los ejemplos anteriores, que eran bajo el perfil de un miembro del Staff: “Manager”.
Cuando nos encontramos en esta sección “Manager”, vemos que nos encontramos un nuevo chat distinto al anterior en el que no hay topics, sino el listado de los miembros del Staff actual en el lado izquierdo.
En el derecho encontramos información general del empleado y links por los cuáles podemos por ejemplo, contactar vía mail si lo deseamos o, llamar por teléfono al usuario.
En la parte central del chat se muestran los mensajes y en la inferior un input similar al anterior pero con alguna diferencia, como poder enviar mensajes de carácter privado.
5. Dashboard
Ésta sección, que es la principal o primera que encontrará un miembro del Staff al iniciar sesión, recopila cierta información a modo resumen de las secciones anteriores.
Encontramos un resumen del horario de los turnos a realizar ese mismo día. También los mensajes y notificaciones sin leer por parte de los compañeros o manager y un calendario que refleja información pertinente como cumpleaños, vacaciones, eventos del día, atender a proveedores,…
También nuevos videos incorporados de interés o la indicación de cuál fue el último visto para poder retomarlo desde ahí y no perderte.
6. Login, Register, Reset password & Flow
Aunque es cierto que antes he dicho que lo primero que diseñé fue el sidebar, en realidad fueron las pantallas de login y register.
Minimum Fetures: Homepage Login-register process.
He creado unas pantallas sencillas con los inputs necesarios para entrar en la aplicación y previamente, realizar el registro y la pantalla de reset password.
Login
En esta pantalla el usuario, una vez se ha registrado, encontrará los inputs necesarios para acceder a su perfil: “employee Id or email” y “password”.
En caso de no haberte registrado previamente o de no recordar la contraseña puedes acceder a estas pantallas para registrarte o resetear la contraseña.
Register
Por lógica debe ser la primera pantalla que un nuevo usuario verá. Si no pasa por ésta pantalla jamás accedería al resto de secciones, incluida la de login.
Se compone de 3 inputs en los que el usuario deberá de insertar el email y una nueva contraseña que deberá de repetir para asegurar al usuario de que es la clave que desea, sin ningún tipo de error.
Reset Password
Ésta pantalla puede que nunca la visite un usuario, solo los despistados.
Muy similar a la anterior, sin el email, deberá de insertar una nueva contraseña y repetirla para confirmar que la ha escrito dos veces por igual asegurándose así, que es realmente la contraseña deseada.
Flow
Homepage Login-register process
7. Componentes
La componetización y la creación de átomos y moléculas no solo optimizan el peso del archivo y mejoran el rendimiento, sino que también facilitan la gestión y actualización del diseño, asegurando consistencia y eficiencia en todo el proyecto.
Para esto, he creado en Figma una página de “💄Components” donde encontrarás todos estos elementos.
FIGMA
Ver en Figma: https://www.figma.com/design/YQpjnquqS8hyhh6Uhc64Ud/Pans%26Company?node-id=1-7&t=6nBdPAs5jWExcSUZ-1
7.0 Colors
7.0.0 colour-main-light
Color muy presente a lo largo de las secciones, es un color claro, similar al blanco pero sin llegar al extremo y es utilizado a modo de background del contenido de las pantallas. Permite que los elementos que hay sobre ella se visualicen mejor.
7.0.1 colour-main-off
Proceden de “colour-main-on” y se utilizan para indicar los selected o active de los elementos button que aparecen a lo largo de las distintas secciones de la intranet.
7.0.2 colour-main-on
El color primario sería “colour-main-on”. Es el color con mayor fuerza y es el color amarillo procedente del logo de Pan & Company.
7.0.3 colour-main-brown
También procede del logo de Pans & Company. Se utiliza como divisor en elementos con un background “colour-main-off”
7.0.4 colour-main-dark
Colour-main-dark-900 procede del color de la tipografía del logo de Pans & Company. El resto proceden de éste y son todos utilizados para componer el topbar y sidebar de las distintas secciones así como backgrounds de inputs y otros.
7.0.5 colour-main-black
Muy poco presente que se utiliza para asignar el color de algunos elementos de tipo texto.
7.0.6 colour-main-alert
Lo utilizamos para el botón de “cerrar sesión” así como para alertar al usuario de la recepción y cantidad de mensajes o notificaciones.
También lo utilizaremos en los inputs de login o register para indicar fallos a la hora de completar la información para inicar sesión.
7.1 Icons
Iconos que utilizaremos para componer botones y otros elementos.
7.2 Members
Componentes atómicos que ayudarán a formar distintos elementos como son los miembros de los chats o de la sección de “Shift Schedule”.
7.3 Buttons
Botones que componen distintos elementos, como sidebars, shift schedule o distintos tipos de secciones entre otros.
7.4 Members Item
Elementos del chat entre otros. Los elementos están prototipados y funcionarán con variables y variantes.
7.5 Sidebar Container | Submenu Sidebar | Chat Sidebar
Distintos sidebars que encontramos a lo largo de las secciones prototipados y asignados con variables y variantes.
7.6 Topbar Container
Variants de los distintos tipos de topbar que encontramos a lo largo de las secciones, tanto para perfiles de miembros del staff como de los managers.
7.7 Schedule Card
Schedule compuestos con variants para asignar tipos de turno (mañana/tarde) que ha sido compuesto con distintos elementos atómicos como por ejemplo el mencionado anteriormente “members”.
7.8 Schedule Members
Estos se utilizarán para componer los elementos del chat.
7.9 Login & Register Inputs
Componetizamos los elementos input de los formularios de registro y acceso para especificar los distintos tipos de error o éxito entre otros, como visualizar la contraseña.
7.10 Login & Resgiter & Reset
Composición final para cada una de las distintas situaciones con las que puede encontrarse un usuario a la hora de realizar el registro, acceso del inicio de sesión o, a la hora de modificar el password.
7.11 Summary
Imagen a modo resumen de los distintos componentes y prototipados de los elementos de forma individual para mostrar de un modo correcto su flujo de funcionamiento.
