CLIENTE
SDL
El principal proveedor de servicios lingüísticos basados en tecnología, gestión de contenidos y propiedad intelectual del mundo.
Nota: SDL fue adquirida recientemente por RWS. Es la mayor adquisición en el mercado de la traducción en todo el mundo.
PRODUCTO
SDL SLATE
Una app que proporciona el servicio de traducción online para empresas, con traducción basada en IA y respaldada por traductores.
Nota: SDL SLATE está en proceso de cambiar su nombre a Translation on Demand.
El equipo
Trabajo en un equipo multifuncional. Como parte del equipo de UX, trabajo junto con el equipo de producto del cliente en la definición y diseño de su producto. Trabajamos en un entorno ágil con sprints de 3 semanas.
Estoy involucrada en la Investigación, Diseño de la UX, Diseño Visual, Prototipado y Documentación UX.
Para destacar algunas de mis contribuciones al proyecto:
- crear y mantener la biblioteca de componentes utilizando el enfoque de Atomic design
- adaptar los diseños para integrar la localización
- rediseñar la página de Planes de suscripción
- consolidar los mensajes de error
- rediseñar el área principal donde se muestran todos los pedidos
Mejorando la experiencia del usuario en el área de pedidos
Mejorando la experiencia del usuario en el área de pedidos
EL PROBLEMA
El diseño actual tiene muchos espacios en blanco, lo que desplaza el contenido hacia abajo. Esto provoca que los usuarios tengan que hacer mucho scroll para encontrar el pedido que buscan.
Limitaciones técnicas:
La paginación, la clasificación y la búsqueda no son posibles en este momento.
Requisitos del negocio:
No podemos separar el área Crear pedido del área Todos los pedidos; ambos deben mostrarse en la página de inicio.
EL OBJETIVO
El objetivo era mejorar la experiencia del usuario a la hora de buscar pedidos, crearlos o lanzarlos.
Descubrimientos
Los usuarios necesitan encontrar fácilmente el pedido que buscan. Tienen que poder visualizar tantos pedidos como sea posible sin necesidad de hacer scroll.
*No puedo compartir más detalles sobre la investigación de usuarios ya que es información protegida.
Primer enfoque
Se planteó un primer enfoque donde los filtros se convirtieron en un mini dashboard. Al hacer clic en una tarjeta de filtro, la sección de filtros se desplazaría hacia arriba donde quedaría fija, empujando el área de Drag & drop hacia arriba. Los pedidos harían scroll por debajo de la sección de filtros, manteniendo los siempre visibles.
Además, se propuso codificar los estados por colores para hacerlos más reconocibles de un vistazo.
El problema: aún así sólo hay 3 pedidos visibles al mismo tiempo.
Me encargué de esta tarea a partir de este momento.
MI PROCESO
Mi proceso es diferente en diferentes proyectos y está determinado por muchos factores, como los objetivos del proyecto, las necesidades comerciales, la complejidad del problema, el tiempo, etc. Aquí describiré mi proceso para resolver este problema.
Analizar / Idear / Diseñar / Iterar
Todas las acciones importantes tienen lugar en la misma página.
SITE MAP
Empecé analizando el mapa del sitio actual para encontrar posibles mejoras.
La página de inicio es donde conviven el área Crear pedido y el área Todos los pedidos. Como requisito del negocio, no podemos cambiar esto.
Además, cuando un usuario abre un pedido, este se despliega, permaneciendo en la misma página. Esto provoca problemas de rendimiento.
Acciones del usuario que tienen lugar en la misma página:
- Crear pedido
- Buscar un pedido específico
- Elegir el tipo de servicio
- Lanzar el pedido
- Descargar pedidos traducidos
Podemos mejorar los problemas de scroll y de rendimiento abriendo los pedidos en una página separada.
Área de crear pedidos
El área de Crear pedidos ocupa mucho espacio vertical.
El texto con la información sobre cómo se cobran los pedidos tiene problemas de legibilidad y crea un gran espacio en blanco a su derecha.
Podemos ganar algo de espacio vertical reduciendo el ancho del área de Drag & drop y así para mover el texto a su derecha. Al establecer la longitud de línea adecuada mejoramos la legibilidad del texto.
Después de iterar en el diseño, la propuesta final es usar iconos de ayuda y mostrar el texto en un overlay.
Área de Todos los pedidos
Actualmente los pedidos se muestran en forma de tarjetas. Estas ocupan mucho espacio, por lo que no es posible visualizar más de 3 pedidos a la vez.
Nuestros usuarios están en el modo de búsqueda y el nombre del pedido es una de las cosas más importantes para ellos. En una lista podrían ver fácilmente diferentes elementos textuales. Pero tenemos usuarios que ya están acostumbrados a navegar por las tarjetas.
Para satisfacer ambos comportamientos, proponemos la posibilidad de alternar entre dos vistas diferentes, lista y cuadrícula.
La fila de la tabla
Para reducir la altura, necesitamos mostrar solo la información más importante. El resto se puede encontrar una vez que el pedido esté abierto. Esto también nos ayuda a reducir la carga cognitiva.
En el primer enfoque, se propuso un código de color para los botones de filtros. Hemos aplicado esto a los chips de estado y también a los encabezados de los pedidos.
Al haber propuesto que los pedidos se abran en páginas dedicadas, en lugar de desplegarlos en la misma página, esta tarea implicó también el diseño de estas páginas. Esto significa diseñar la página del pedido abierto en 4 etapas diferentes según el estado del pedido: Analizando, Listo para lanzar, Traduciendo y Completado.
También implicó diseñar la navegación desde el pedido abierta a la lista de pedidos en función del estado actual del pedido y el filtrado aplicado en la lista de pedidos.
Además, he creado todos los componentes nuevos para la biblioteca con el enfoque de Atomic design. Esto nos ayuda a crear los flujos mucho más rápido.
El diseño aprobado
Recibimos comentarios muy positivos de nuestros usuarios sobre el nuevo diseño.
Working on this task I learnt how
