Ir al contenido
Componente de calendarioIsotipo de PlayvoxComponente MediaPlayerAlertas y mensajes

Playvox Design System

Proyecto
Producto digital
Cliente / Agencia
Playvox / Pannonica
Año
2018 - 2021
Rol
Product - UI - UX , Branding, Design System

Llevando al siguiente nivel un producto digital exitoso para competir con jugadores más grandes

Playvox es una plataforma de workforce engagement para equipos de atención al cliente. Cuando me sumé como consultor de diseño, ya tenía usuarios reales y un negocio en crecimiento, pero había crecido sin un equipo de diseño ni un sistema que mantuviera su interfaz unificada. Trabajé en la creación del sistema que le dio al producto la consistencia y la escalabilidad que necesitaba para dar ese siguiente paso.

Una pantalla del dashboard de Reports de antes del rediseño, con filtros de scorecard, métricas resumen y un gráfico de desempeño, en una interfaz verde oscuro.
Una exploración temprana de UI, probando cómo se vería la nueva base visual en una pantalla real.

Una nueva base para el diseño visual. La identidad visual del producto, desde el logo hasta sus colores, no había evolucionado al ritmo del negocio. Antes de empezar cualquier trabajo de interfaz, Playvox necesitaba una base visual lo suficientemente sólida como para construir un design system sobre ella.

El logo de Playvox redibujado sobre una grilla diagonal, mostrando la construcción geométrica detrás de la marca "V" verde.

Pantallas sin un sistema detrás. Los mismos patrones se comportaban distinto de una pantalla a otra, y la interfaz se sentía inconsistente se la mirara por donde se la mirara. El producto había crecido pantalla por pantalla, sin componentes compartidos, una escala tipográfica o una lógica de color sobre la cual construir. El desafío era convertir eso en un design system capaz de sostener todo el producto, de forma consistente y a escala.

Un panel verde oscuro del Almendra Design System con especificaciones tipográficas, incluyendo una grilla base, con texto de ejemplo alineado a la grilla.

Una empresa sin madurez en diseño. El único trabajo de diseño que se hacía estaba más cerca del marketing que del producto, sin injerencia en las decisiones y sin ningún proceso de diseño integrado al flujo de trabajo del equipo. Elevar la madurez de diseño de Playvox, no solo su interfaz, era tan parte del objetivo como el sistema en sí. En nuestras primeras exploraciones, buscamos un lenguaje que se sintiera profesional pero también cercano al equipo de Playvox, manteniendo el estilo de ilustración y dándole más relevancia.

Una pantalla de creación de cursos con una ilustración de una persona alcanzando un libro, junto a un botón "Create New Course" y un menú de cuenta de usuario.

De la base al componente

Llevar a Playvox al siguiente nivel significó construir desde cero: una base visual lo suficientemente sólida como para diseñar sobre ella, un sistema capaz de sostener todo el producto de forma consistente, y los componentes que hicieron que ese sistema fuera usable día a día.

El nuevo isotipo y logotipo de Playvox en verde, sobre fondo oscuro.
Un nuevo logotipo: mantuvimos el concepto original, pero mejoramos la tipografía y la construcción del símbolo para lograr una marca más profesional y mejor balanceada.
Una grilla de círculos de colores superpuestos sobre fondo verde oscuro, con la paleta de colores secundaria creada para complementar el verde principal de la marca.
Nueva paleta de colores secundaria para complementar el verde principal.
Componentes de UI sobre fondo oscuro: filtros de equipo y fecha, un panel de highlight con un campo de comentario, y un selector de calendario.
Dropdowns, filtros, text areas y más.
Un componente de tabla oscura que lista disputas de evaluaciones, con columnas para analista, agente, árbitro, fecha y estado.
Componentes de tabla
Documentación con ejemplos correctos e incorrectos de la barra de filtros, seguida de especificaciones de tamaño y espaciado para un componente de usuario en distintos tamaños.
La documentación no incluye solo los componentes, sino también instrucciones de uso y medidas.
Componentes de mensajes y alertas en distintos estados, éxito, error, información y advertencia, cada uno con un ícono y texto de ejemplo, sobre fondo oscuro.
Mensajes y alertas
Un componente de reproductor de video sobre un fondo de naturaleza, con controles de reproducción, una línea de tiempo con marcadores y un panel para agregar un marcador en un momento específico.
Reproductores multimedia para videos y cursos de texto para capacitar usuarios.

Diseño, construido para quedarse

Al finalizar la consultoría, Playvox contaba con un design system implementado y alineado con el código. Pero lo más importante fue un equipo de diseño real: la empresa había pasado de un solo diseñador más cerca del marketing que del producto, a un equipo de UX completo y un director de diseño, con procesos de diseño integrados a la forma de trabajar de la compañía. Playvox fue adquirida más tarde por NICE, y hoy opera como Playvox by NICE dentro de la plataforma NICE CXone.

La portada del sitio del Almendra Design System, con una ilustración de una persona saltando y dos tarjetas que enlazan a las secciones Company y Brand.
Portada temprana del Almendra Design System. Para lograr adopción y visibilidad dentro de la empresa, creamos un sitio web para el design system. 'Almendra' fue el nombre elegido por el equipo interno por sus raíces colombianas y su conocimiento de la cultura del café.

Equipo

Playvox: Cliente / Desarrollo / Ilustraciones / UI - UX.

Pannonica: Agencia de consultoría UX, Content Design.

Ezequiel Salatino: Design System / Product - UI - UX Design / Branding / Consultoría de diseño.