Product designer UX / UI

ORANGE - Empresas

Portal de autogestión para Pymes y autónomos

Duración

Marzo 2020 - Mayo 2021

ROL

Product designer, Senior UX/UI Designer. Único responsable de las tareas de UX y UI. Liderando talleres de Design Thinking, ideación y creación del portal, flujos, usabilidad y diseño de interfaz, prototipado y preparación de tests. Para la investigación con usuarios contando con el apoyo de un especialista en research.

DISPOSITIVOS

Web responsive (desktop y mobile).

Metodología

Agile.

Herramientas

Jira, Confluence, Miro, Figma...



Descripción

Se trataba de crear un portal de autogestión, donde las empresas (Pymes y autónomos) pudieran configurar y ajustar a sus necesidades los servicios contratados con Orange, así como acceder a toda la información derivada de estos servicios (facturas, consumos, etc).

Mi rol como único responsable del UX y UI de esta herramienta consistía en conducir todo el proceso de Design Thinking, desde la ideación inicial, hasta la creación de un prototipo testeable.

En una primera fase, se intentaron adaptar las funcionalidades que ya existían en la herramienta de autogestión para grandes cuentas EGEO. Herramienta que conocía a la perfección, puesto que ya llevaba cerca de un año siendo el encargado del cuidado de UX y UI de la misma.

La principal problemática que presentaba el proyecto era agrupar en el mismo saco dos perfiles de clientes tan distintos como pueden ser los autónomos y las Pymes. Es evidente que no tienen las mismas necesidades una empresa familiar de ámbito local formada por un autónomo y 4 empleados, que una Pyme de 125 empleados con clientes en el extrajero.

Por ese motivo se idearon contenidos distintos dentro de la misma herramienta. Una vez que el usuario se hubiera logado en el portal y hubiera sido identificado como autónomo o Pyme, se le mostraría una información u otra, aunque la estructura del portal y el look & feel fuera común para ambas comunidades.



El Dashboard, la joya de la corona

Durante los workshops con los stakeholders se llegó a la conclusión de que la posición global, dashboard, panel de control, inicio, bienvenida o como queramos llamarlo era la pieza clave que invitaría al uso de la aplicación. Si esta no agradaba y satisfacía las necesidades del usuario, este no la usaría.

¿Qué sería lo primero que iba a ver el usuario al entrar en su espacio de autogestión?

Después de varias semanas de Design thinking, con los diferentes equipos de stakeholders, para definir el contenido del portal, definimos lo que se debería mostrar en el dashboard y cómo debería comportarse este.



  • Contratado:
    Un breve resumen de los servicios que tenía contratados.
  • Facturas:
    Información sobre facturación.
  • Herramientas:
    Accesos directos a las herramientas de autogestión de los servicios contratados.
  • Activaciones masivas:
    Accesos directos a activaciones masivas de servicios (roaming, llamadas internacionales, SMS Premium, Orange Pay…)
  • Accesos directos:
    A los sitios más visitados del portal (personalizable).
  • Descargas de informes de facturación.
  • Buscador de líneas.
  • Solicitud de descarga de informes.
  • Secciones comerciales.
  • Banners de contratación.
  • Enlaces directos a productos específicos: Bonos compartidos, etc...


El portal de autogestión tenía muchas funcionalidades para ofrecer al usuario. Si las mostrábamos todas inicialmente caeríamos en la trampa de sobresaturar la atención.



Dashboard cards abiertas


Demasiado carga cognitiva de golpe. Las investigaciones nos decían que el usuario solía acudir al portal para realizar tareas muy concretas de apenas unos segundos. No podíamos abrumarle de esa manera sobrecargando el dashboard con información innecesaria. ¡Había que hacer limpieza!

¿Cómo jerarquizar tantas funcionalidades para satisfacer a perfiles con necesidades tan dispares como administradores del portal, usuarios básicos, financieros...?

Un perfil financiero que acude al portal para descargarse las facturas del trimestre, debe hacerlo rápidamente, y continuar con el resto de sus tareas, ¿Por qué teníamos que abrumarle, perderle, desorientarle con tanta información no relevante para él?

¿Y por qué no le damos el poder al usuario para que sea él quien configure su dashboard en función de lo que quiere ver o hacer?

Convertiríamos todas esas funcionalidades en pequeños módulos o bloques de información que el usuario pudiera plegar, eliminar o redistribuir por la pantalla en función de su gusto y necesidades.

Otorguémosle al usuario control total del dashboard. Esa era la premisa. Desarrollo puso muchas pegas, pero no era imposible. Y negocio no quería dar al usuario el control total: “Hay secciones que no debemos permitir que sean eliminadas, queremos que estén ahí siempre presentes”.

La idea inicial de hacer el dashboard 100% personalizable, se quedó en que sólo se podían plegar y reordenar los bloques dentro de la pantalla de bienvenida. Dejando abiertas los bloques de Contratado y Facturas desplegados desde un primer momento, por considerarse de mayor importancia y uso.



Dashboard cards collapse


Un botón “Configura tu panel de bienvenida” ponía el Dashboard en modo edición. Y se mostraba una pantalla de onboarding, que explicaba el funcionamiento del dashboard. Pero además, también en el propio dashboard se incluía un módulo con un vídeo explicativo.



Dashboard onboarding


Tras cerrar la pantalla de onboarding, los bloques se mostraban traslúcidos, con el icono para ordenar en su parte superior. Pulsando sobre este icono, podíamos arrastrar el módulo hacia la posición deseada dentro del dashboard. Una vez reorganizada la pantalla, el usuario pulsaría el botón "Guardar configuración" para que aplicar los ajustes. Esta configuración se mantendría en la vista de móvil.Esta funcionalidad no estaba presente en la app ni en la versión móvil, lo que si que ocurría era que esa configuración se mantenía en el dispositivo móvil.



Dashboard modo edición




La navegación

El portal contaba con dos menús. Uno superior con diferentes secciones que seguían el orden del ciclo de vida del cliente: El cliente llega (Bienvenida), el cliente contrata (Contratado), el cliente consume (Consumo), el cliente paga (Facturas) y el cliente adquiere (Terminales y SIM).



Dashboard modo edición


El otro menú era lo que llamábamos "Cajón de cliente", y se encontraba en el lateral derecho, y en un primer momento aparecida plegado. En este menú, el cliente podría encontrar sus opciones personales con información de su empresa (Empresa), Notificaciones, Soporte/Ayuda y el Cierre de sesión. El cajón de cliente de los autónomos contaba con otra sección mas "Contrata +", desde donde podía contratar cualquier otro servicio.



Dashboard modo edición


El portal además permitía una navegación horizontal y otra vertical. Esto quiere decir que un usuario, por ejemplo, podía acceder a la consulta del consumo de una línea, desde la opción Consumo del menú principal y luego acceder a la línea concreta. O accediendo al espacio de una línea, podías acceder a un submenú con toda la información y gestiones de esa línea, similares a las del menú principal, pero sólo de esa línea (Contratado línea, Consumo línea, Ampliar servicios, Gestionar servicios, Terminales y SIM, e Internacional).



Doble navegación




CAPTURAS Y PROTOTIPOS

Estas son algunas capturas de las páginas de Contratado, Consumo y Facturas.

Información de servicios contratados Consumo de bonos compartidos Comparativa de facturas


Aquí puedes ver una muestra de varios prototipos que se realizaron para testear si se entendía bien el funcionamiento del dashboard, y para comprobar si se realizaban con éxito algunas tareas, como descativar el servicio Orange Pay en una línea determinada, consultar el detalle de un SIM específica, o ajustar el límite de un bono de datos compartido.

Ver prototipo Desktop Pymes. Ver prototipo Mobile Pymes