Protegido: Un panel de analíticas ético para comprender que buscan los usuarios
Protegido con contraseña
Introduce a continuación la contraseña para ver este artículo protegido:
Protegido: Modelo de suscripciones basado en uso
Protegido con contraseña
Introduce a continuación la contraseña para ver este artículo protegido:
Protegido: Un selector visual para configurar el buscador sin código
Protegido con contraseña
Introduce a continuación la contraseña para ver este artículo protegido:
Entrenador de idiomas
Use case
Entrenador de idiomas
Rediseño y escalabilidad para la plataforma de aprendizaje de idiomas 8Belts. Adaptando una metodología exclusiva para chino, aplicable a cualquier idioma.
Producto
Plataforma de elearning, que brinda a los estudiantes un método para aprender un nuevo idioma
Empresa
8Belts, 2017. Proporciona a estudiantes una metodología propia enfocada en aprender a hablar un nuevo idioma
Lo que hice
Discovery, UX designer, UI manager
Herramientas
Adobe XD (Fireworks), Basecamp, Google Sheets
Contenido
El proceso de diseño que seguimos, siguió un modelo de cascada, organizando cada fase de manera secuencial, desde la investigación inicial hasta la implementación final. En este caso el product manager tenía una visión clara de lo que debería ser la herramienta final y no se preveían cambios de base en la estructura inicial.
Como diseñadora de producto formé parte del equipo tecnológico de PXSP compuesto por una senior lead UX, front-ends, back-ends y product manager. En una fase posterior se sumó un equipo de UI designers que me encargué de supervisar.
Diagrama de Gantt.
01. Investigación
Recolección de requisitos
La plataforma se basaba en la enseñanza especializada del chino mandarín hablado y debía adaptarse para atraer a un público más amplio con idiomas más demandados como inglés, alemán y francés.
La metodología original, además de ser compleja, estaba impregnada de elementos culturales chinos, desde los nombres de las secciones y elementos, hasta las referencias visuales, lo que hacía difícil su transición a otros idiomas.
Objetivos del proyecto
- Conferir universalidad a la plataforma.
- Facilitar la usabilidad de una metodología compleja.
- Reducir el «pánico al cambio»: Lograr que los usuarios actuales adoptaran la nueva plataforma sin sentirse desconectados o perdidos.
Antigua plataforma de aprendizaje de chino.
User Personas
Como parte del análisis inicial, definimos dos User Personas representativas basadas en los objetivos de los usuarios de 8Belts. Aunque su influencia en el diseño final fue limitada, ayudaron a contextualizar el reto inicial de rediseñar la plataforma.
User Personas de 8Belts.
Benchmark y análisis competitivo
Estudiamos otras plataformas líderes en aprendizaje de idiomas como Duolingo, Busuu, Lingvist, Babbel y Rosetta Stone entre otras, para identificar patrones exitosos en la enseñanza de múltiples idiomas.
Resumen de las características proncipanes de las plataformas líderes.
02. Conceptualización
Arquitectura de la información
Para garantizar una navegación eficiente y centrada en el usuario, diseñamos un mapa de navegación que actúa como eje principal, del cual diversifican otras navegaciones específicas.
User flows
Además, desarrollamos varios user flows para identificar cómo los estudiantes interactuarían con las particularidades de la metodología.
Mapa de navegación para dar estructura a la metodología.
Definición de alcance
En esta fase establecimos un alcance que incluyera estos tres pilares descubiertos en la investigación:
- Rediseñar las interfaces para que sean neutras culturalmente.
- Garantizar que la webapp sea completamente responsive.
- Crear un flujo más intuitivo para los ejercicios.
- Mantener los elementos de la metodología original.
Listado de pantallas compartido en Basecamp.
03. Implementación y validación
Desarrollo de producto
El rediseño de la plataforma se fue diseñando de manera colaborativa con el equipo de desarrollo y validada con los stakeholders mediante prototipos.
Wireframes
A través de bocetos y esquemas
- Dimos forma a posibles propuestas y exploramos cómo adaptar elementos a una interfaz universal.
- Se creó un sistema gamificado para mostrar gráficamente el progreso del usuario, manteniendo la lógica del mapeo del idioma y la repetición espaciada.
- Planteamos una estructura de maquetación adaptada a dispositivos móviles.
- Diseñamos mensajes tipo tutorial para explicar las nuevas funcionalidades y comunicar los next steps para los usuarios. Con ello, actualizamos todos los textos de la plataforma.
Creamos flujos de usuario para las tres secciones principales de la metodología (expresiones, diálogos y conversaciones):
1 y 2) Ejemplo de sketching del perfil de usuario.
3 y 4) Esquema del diseño responsive en la webapp, y tutorial de inicio.
1/3
Ejercicio uno: Aprendizaje de expresiones
Esta sección fue rediseñada mejorando el flujo de aprendizaje y revisión, permitiendo a los usuarios gestionar el proceso de repetición espaciada. Las mejoras fueron:
- Los usuarios pueden interactuar con el audio y reproducir las expresiones a velocidad normal o lenta, para mayor flexibilidad.
- Autoevaluación más intuitiva que ajusta automáticamente la frecuencia de reaparición.
- Una interfaz que prioriza el contenido esencial (frases y sus traducciones) para evitar distracciones.
Después VS Antes. Vista de la sección de aprendizaje de expresiones.
2/3
Ejercicio dos: Repaso de diálogos
Rediseñamos la interfaz para agilizar el repaso de diálogos, basado en tareas y progreso claros. Funcionalidades destacadas:
- Los diálogos ahora incluyen pistas visuales que ayudan a los usuarios a conectar las expresiones con interacciones y hacer así un seguimiento secuencial y visual.
- Añadimos una opción para ocultar o mostrar las transcripciones según la preferencia del usuario, fomentando un aprendizaje flexible.
- Organizamos la información en pestañas clasificadas por estados para facilitar la realización de tareas y a su vez, visualizar el progreso.
Después VS Antes. Vista de la sección de diálogos.
3/3
Ejercicio tres: Conversaciones
El flujo de la práctica conversacional fue diseñado prácticamente de cero, con unos pasos a seguir para reservar una conversación. Añadimos las funcionalidades:
- Los usuarios pueden elegir entre diferentes nativos pudiendo filtrar por nombre, disponibilidad o temas de conversación.
- Programar las sesiones directamente y modificarlas, todo en un mismo flujo.
- Panel de conversaciones agendadas y recordatorios desde cualquier punto del dashboard.
- Añadimos una pantalla emergente con el feedback y la puntuación después de cada conversación.
Después VS Antes. Vista de la sección de conversaciones.
04. Impacto
Resultados y logros
Pasamos de tener un producto con un codebase e interfaz de usuario obsoleto, a tener 4 productos funcionales, usables e interrelacionados entre sí. Lo que facilitó el aprendizaje de idiomas a miles de estudiantes atraídos por los nuevos idiomas y la interfaz renovada, logrando los objetivos marcados:
- Incremento en la adopción de usuarios nuevos.
- Mejora en la retención de usuarios existentes, destacando la efectividad del diseño responsive.
- Reconocimiento por parte de los usuarios de los beneficios de una metodología más clara y facil de entender que antes.
- Las métricas de progreso de los usuarios en el curso de 8belts aumentaron notablemente tras la implementación de las mejoras.
Primer proceso completado desde la fase de discovery hasta la de delivery.
Takeaways
Conclusiones
Aunque el rediseño fue un éxito en términos de universalizar la plataforma y hacerla más accesible, sentí que en el proceso se perdió parte de la personalidad única que la hacía especial.
Los elementos culturales del chino, que inicialmente parecían ser una barrera, también aportaban una riqueza y un carácter distintivo.
Hubiera sido interesante (y un desafío) preservar esa esencia mientras mejorásemos la plataforma haciéndola más usable y con una experiencia pedagógica más fácil y entendible.
Esta reflexión me hizo darme cuenta de la importancia de equilibrar la universalidad y la singularidad en los productos digitales, buscando soluciones que no comprometan lo que los hace únicos.
Durante uno de los eventos de 8Belts.
Cuéntame qué te ha parecido por favor, me encanta conocer otros puntos de vista.
Laboratorio Lingüístico
Use case
Laboratorio Lingüístico
Herramienta interna diseñada para que los lingüistas puedan crear material de aprendizaje de idiomas para la plataforma 8Belts. Transformamos procesos manuales en flujos eficientes y colaborativos.
Producto
Aplicación de aprendizaje web que brinda a los estudiantes un método para aprender un nuevo idioma
Empresa
8Belts, 2017. Proporciona a estudiantes una metodología propia enfocada en aprender a hablar un nuevo idioma
Lo que hice
Discovery, UX research, Design
Herramientas
Adobe XD (Fireworks), Basecamp
Contenido
El proceso de diseño que seguimos, siguió un modelo de cascada, organizando cada fase de manera secuencial, desde la investigación inicial hasta la implementación final. En este caso el product manager tenía una visión clara de lo que debería ser la herramienta final y no había posibilidad de cambios al tratarse de una herramienta de uso interno.
Como diseñadora de producto formé parte del equipo tecnológico de PXSP compuesto por una senior lead UX, front-ends, back-ends y product manager.
Este proyecto destacó por tener un entorno de trabajo único, ya que los usuarios objetivo eran los propios compañeros del equipo lingüístico, permitiendo una comunicación constante y una comprensión profunda de sus necesidades reales.
Diagrama de Gantt.
01. Investigación
Recolección de requisitos
El proyecto comenzó con un análisis funcional del briefing y una investigación directa con los usuarios objetivo: los propios lingüistas de 8Belts. A parte de estudiar qué querían, realizamos una observación directa y participación activa con grupos específicos de usuarios para conocer qué necesitaban. Cómo lo hicimos:
Observación y contexto
Nos sumergimos en su día a día, tomando notas, croquis y fotos para hacernos una idea general de cómo los lingüistas entregan valor. En ese flujo detectamos y anotamos los problemas que identificamos en su proceso de trabajo.
Facilitamos sesiones guiadas para profundizar en sus necesidades, pero también prestamos atención a charlas informales (incluso durante descansos), que revelaron oportunidades para funcionalidades clave.
Capturando ideas: momentos del departamento lingüístico.
02. Conceptualización
User Personas
A partir del análisis del flujo de trabajo existente definimos los roles lingüistas. Esto nos permitió entender a fondo e identificar las tareas, motivaciones y frustraciones específicas de cada perfil involucrado en la creación y gestión de material didáctico.
Roles clave del laboratorio lingüístico.
Arquitectura de la información
Antes de la implementación, los lingüistas trabajaban de forma manual con hojas de Excel extensas y complejas. Una vez recopilada toda la información, la etiquetamos mediante indexación de contenidos, asignando categorías y etiquetas a los distintos elementos, lo que permitiría localizarlos rápidamente mediante un buscador.
Existen dos tipos de contenido llamados Expresiones y Diálogos. Cada unidad de contenido está formada a su vez por varias expresiones con sus respectivas traducciones y locuciones, que indexamos por idioma, tipo de archivo, tema, etc.
Taxonomía
Para dar sentido a los grandes volúmenes de datos, también necesitamos visualizar cómo están relacionados los grupos de elementos entre sí, según una estructura lógica y jerárquica. Para facilitar la navegación, agrupamos los contenidos en niveles de dificultad y dentro de esos niveles, agrupamos subniveles por temas específicos.
Hojas de Excel usadas por los lingüistas.
Diagrama de flujo.
Definición de alcance
En esta fase establecimos un alcance que incluyera estos tres pilares descubiertos en la investigación:
- Creación de la herramienta para lingüistas, que facilitara la gestión y creación de contenido; y el seguimiento de las distintas tareas.
- Adaptación de la plataforma a los diferentes roles, asegurando que cada uno tuviera funcionalidades específicas según sus necesidades.
- Colaboración en el flujo de creación de contenido, integrando un sistema de comentarios para lograr una interacción eficiente.
Síntesis
Con el alcance definido, empezamos elaborando listas detalladas de pantallas, y para cada una, definimos las funcionalidades que debía incluir y las compartimos con todo el equipo en Basecamp. Este enfoque nos permitió mantener un desarrollo organizado y alineado con todo el equipo.
Listado de pantallas compartido en Basecamp.
03. Implementación y validación
Desarrollo de producto
Cada solución de diseño fue trabajada en conjunto con el equipo de desarrollo y validada con los lingüistas mediante pruebas de usabilidad con prototipos.
Este proceso permitió iterar rápidamente, identificar mejoras y asegurar que las funcionalidades respondieran a las necesidades reales de los usuarios. De esta forma entregamos una solución de diseño muy refinada antes de su implementación final. Estas son las secciones principales:
Wireframe de la creación y edición de diálogo.
1/6
Interfaz de creación de módulos de contenido
Diseñamos una herramienta que permitiera a los lingüistas crear y editar contenido (Expresiones y Diálogos) de forma intuitiva. Este panel ofrecía control total sobre los elementos del diálogo, asegurando que se pudieran personalizar según los objetivos pedagógicos. Funciones principales:
- Edición directa de contenido, con opciones para añadir contexto, niveles de dificultad y metadatos.
- Diseño modular para organizar diálogos en bloques reutilizables y reordenables.
- Cambio del estado de progreso.
- Subir o eliminar archivos de audio.
- Agregar, editar o eliminar traduciones por intervención.
- Posibilidad de previsualizar el diálogo antes de publicarlo.
High-fidelity, creación y edición de diálogo.
2/6
Base de datos con buscador avanzado
El sistema estaba compuesto por una base de datos con una interfaz intuitiva que mostraba resúmenes clave del contenido para facilitar su identificación y exploración; donde se podía acceder a la vista deseada rápidamente mediante filtros personalizados. Características según el rol de usuario:
- Filtros personalizados: Por rol, tema, nivel de dificultad, idioma, y más.
- Resúmenes visuales por cada entrada para facilitar su identificación.
- Opciones de ordenación: Por fecha de creación, nivel, prioridad, estado, cambios recientes o por número de comentarios.
- Acciones rápidas: como editar nombre, estado, duplicar o eliminar.
- Acciones en lote: Seleccionar varios, y cambiar su estado o eliminarlos.
- Cambiar la vista: en modo lista o modo galería.
- Tabs según la ubicación: en desarrollo, publicado o descartado.
Wireframe del listado de contenido.
Vista de la base de datos de contenido.
3/6
Sistema de estados y asignación de tareas
Para mejorar la colaboración entre roles, implementamos un sistema de estados asignables que reflejaba el progreso de cada unidad de contenido, desde su creación hasta la publicación final. Funcionalidades destacadas:
- Introdujimos estados asignables para cada unidad de contenido.
- Los lingüistas podían asignar tareas a otros miembros del equipo.
- Cada cambio de estado generaba notificaciones automáticas para los usuarios implicados, mejorando la comunicación entre roles.
- Visualización clara del flujo de trabajo, con filtros para priorizar tareas pendientes.
Wireframe de asignación de estados y tareas.
Vista de asignación de estados y tareas.
4/6
Sistema de comentarios
Introdujimos una función de conmentarios por cada unidad de contenido, para facilitar la discusión sobre elementos específicos. Características principales según el rol de usuario:
- Los usuarios podían comentar directamente en las distintas intervenciones.
- Añadir prioridad, para balancear la carga de trabajo.
- Asignar destinatario: individual o a un rol.
- Centro de notificaciones para mantener a los usuarios actualizados sobre comentarios o cambios de estado.
- Archivar comentarios implementados.
Vista de creación de un comentario, y del centro de notificaciones.
5/6
Change Log
El registro de cambios se diseñó para proporcionar una visión clara y detallada del historial de modificaciones realizadas en el contenido, y facilitar así, el seguimiento. Estos fueron los beneficios:
- Permitió a los lingüistas hacer el seguimiento de un contenido, consultar su fecha de creación e histórico de cambios.
- Generó reportes automatizados, facilitando el seguimiento del tiempo invertido y los resultados obtenidos.
- Ayudó a identificar patrones de mejora en el flujo de trabajo.
Vista del historial de cambios en una unidad de contenido, estadísticas y estados.
6/6
Panel de Analíticas
Como funcionalidad extra, conectamos el laboratorio lingüístico con la plataforma de aprendizaje usada por los alumnos, y desarrollamos un panel de métricas para dar visibilidad al rendimiento del contenido:
- Estadísticas sobre el uso del contenido por parte de los estudiantes.
- Datos en tiempo real sobre el progreso de media de los alumnos en cada idioma.
- Identificación de los contenidos más efectivos en el aprendizaje.
Esta herramienta complementaria a todo el sistema de creación de contenidos, ayudó a generar contenido que funcione mejor en el aprendizaje de los alumnos.
Vista del panel de analíticas del laboratorio lingüístico.
04. Impacto
Resultados y logros
Al final del proceso, entregamos una herramienta completamente funcional que transformó la forma de trabajo de los lingüistas, logrando los objetivos marcados. Pasaron de trabajar con hojas de Excel extensas y poco dinámicas a utilizar una herramienta colaborativa que optimizó su flujo de trabajo.
- Aumento de la productividad: Gracias a la automatización de tareas y la mejora en la colaboración.
- Satisfacción del equipo: El cambio fue muy bien recibido por los usuarios finales, quienes destacaron la facilidad de uso y las nuevas funcionalidades, que hicieron que su trabajo diario fuera más gratificante.
- Cumplimos los objetivos de negocio: La mejora en la gestión de contenido permitió alcanzar las metas de la empresa de manera más eficiente, pasando de soportar dos idiomas a cuatro en menos tiempo.
Takeaways
Conclusiones
Esta experiencia fue especialmente enriquecedora por poder:
- Colaborar tan de cerca con los usuarios finales, lo que garantizó un producto ajustado a las necesidades reales.
- Explorar soluciones innovadoras que combinaron productividad, colaboración y datos en un solo sistema.
- Comprobar que, sorprendentemente, funcionalidades no solicitadas inicialmente, como el panel de métricas o el registro de cambios, terminaron siendo herramientas esenciales para ellos.
- Cubrir necesidades que no sabían expresar, lo que se tradujo en un equipo motivado, al sentirse respaldado por un sistema diseñado específicamente para sus retos diarios.
- Ayudar, gracias al uso de datos, a crear contenido didáctico más efectivo para los estudiantes.
Nos grabaron un vídeo de agradecimiento ♥
Cuéntame qué te ha parecido por favor, me encanta conocer otros puntos de vista.