Volver al trabajo

SaaS empresarial / Videoconferencia / Colaboración remota

Ulang

Diseño de una plataforma en la nube para interpretación remota en vivo.

Ulang es una plataforma premium basada en la nube que permite la interpretación profesional en vivo para conferencias, talleres, webinars y otros eventos virtuales. La plataforma permite que intérpretes y participantes se comuniquen a través de audio traducido en tiempo real durante las sesiones en vivo.

El objetivo era diseñar la experiencia de usuario completa de la plataforma, avanzando desde los primeros conceptos hasta el diseño de interfaz de alta fidelidad, antes de la entrega al equipo de desarrollo.

Puntos destacados del diseño

Qué cambió en la experiencia.

Flujo de trabajo complejo hecho intuitivo

Un flujo de trabajo de traducción en vivo con múltiples tipos de usuario se organizó en una interfaz clara y de baja fricción.

Fidelidad progresiva, del boceto a la producción

El diseño avanzó desde la validación de baja fidelidad hasta la producción de alta fidelidad, sin saltear instancias de alineación.

Sistema visual empresarial claro

Color, tipografía, layout y jerarquía se definieron para dar soporte a un producto profesional de nivel empresarial.

Handoff de desarrollo fluido

Todas las pantallas y especificaciones se prepararon para un equipo dedicado de implementación en Angular, con margen para ajustes técnicos.

Resumen del proyecto

Ulang necesitaba una experiencia de producto completa, diseñada desde cero. La plataforma da soporte a la interpretación profesional en vivo para conferencias, talleres y webinars, permitiendo que intérpretes y participantes se comuniquen a través de audio traducido en tiempo real. El trabajo de diseño cubrió el camino completo, desde los requisitos y la exploración temprana hasta las pantallas de producción de alta fidelidad listas para desarrollo.

Mi rol

Trabajé como Product Designer a lo largo de todo el engagement, desde la síntesis de investigación y la arquitectura de la información hasta los flujos de usuario, el wireframing, el diseño de UI de alta fidelidad y el handoff a desarrollo.

El desafío

El desafío central era construir una interfaz capaz de soportar un flujo de trabajo de traducción en vivo complejo, manteniéndose intuitiva para los usuarios en medio de un evento en vivo. Tenía que sostener múltiples interacciones de usuario, controles del intérprete y vistas de participante sin agregar carga cognitiva durante las sesiones activas.

Proceso de diseño

Partí de los requisitos de la plataforma y de los flujos de interpretación centrales, y luego exploré la estructura en bocetos de baja fidelidad: jerarquía de pantallas, navegación y las interacciones principales. Trabajar con wireframes y flujos de usuario permitió que el modelo de interacción evolucionara y se validara antes de cualquier diseño visual. Una vez que la estructura se sostuvo, el trabajo avanzó hacia la UI de alta fidelidad, donde definí color, tipografía, layout y jerarquía en un sistema visual empresarial consistente.

Solución

El resultado fue una interfaz completa para la plataforma de interpretación remota de Ulang: flujos de interacción, wireframes y pantallas de alta fidelidad para intérpretes y participantes. Los mockups finales y las especificaciones se entregaron a un equipo dedicado de implementación en Angular, con margen para ajustes técnicos durante la producción.

Interfaz de sesión con audio en vivo y controles del intérprete
Interfaz de sesiónInterfaz de sesión con audio en vivo y controles del intérprete
Pantalla lista para producción preparada para la implementación en Angular
Pantalla de producciónPantalla lista para producción preparada para la implementación en Angular
Layout final con especificaciones completas de componentes
Layout finalLayout final con especificaciones completas de componentes
Conjunto completo de mockups para el handoff a desarrollo
Conjunto de handoffConjunto completo de mockups para el handoff a desarrollo

Profundidad

Qué fue complejo sobre Ulang, y qué ayudé a clarificar.

Qué fue complejo
  • La interfaz necesitaba soportar un flujo de trabajo de traducción en vivo complejo, mientras se mantenía intuitiva para los usuarios que participaban en eventos virtuales.
  • Múltiples tipos de usuario y patrones de interacción tenían que coexistir sin aumentar la carga cognitiva durante las sesiones activas.
  • El proyecto requería avanzar desde la exploración temprana hasta pantallas listas para producción, dentro de un cronograma de desarrollo ligado a un equipo de implementación en Angular.
Qué ayudé a clarificar
  • La jerarquía de pantallas y el modelo de navegación de la plataforma.
  • Cómo los distintos roles de usuario avanzaban a través del flujo de interpretación en vivo.
  • El sistema visual y la estructura de componentes necesarios para dar soporte a la colaboración empresarial.
Valor creado

Entregué un diseño de interfaz completo para la plataforma de interpretación remota de Ulang, incluyendo flujos de interacción, wireframes, mockups de alta fidelidad y assets listos para producción, para una transición fluida hacia el desarrollo.

Resultado

El engagement produjo un diseño de interfaz completo y listo para producción para la plataforma de interpretación remota de Ulang, que permitió una transición fluida hacia el desarrollo.

Visuales de la solución

Pantallas y referencias visuales de Ulang.

Vista general de la plataforma Ulang, interfaz de alta fidelidad
Vista general de la plataformaVista general de la plataforma Ulang, interfaz de alta fidelidad
Boceto conceptual temprano explorando la jerarquía de pantallas y la estructura de navegación
Boceto conceptualBoceto conceptual temprano explorando la jerarquía de pantallas y la estructura de navegación
Exploración de baja fidelidad de los componentes centrales y las interacciones de usuario
Exploración de baja fidelidadExploración de baja fidelidad de los componentes centrales y las interacciones de usuario
Conceptos de wireframe para los patrones de interacción centrales
WireframesConceptos de wireframe para los patrones de interacción centrales
Diagrama de flujo de usuario para un intérprete uniéndose a una sesión en vivo
Flujo de usuarioDiagrama de flujo de usuario para un intérprete uniéndose a una sesión en vivo
Flujo del participante a través de un evento de interpretación en vivo
Flujo del participanteFlujo del participante a través de un evento de interpretación en vivo
Bocetos y mockups combinados mostrando la progresión del flujo de trabajo
Progresión del flujoBocetos y mockups combinados mostrando la progresión del flujo de trabajo
Paleta de color de alta fidelidad y dirección visual
Sistema visualPaleta de color de alta fidelidad y dirección visual
Layout de dashboard con tipografía y jerarquía visual
Layout del dashboardLayout de dashboard con tipografía y jerarquía visual

Trabajo relacionado

Proyectos adyacentes.