Rediseño de la plataforma — sitio web, selector de profesorado y paneles
Un sitio web y un panel nuevos para un mercado de clases de idiomas en directo, en torno a tres preguntas breves que llevan al alumno al profesor adecuado.
Empresa
OTeacher
Rol
Diseñador de producto
Período
2023
Tipo
Producto
Sector
Edtech · clases de idiomas en línea y en directo
Equipo
La unidad de producto: Sina y la persona responsable de producto
El sitio antiguo estaba saturado, metía la reserva en una ventana emergente y no daba a los alumnos una forma clara de elegir profesor, mientras que los profesores no tenían herramientas para gestionar sus clases. La estrategia pedía un sitio web nuevo y un panel nuevo.
El rol
El diseño de producto estuvo a cargo de Sina, junto a la persona responsable de producto: la revisión del sitio antiguo, la estructura y los flujos, el sitio web, la reserva, los paneles de alumno, profesor y administración, el sistema de diseño y la prueba de usabilidad.
El resultado
Se lanzó en 2023. Tres años después, oteacher.org sigue funcionando sobre esta base, buscador de profesores en tres pasos incluido.
Figura 01
Figura 01La página de inicio en el móvil y su selector de profesorado en tres pasos.
01Contexto
De una estrategia a un producto que la gente usa
OTeacher es un mercado iraní de clases de idiomas en línea y en directo: los alumnos eligen un profesor, a menudo empiezan con una clase de prueba y luego reservan. La estrategia que Sina elaboró con la persona responsable de producto terminó en una hoja de ruta con dos iniciativas de producto: un sitio web nuevo y un panel nuevo. La estrategia tiene su propio caso de estudio; este sigue el diseño.
El producto está en persa, así que sus pantallas se leen de derecha a izquierda. Los pies de imagen explican qué muestra cada pantalla.
02Problema
En qué fallaba el sitio antiguo
Las entrevistas de la estrategia ya habían señalado qué le faltaba a cada lado. Los alumnos querían un profesor que encajara con su objetivo y encontraban poco claro el camino de aprendizaje; los profesores querían mejores herramientas para enseñar, y más ingresos.
En febrero de 2023 Sina revisó el antiguo oteacher.org pantalla por pantalla, 69 pantallas en total, y etiquetó cada problema como visual, de estructura, de producto o de texto. Los principales:
La página de inicio estaba saturada y repetía la misma llamada a la acción.
Elegir un objetivo de aprendizaje no limitaba los resultados a ese objetivo.
La reserva, el paso más importante, estaba metida en una ventana emergente.
Las páginas interiores no tenían ruta de navegación ni forma de volver.
Las preguntas frecuentes estaban repartidas por muchas páginas en lugar de una.
Casi todos se concentran en dos momentos: elegir profesor y reservar una clase. Las decisiones de abajo empiezan ahí.
Cómo avanzó el trabajo en 2023
01
RevisiónEnero y febrero: un análisis comparativo de otros productos y, después, la revisión pantalla por pantalla del sitio antiguo y un plan de seguimiento de clics para su página de inicio.
02
ConceptosFinales de febrero: cinco ideas y después 36 pantallas de concepto del panel, el perfil, la lista de profesores y la página de inicio. Las primeras piezas del sistema de diseño llegaron antes.
03Estructura
La estructura antes que las pantallas
Sina trazó la arquitectura de información de cuatro áreas: el sitio web, el panel del alumno, el panel del profesor y la administración. Un gestor de roles da al equipo tres niveles de acceso, para roles que van de la alta dirección y la administración al soporte, la operación y las finanzas.
Después, cada funcionalidad recibió una especificación breve, enlazada a su página de Confluence para el equipo de desarrollo y seguida de «necesita revisión» a «hecho». La reserva, por ejemplo, se especificó en seis pasos: lección, tipo de clase, fecha, hora, número de sesiones y pago; en una clase grupal se suman otros alumnos.
Los recorridos principales se dibujaron como flujos:
Un profesor solicita entrar: datos, lecciones, grupos de edad y certificados; después, la revisión de un experto y una entrevista antes de la primera clase.
Un alumno se une a una clase y asiste a ella.
Se cancela una clase: por parte del alumno, del profesor o de varias sesiones a la vez.
Un usuario inicia sesión y cada rol ve solo lo que le corresponde.
Ese flujo de solicitud explica por qué la administración guarda, para cada solicitud, el enlace de la entrevista, la hora y quién la hace.
04Decisiones clave
Cinco decisiones detrás del diseño
Cada una responde a un problema de la revisión o de las entrevistas. Los capítulos siguientes las muestran en pantalla.
01
Hacer tres preguntas antes de mostrar profesores
Los alumnos no sabían qué profesor les encajaba, y la antigua página de inicio estaba saturada. Un idioma, un objetivo y un nivel acotan la lista antes de que se abra.
Alternativas
Una lista de profesores solo con filtros. Sigue a un paso para quien prefiere explorar por su cuenta.
Compromiso
Un paso más antes de ver al primer profesor, a cambio de una lista más corta y mejor emparejada.
Evidencia
El buscador sigue en la página de inicio de oteacher.org.
05Buscar profesor
Tres preguntas antes de una lista de profesores
La página de inicio hace tres preguntas cortas: qué idioma extranjero, para qué lo quiere el alumno (una entrevista de trabajo, uso general, hablar o emigrar), y en qué nivel, de principiante a avanzado. Las respuestas llevan a una lista de profesores sugeridos de ese idioma.
La lista de profesores mantiene la misma lógica en forma de filtros: idioma, objetivo, clase de prueba, hoy, el género del profesor, una fecha y una franja del día. En el móvil los filtros se abren como hojas desde abajo. En la lista hay un enlace a una consulta para los alumnos que quieren ayuda para elegir, y a un alumno que aún no tiene clases se le ofrece un profesor afín desde la lista de clases vacía.
Tres respuestas hacen el trabajo de un largo panel de filtros, y la lista conserva los filtros para quien prefiere explorar por su cuenta.
Escritorio
Móvil
Figura 02El buscador de profesores en tres pasos en la página de inicio de escritorio y en un móvil.
06Reserva
Explorar libremente, reservar en páginas propias
La nota más dura de la revisión fue sobre la reserva: el sitio antiguo la metía en una ventana emergente, y importa demasiado para eso. En el diseño nuevo la reserva ocupa sus propias páginas: una lección, el tipo de clase y un paquete, una hora en el calendario del profesor, y luego la factura y el pago. Una clase de prueba sigue los mismos pasos.
Quien visita el sitio puede ver profesores, cursos y calendarios sin cuenta. El aviso para registrarse, o para completar los datos que faltan, aparece solo al intentar reservar. El pago correcto y el fallido tienen cada uno su propia pantalla.
Pedir una cuenta solo en el momento de reservar mantiene abierta la primera visita.
Regístrate primero y luego reserva
07Calendario
Un calendario con ocho historias
El tiempo es lo más difícil de mostrar en un marketplace de clases, así que el calendario del profesor parte de historias de usuario. Son ocho, y juntas nombran los estados por los que pasa un hueco horario: libre, seleccionado, reservable, reservado por un alumno, listo para eliminar, siendo reservado por otra persona y parte de un curso.
Los mismos estados recorren el calendario propio del profesor, el calendario que ve un alumno en el perfil de un profesor y los pasos de reserva, y la zona horaria siempre se muestra.
Las ocho historias, traducidas del persa:
El profesor puede ver los huecos libres de su calendario.
El profesor puede ver los huecos que seleccionó para reservar, antes de que el sistema los registre como reservables.
El profesor puede ver los huecos reservables de su calendario.
El profesor puede ver los huecos que ha registrado un alumno, y no puede eliminarlos.
El profesor puede distinguir los huecos reservables de los que ha registrado un alumno.
El profesor puede eliminar de su calendario los huecos que abrió para reservar.
El profesor no puede elegir un hueco para una clase mientras otra persona lo está reservando.
El profesor solo puede ver las horas reservadas para sus cursos, y no puede actuar sobre ellas.
Siete estados en ocho historias: el calendario tenía que decir quién tiene cada hora, el profesor, un alumno o un curso.
El calendario del profesor
Figura 05Las ocho historias de usuario tal como se dibujaron, en persa, cada una con el estado que añade.
08Profesores
Los profesores solicitan entrar por pasos y luego gestionan sus clases
Hacerse profesor lleva cinco pasos: grupos de edad, datos personales, los cursos que se quieren impartir, documentos de identidad y de titulación, y una última pantalla que espera la hora de la entrevista. Después, cada solicitud llega a la administración con el enlace de la entrevista, la hora y quién la hace.
Una vez aceptados, los profesores gestionan su propio negocio desde el panel: precios de una sesión y de paquetes, sus horas libres, sus cursos, un vídeo de presentación con consejos de grabación, reseñas que responder y un panel de control con ingresos y visitas al perfil. La especificación de precios preveía además un gráfico con el precio medio que otros profesores ponen a la misma lección.
Los profesores fijan sus precios, horarios y cursos, así que su panel tenía que funcionar como herramienta de un pequeño negocio, no solo como un perfil.
A la espera de la entrevista
09Sistema de diseño
Un sistema de diseño para todas las superficies
La primera versión del sistema de diseño reúne 345 componentes en 24 conjuntos: color, tipografía, campos de formulario, botones, rutas de navegación, casillas y botones de opción, interruptores, ventanas modales, avisos breves, bloques de perfil, el menú lateral, cabeceras y pies para usuarios con y sin sesión en tres anchos, iconos de marca y modos claro y oscuro.
Llegó antes que la mayoría de las páginas, y por eso el registro, los pasos de reserva y los paneles se leen como un solo producto.
Color
10Iteración
Cinco ideas y después dos rondas de borradores
El trabajo empezó en abierto. Cinco ideas para el sitio web dieron 36 pantallas de concepto: tres de las ideas se convirtieron en siete versiones del panel de usuario, cada una con el menú lateral abierto y cerrado, y el perfil, la lista de profesores y la página de inicio recibieron entre cuatro y seis conceptos cada uno. El panel final conservó un menú blanco con un marcador azul marino, como en la primera idea.
Después, la mayoría de las páginas se dibujó dos veces. El titular de la página de inicio pasó de aprender un idioma siempre y en todas partes con un profesor que te guste, a una clase con el profesor que elijas, a una clase diseñada en torno a tu necesidad. El registro de profesores cambió la única foto de un portátil por una ilustración en cada paso, y su última pantalla pasó de una bienvenida a la espera de la entrevista. La página de inicio de sesión cambió una línea provisional por cinco promesas breves.
Las tres versiones del titular llevan el foco del profesor a la necesidad del alumno.
Idea 1: menú blanco
Primer borrador: «Aprende un idioma cuando y donde quieras, con un profesor que te guste»
Antes
Después
Antes
Después
11Pruebas
Cómo se puso a prueba el diseño
El diseño se probó con personas. Una prueba de usabilidad de la lista de profesores se hizo con moderación, en persona y en remoto, sobre un prototipo de Figma y en UsabilityHub. Sus tareas: encontrar un profesor, escribirle, reservar una clase de prueba y filtrar por hora y por el género del profesor. Midió el tiempo por tarea, los errores, la finalización y la satisfacción, y una prueba de diez segundos comprobó qué recordaba la gente de la primera pantalla.
Unos mapas de calor de atención compararon el diseño antiguo y el nuevo en cinco páginas clave: la página de inicio, la lista de profesores, el perfil de un profesor, la lista de clases y el calendario del profesor. La nueva página de inicio es aproximadamente una cuarta parte más corta que la antigua.
Para el sitio antiguo, Sina también había planificado un seguimiento de clics en la página de inicio, desde la llamada a la acción principal hasta el orden de los idiomas y los enlaces de la cabecera y el pie, para ver qué partes se ganaban su sitio.
12Paneles
Un panel para los alumnos y una administración para el equipo
El panel de usuario reúne todo lo que hay tras iniciar sesión: clases con filtros para próximas, sin programar, a la espera de un estado, realizadas y canceladas, un calendario, un monedero con saldo, recarga y movimientos, un informe financiero clase por clase, mensajes y un perfil donde el alumno fija un objetivo y un nivel. Desde un cuadro de diálogo se puede valorar una clase, informar de un problema o cancelarla, y la lista de clases tiene modo oscuro.
El panel de administración es un conjunto más pequeño: una lista de usuarios con búsqueda por ID, nombre, correo y teléfono, clases con filtros de tipo y de estado, y las solicitudes de los profesores. Su arquitectura de información aparece en el mapa de abajo.
Clases
Las áreas de la administración y lo que contiene cada una
01
Lista de usuarios
Búsqueda y filtro
Nombre
Rol
Informes de clases
Informes de pagos
Mensajería
Nombre de usuario
Restablecer la contraseña
Activar o desactivar roles
Editar la información
02
Gestor de descuentos
Crear un descuento
Lista de descuentos
Importe
Parte del profesor
Parte de OTeacher
Estado
13Resultados
Lanzado, y todavía la base
El nuevo sitio web y el nuevo panel se lanzaron en 2023. Tres años después, oteacher.org sigue funcionando sobre esta base, con el buscador en tres pasos en su página de inicio, aunque la empresa ha cambiado algunas secciones desde entonces.
componentes en el sistema de diseño
345
24 conjuntos: color, tipografía, formularios, botones, menús, ventanas modales y modos claro y oscuro
Entregable
pantallas en ancho de escritorio y de móvil
220
125 páginas de escritorio y 95 pantallas de móvil, cada una dibujada también en ancho de tableta
Entregable
pantallas del sitio antiguo revisadas
69
Cada problema etiquetado como visual, de estructura, de producto o de texto, en febrero de 2023
Entregable
Qué se entregó
↳El nuevo sitio web
↳El nuevo panel
14Mi rol
La parte de Sina
Todo el diseño fue obra de Sina, en el papel de diseño de producto y junto a la persona responsable de producto.
Responsable
↳La revisión del sitio antiguo, el análisis comparativo y el plan de seguimiento de clics
↳La arquitectura de información, los roles de usuario y los flujos
↳La página de inicio, el buscador de profesores en tres pasos, las páginas de profesores y de cursos
↳La reserva, incluida la clase de prueba
↳El registro de profesores y el inicio de sesión
↳El panel de usuario, los ajustes del profesor y el gestor de cursos
↳El calendario y sus historias de usuario
↳El panel de administración
↳El sistema de diseño y los conceptos
↳La prueba de usabilidad y los mapas de calor de atención
Corresponsable
↳La estrategia detrás de este diseño, con la persona responsable de producto: las entrevistas, las personas, el posicionamiento de marca y la hoja de ruta
15Lo que aprendí
Lo que mantendría y lo que cambiaría
01
Ir rápido, del diseño de interfaz a la estrategia de producto
En cerca de un año, el trabajo pasó de la estrategia de producto, elaborada con la persona responsable de producto, a la revisión del sitio antiguo, la estructura y los flujos, un sistema de diseño y 220 pantallas. La lección que me llevé de OTeacher: trabajar muy rápido y abarcar mucho, del diseño de interfaz a la estrategia del producto.
02
Medir el sitio nuevo desde el día del lanzamiento
El plan de seguimiento de clics cubría la antigua página de inicio. Aplicarlo al sitio nuevo desde el primer día habría dado al rediseño una referencia de partida, y cifras que mostrar aquí.
03
Archivar los borradores antiguos para el equipo de desarrollo
Las páginas se dibujaron dos veces y ambas versiones quedaron una junto a otra. Llevar los primeros borradores a un archivo, y nombrar cada pantalla por su página y su estado, habría mostrado de inmediato al equipo de desarrollo cuál construir.
16Todas las pantallas
Las 220 pantallas, los conceptos y el sistema de diseño
Los dos índices de abajo reúnen cada página y cada estado en ancho de escritorio (1440 píxeles) y de móvil (360 puntos): 125 páginas y 95 pantallas. Cuando una página se dibujó dos veces, solo se muestra la versión final, y se deja fuera el ancho de tableta que también tiene cada página. Les siguen las 36 pantallas de concepto y los 17 tableros del sistema de diseño.
Los dos índices siguen a un alumno: encontrar un profesor, reservar, iniciar sesión, las páginas de información, luego el panel de usuario, los ajustes del profesor y, en escritorio, la administración y las páginas de destino. Los datos personales de ejemplo, como números de teléfono, correos electrónicos, números bancarios y el nombre de alguien del equipo, se cubren con pixelado.
EstructuraMarzo: la arquitectura de información del sitio web, los dos paneles y la administración, los roles de usuario y los flujos principales.
04
Primeros borradoresEl sitio web, la reserva, el registro de profesores y el inicio de sesión, el panel de usuario y la administración.
05
El lado del profesorLos ajustes del profesor, los precios, la lista de clases y el calendario docente.
06
Segundos borradoresNuevas versiones de la página de inicio, los ajustes del profesor, el registro, el inicio de sesión y la reserva.
07
Calendarios, cursos y páginas de aterrizajeLas historias de usuario del calendario, el gestor de cursos, las pantallas de ayuda y una página de aterrizaje de IELTS llegaron al final.
02
Dejar explorar a quien visita y dar a la reserva sus propias páginas
El sitio antiguo metía la reserva en una ventana emergente. Ahora los profesores, los cursos y los calendarios están abiertos a cualquier visita, y la cuenta solo se pide en el momento de reservar.
Alternativas
El registro en la primera visita, que pone un formulario delante de los profesores.
Compromiso
La reserva tiene que servir tanto a alumnos nuevos como a los que vuelven, así que necesitó dos avisos: regístrate primero, o completa antes tus datos.
Evidencia
La reserva ocupa sus propias páginas, con una pantalla para el pago correcto y otra para el fallido, tanto en clases de pago como de prueba.
03
Escribir el calendario primero como historias de usuario
Un hueco horario tiene más estados que cualquier otro objeto del producto. Escribir primero las historias convirtió cada estado en una regla y no en una conjetura.
Alternativas
Dibujar primero el calendario y poner nombre a sus estados después.
Compromiso
Siete estados que diseñar y construir desde el principio, a cambio de menos sorpresas cuando dos personas quieren la misma hora.
Evidencia
Ocho historias, reutilizadas en el calendario del profesor, en el que ve el alumno y en los pasos de reserva.
04
Hacer que los profesores se registren por pasos y esperen una entrevista
La unidad educativa de la estrategia quería entrevistar a cada profesor con un mismo estándar. La solicitud recoge lo que la entrevista necesita, y la administración guarda el enlace de la entrevista, la hora y quién la hace.
Alternativas
Un registro abierto, con la calidad revisada solo después de las primeras clases.
Compromiso
Un arranque más lento para los profesores nuevos, a cambio de una lista de profesores evaluados.
Evidencia
Cinco pantallas de registro, el flujo de solicitud y un área de solicitudes de profesores en la administración.
05
Construir el sistema antes que las páginas
Un sitio web, dos paneles, una administración y tres anchos de pantalla: un solo juego de piezas salía más barato que muchos.
Alternativas
Diseñar cada superficie por separado y conciliarlas más tarde.
Compromiso
Tiempo dedicado a las piezas antes de la primera página, que se recupera cada vez que una pantalla las reutiliza.
Evidencia
345 componentes en 24 conjuntos, compartidos por el sitio web, los paneles y la administración.
Factura y pago
Pago fallido
Figura 03La reserva en escritorio: el aviso de registro, que solo aparece en este punto, la factura y la pantalla de un pago fallido.
El calendario en el perfil de un profesor
Figura 04Las mismas horas desde los dos lados: el profesor abre horas libres y un alumno elige una en el perfil del profesor.
Precios por lección y por paquete
Panel de control con un consejo de primera visita
Figura 06El lado del profesor: el último paso del registro, los precios por lección y por paquete, y el panel de control en la primera visita.
Botones
Figura 07Dos conjuntos del sistema de diseño: el color, y los botones en cada uno de sus estados.
Idea 2: menú azul marino
Idea 2, tercera variante: menú azul claro
Figura 08Tres de los conceptos del panel: el mismo contenido bajo un menú blanco, uno azul marino y uno azul claro. El panel final conservó el blanco.
Segundo borrador: «Una clase con el profesor que elijas»
Versión final: «Una clase diseñada en torno a tu necesidad»
Figura 09El titular de la página de inicio en tres borradores.
Figura 10Registro de profesores, primer paso, en el primer borrador y en la versión final: la única foto de un portátil se convirtió en una ilustración por paso.
Figura 11Inicio de sesión en el primer borrador y en la versión final: una línea provisional se convirtió en cinco promesas breves.
Monedero
Figura 12El panel del alumno: las clases por estado y el monedero.
03
Lista de profesores · Lista de alumnos
Nombre
Búsqueda y filtro
Informes de clases
Informes de pagos
Mensajería
Clases del profesor
Clases del alumno
04
Informes de clases · Informes de pagos y financieros
Búsqueda y filtro
Tipo de informe
Descripción
Estado del informe
Lista de pagos
Clases realizadas
Clases registradas
Profesores
Alumnos
Bancos
05
Contacto
Búsqueda y filtro
Nombre y apellidos
Correo electrónico
Móvil
Asunto
Texto del mensaje
Fecha
06
Mensajería
Texto del mensaje
Archivo
Remitente
Estado: visto o leído
Fecha de recepción
Fecha de envío
07
Solicitudes de profesores
Ver la solicitud
Información del profesor
Archivos adjuntos
Certificación
Lecciones
Enlace de la entrevista
Hora de la entrevista
Persona entrevistadora
Estado
08
Gestor de encuestas
Búsqueda y filtro en las encuestas
Resultados de una encuesta
Gráfico
Crear una encuesta
Estado
Colaboración
↳La persona responsable de producto, durante todo el proceso, incluidas las especificaciones de retiradas de fondos y de precios
Los paquetes de iconos gratuitos y las ilustraciones 3D dentro de las pantallas proceden de colecciones de terceros. Se dejan fuera los diseños de referencia y las capturas del sitio antiguo y de otros productos.
Figura 13125 páginas de escritorio, por área. Abra una página para verla completa.
Figura 1495 pantallas de móvil, por área. Abra una pantalla para verla completa.
Figura 15Las pantallas de concepto: 36 variantes del panel, el perfil, la lista de profesores y la página de inicio.
Figura 16Los 17 tableros del sistema de diseño. Abra un tablero para leerlo entero.
