Centro de experiencia virtual, Alcanos de Colombia

Autogestión del servicio de gas natural, en un solo lugar

Cover of the Alcanos de Colombia Virtual Experience Center case study

Contexto

Alcanos de Colombia distribuye y comercializa gas natural en Tolima, Huila, Caquetá, Cauca, Cundinamarca, Caldas y Nariño. Su Centro de Experiencia Virtual reemplaza la oficina virtual: un portal donde clientes actuales y potenciales hacen consultas, pagos, reportes y trámites del servicio.

🖌️ Figma
📋 Notion

Tipo de proyecto

Portal de atención al cliente

Rol

Diseño UX/UI

Resultado

  • Plataforma en producción en cev.alcanosesp.com.
  • Diseño completo para escritorio y móvil: inicio, registro, panel del usuario, facturas, pagos y preguntas frecuentes.

El reto

Convertir la oficina virtual de Alcanos de Colombia en un Centro de Experiencia digital: una plataforma intuitiva y ágil donde los usuarios resuelvan por su cuenta sus consultas y trámites del servicio de gas natural. Las condiciones:

  • Atender a clientes actuales y potenciales de siete departamentos, con perfiles y necesidades muy distintos.
  • Resolver las tareas más frecuentes (pagar, consultar, reportar) sin obligar a crear una cuenta.
  • Ofrecer a quien sí inicia sesión una vista clara de su consumo, sus facturas y sus pagos.

Objetivo

  • Una entrada que lleve a cada persona directo a lo que necesita.
  • Autogestión de consultas, pagos y reportes sin iniciar sesión.
  • Un panel de usuario para trámites más avanzados: certificaciones, revisiones y asesorías.
  • La misma experiencia en escritorio y en móvil.

Mi rol

Diseñé la plataforma como diseñador independiente para OL Software, que tenía a Alcanos como cliente:

  • UX: estructura de la plataforma y flujos de autogestión, de la consulta rápida al panel del usuario.
  • UI: diseño de las pantallas en Figma para escritorio y móvil.
  • Documentación: organización del proyecto en Notion.

Decisiones clave

  • Empezar por la intención: el inicio pregunta «¿Qué estás buscando?» y muestra las tareas frecuentes, como reportar daños, fraudes o fugas, pagar facturas o consultar el contrato.
  • Autogestión sin cuenta: canales de atención, asesoría, preguntas frecuentes y PQR quedan a la vista en «Atención al público», sin iniciar sesión.
  • Todo alrededor del código de instalación: el panel resume la revisión periódica, el valor de la factura, el cupo disponible, el consumo de los últimos seis meses y el estado de cuenta.
  • Estados que se leen de un vistazo: cada factura muestra si está vencida o pagada, con descarga en PDF y un historial de pagos aparte.
  • Registro con ayuda en el momento: el formulario indica en tiempo real si la contraseña es segura.

Solución

  • Inicio: bienvenida, atención al público y accesos a las tareas frecuentes.
  • Registro: formulario con validación de contraseña.
  • Preguntas frecuentes: respuestas organizadas en desplegables.
  • Panel del usuario: menú lateral con consumo, facturas, pagos, créditos, PQR y revisión periódica.
  • Facturas y pagos: últimas facturas con su estado y su detalle, e historial de pagos con cupones pendientes.
  • Móvil: las mismas funciones en tarjetas, más un mapa de estaciones de servicio GNV.

Resultados

  • El Centro de Experiencia Virtual está en producción en cev.alcanosesp.com, con la estructura del diseño: bienvenida, atención al público y accesos a las tareas frecuentes.
  • El diseño cubre escritorio y móvil, del inicio público al panel del usuario.

Aprendizajes

  • En un servicio público, lo urgente (reportar una fuga, pagar una factura) tiene que estar a un clic y sin pedir una cuenta.
  • Organizar la información alrededor del código de instalación hace que consumo, facturas y pagos se lean en el mismo contexto.
  • Cuando el público es tan amplio, el lenguaje claro y los estados visibles importan tanto como la interfaz.

Pantallas relevantes

Inicio, registro, preguntas frecuentes, panel del usuario, facturas e historial de pagos.

Responsive

En móvil: inicio, estaciones de servicio GNV, facturas y panel del usuario.

Desplácese hacia arriba