SETTE Tecnologia: Service Desk
Service Desk SaaS: portal del colaborador para abrir tickets y agendar atención, central del equipo de TI con cola, SLA y agenda, y app mobile, del UX al back-end
- Mi rol
- Diseñador UX/UI · Desarrollador Full Stack
SETTE TecnologiaContexto
SETTE Tecnologia necesitaba organizar el soporte de TI que presta a sus colaboradores. Creé el Service Desk desde cero como producto SaaS: diseñé la experiencia en Figma y desarrollé todo el sistema, de la base de datos a las pantallas web y móviles.
Desafío
Las solicitudes de soporte llegaban por correo, mensaje y en el pasillo, sin protocolo, sin plazo y sin responsable. Quien pedía ayuda no sabía cuándo sería atendido; el equipo de TI no veía toda la cola, no sabía qué plazos estaban por vencer ni quién estaba sobrecargado. El sistema tenía que servir a dos públicos con necesidades opuestas, el colaborador que quiere resolver rápido y el equipo que necesita control, y nacer listo para atender a varias empresas con los datos separados.
Portal del colaborador
El lado de quien pide ayuda: abrir un ticket, reservar un horario y saber en qué punto está, sin tener que preguntarle a nadie.
- 01 / 07
Visión general
La primera pantalla responde "¿cómo están mis pedidos?": tickets abiertos, en atención, esperando la respuesta del colaborador y resueltos en el mes, los tickets recientes con estado de color, la próxima atención agendada y atajos a los problemas más comunes.
- 02 / 07
Agendar atención
Tres pasos en un solo lugar: el tipo de soporte en cards (hardware, software, red y acceso, correo), la descripción y los adjuntos, y al lado el calendario que solo muestra los horarios libres de quien atiende esa categoría, con el técnico responsable, la duración estimada y la elección entre videollamada o presencial.
- 03 / 07
Reserva confirmada
El protocolo, la fecha, el tipo de atención y la técnica responsable en un solo resumen, con el aviso de que la confirmación llega por correo y de dónde seguir el ticket.
- 04 / 07
Mis tickets
Todos los pedidos con búsqueda por protocolo o asunto, filtro por estado y contadores arriba. Cada fila muestra categoría, fecha de apertura, estado y prioridad, y el "esperando por ti" en ámbar deja claro cuándo la pelota está del lado del colaborador.
- 05 / 07
Detalle del ticket
La descripción y los adjuntos, la línea de tiempo de la atención (creado, triaje, en análisis), quién es el responsable y cuándo llega la próxima actualización, y el campo para conversar con el equipo sin salir del ticket.
- 06 / 07
Base de conocimiento
Antes de abrir un ticket, la respuesta puede ya existir: búsqueda por asunto, sistema o mensaje de error, artículos por categoría y los más leídos con el tiempo de lectura. La búsqueda entiende el sentido de la frase, no solo las palabras exactas.
- 07 / 07
Notificaciones
Cada cambio en el ticket se convierte en un aviso: actualización del equipo, triaje, agendamiento confirmado, cierre y pedido de más información. Al lado, el colaborador elige qué quiere recibir.
Central del equipo de TI
El lado de quien atiende: la misma base de datos, otra pregunta. En lugar de "¿cómo está mi pedido?", "¿qué me necesita ahora?".
- 01 / 02
Visión general de la operación
Tickets abiertos, en atención, SLA en riesgo y agendados del día arriba. La cola muestra solicitante, prioridad, responsable y el tiempo que falta para que venza el SLA, en rojo cuando aprieta. Al lado, la agenda de hoy y la carga de cada técnico, para redistribuir antes de que alguien se sobrecargue.
- 02 / 02
Agenda del equipo
La semana entera en una grilla de horarios, con cada técnico en un color y el asunto en cada bloque. Arriba, las atenciones de hoy, el equipo disponible y lo que espera confirmación; en la grilla, el conflicto de horario aparece en rojo antes de convertirse en problema.
En el celular
Para quien está lejos del escritorio: abrir un ticket en dos toques, ver el avance de los pedidos y las próximas atenciones agendadas.
Arquitectura
Una arquitectura SaaS pensada para crecer: varias empresas en el mismo sistema con los datos aislados en la base, plazos que no pueden depender de que alguien mire la pantalla y el mismo back-end sirviendo la web y la app.
Reglas que el producto garantiza
Las reglas importantes viven en el back-end y en la base de datos, no solo en la interfaz:
En números
Un producto con dos lados y el mismo sistema visual en la web y en el celular.
10
pantallas desktop en alta fidelidad
3
pasos para agendar una atención
4
perfiles de acceso con permisos propios
Sistema Visual
Un visual de herramienta de trabajo: menú lateral azul marino, fondo gris azulado y cards blancos, el azul solo para la acción principal y un color para cada estado, para que el ticket se lea de lejos.
Paleta
Azul Acción
#335CF5
Botones, enlaces e ítem activo
Marino
#131F38
Menú lateral
Morado Atención
#5145CD
En atención y agendado
Ámbar
#B2660F
Esperando por ti y prioridad media
Rojo SLA
#BF2E38
SLA en riesgo y prioridad alta
Verde Resuelto
#148F61
Resuelto y prioridad baja
Tipografía
Inter
400 / 500 / 600 / 700
Fuente única: títulos, tablas y números
Aprendizaje
El mismo ticket necesita dos lecturas: para el colaborador, "¿cuándo me van a atender?"; para el equipo, "¿cuánto tiempo falta?". Diseñar los dos lados juntos y llevar las reglas críticas (aislamiento entre empresas, SLA y conflicto de agenda) a la base de datos hizo que el producto fuera confiable sin depender de cuidado manual.
Otros proyectos para conocer.
SaaS · JurídicoValverde Jurídico
Sistema SaaS de gestión jurídica para un despacho de abogados: clientes, procesos, agenda, portal del cliente y sitio institucional, del UX al back-end
Ver proyecto
SaaS · Gestión de InventarioMimos Papelaria
Sistema SaaS de gestión de inventario para papelería: productos, movimientos, categorías, proveedores e informes, con UI/UX, front-end en React y back-end
Ver proyecto
Educación y GobiernoTrilhas do Futuro
Plataforma educativa del Gobierno de Minas Gerais
Ver proyecto