Presentamos v5: la nueva interfaz de ThriveDesk
Reconstruimos la interfaz de la app de ThriveDesk sobre nuestro propio sistema de diseño. Organiza la navegación y la bandeja de entrada a tu manera, cambia de bandeja desde la barra superior, escribe en un nuevo editor de respuestas y activa el modo oscuro.
La nueva interfaz de la app forma parte de nuestra renovación de marca. Nuestro objetivo es que ThriveDesk sea la mejor plataforma de atención al cliente para equipos de ecommerce y SaaS, así que reconstruimos la interfaz desde cero. Antes de empezar, hablamos con clientes sobre lo que les hacía perder tiempo. El resultado es una app que puedes personalizar desde la base. Además, es más rápida y más fácil de aprender.
v5 ya está disponible para todas las cuentas, en todos los planes. No tienes que configurar nada.
Por qué la reconstruimos
Desde nuestro primer lanzamiento, el backend tuvo reglas estrictas de pruebas unitarias. El frontend no, y con el tiempo eso dejó mucha deuda técnica.
El frontend cambió muchas veces. La versión 1 usaba Bootstrap. Después pasamos a Material Design y mantuvimos parte de Bootstrap. En v3, añadimos Tailwind CSS encima de ambos. Eso reemplazó muchas partes, pero quedaron algunos componentes grandes. Luego usamos Ant Design para algunos componentes, y v4 pasó por completo a PrimeNG. PrimeNG funcionó bien hasta que cerró su código y añadió una licencia comercial.
Teníamos dos opciones: mantener una copia de la última versión de código abierto de PrimeNG o crear nuestro propio sistema de diseño. Creamos el nuestro. La programación agéntica lo hizo posible en poco tiempo.
Cómo la construimos
Antes de escribir una sola línea de código, recogimos los comentarios de nuestros clientes. Escribir código es fácil. Una buena interfaz necesita entender bien los problemas de tus clientes.
Creamos nuestro propio sistema de diseño basado en tokens, inspirado en shadcn, y migramos los componentes uno por uno. Empezamos por los primitivos y después seguimos con los componentes híbridos y de un solo uso. Cada componente y cada cambio pasó por pruebas end-to-end y unitarias. Con la programación agéntica, la migración completa llevó dos semanas.
Los frameworks de interfaz anteriores ya no están. Ahora todo el código de la interfaz es nuestro. Esta es la diferencia de velocidad:
Personaliza la navegación principal
Diseñamos v5 para que puedas personalizar cada parte. No hay dos equipos de soporte que trabajen igual, y una pantalla llena de herramientas que nunca abres te frena. En v5, tú decides qué muestran la navegación principal y la barra lateral de la bandeja de entrada, y en qué orden. También eliges cómo se ve la lista de tickets y qué ancho tiene cada barra lateral. Mantén a la vista las herramientas que usas cada día y aparta el resto.
Haz clic derecho en la navegación principal y elige Icon only o Icon with name. Icon with name es la opción predeterminada. Para ver más opciones, selecciona Customize.
Activa o desactiva cada sección y arrástralas al orden que quieras. Si no abres Workflow o Report cada día, desactívalos. Puedes volver a activarlos cuando quieras.
Personaliza la barra lateral de la bandeja de entrada
Muchos nos pidieron controlar la barra lateral de la bandeja de entrada. Ahora la controlas por completo. Si no necesitas una carpeta o una sección, desactívala. Arrastra el resto al orden que quieras. Los elementos que selecciones se quedan en la barra lateral y los demás pasan a More.
Elige cómo se muestran los tickets
También puedes ajustar cómo se ve la lista de tickets. Agrupa los tickets por prioridad, estado o etiqueta. Elige el orden y qué propiedades se muestran en cada ticket.
Configura la navegación de tickets
Cuando abres un ticket, la lista de tickets que aparece al lado tiene su propio orden y sus propios ajustes de visualización. Elige filas compactas o expandidas y las propiedades que quieres ver, como el estado, la prioridad, las etiquetas o la última respuesta. Para pasar al siguiente ticket, selecciónalo en la lista. Para concentrarte en una sola conversación, oculta la lista.
También puedes arrastrar el borde de cada barra lateral para ajustar su ancho al tamaño de tu pantalla. En una laptop, estrecha las barras laterales para que la conversación tenga más espacio.
Cambia de bandeja de entrada desde la barra superior
Todo en ThriveDesk pertenece a una bandeja de entrada. El menú de bandejas estaba antes en la barra lateral y, si tienes muchas bandejas, era fácil olvidar en cuál estabas.
El selector de bandejas ahora está en la parte superior de la app. Siempre ves en qué bandeja estás y puedes cambiar de bandeja más rápido. El selector también muestra el número de tickets de cada bandeja, así sabes cuál necesita tu atención.
Resuelve tus tickets más rápido
El botón Mine, junto al selector de bandejas, muestra los tickets que tienes asignados en todas las bandejas. Selecciona un ticket para abrirlo. Para que la lista sea corta, muestra un máximo de 5 tickets.
Nuevo editor de respuestas
Reconstruimos el editor de respuestas desde cero. Ahora funciona con bloques, como Notion. Escribe / para abrir el menú de bloques y elige texto, un encabezado, una lista con viñetas o numerada, o una cita. No tienes que dejar el teclado para dar formato a una respuesta, así que las respuestas largas con pasos o secciones se escriben rápido y tu cliente las lee con facilidad.
Para cambiar la altura del editor, arrastra la barra de su parte superior. Un editor más alto muestra más de tu respuesta. Hazlo bajo para tener la conversación a la vista mientras escribes, o alto cuando escribas una respuesta larga.
Vuelven las notificaciones en la app
Si un compañero de equipo te menciona o te asigna un ticket y no ves el correo, ahora la app también te avisa. Selecciona el icono de notificaciones arriba a la derecha para verlas. Abre la pestaña Mentioned para ver solo las conversaciones donde alguien te necesita, o selecciona Mark all as read para vaciar la lista.
Plantillas de automatización
También rediseñamos cómo creas automatizaciones. Cuando creas un nuevo workflow, empieza desde cero o desde una plantilla. Cada plantilla muestra una vista previa de cómo funciona. Si necesitas una plantilla que no está, avísanos.
Ajustes organizados
Revisamos cada pantalla de ajustes y organizamos los ajustes en tarjetas, grupos y pestañas. Ahora son más fáciles de encontrar y siguen un orden más lógico que antes. Conectar una dirección de correo a una bandeja de entrada también es más sencillo.
Modo oscuro
Dicen que no eres una startup de verdad hasta que tu app tiene modo oscuro. Nosotros también lo queríamos, pero los frameworks de componentes anteriores nos lo impedían. Ahora que todo el código de la interfaz es nuestro, podemos construir lo que queramos.
Para cambiar el tema, selecciona tu icono de perfil arriba a la derecha. Después elige System, Claro o Oscuro.
Creamos cada píxel de esta interfaz desde cero, pero mantuvimos los flujos de trabajo que ya conoces. Puedes seguir trabajando como antes. Esta interfaz también es la base de nuestro siguiente paso: una plataforma de atención al cliente totalmente agéntica para ecommerce.
Abrir ThriveDesk
