Tienda online accesible para IFIS Educación

Reorganizar una plataforma de formación para facilitar la búsqueda, la compra y la gestión

Una mujer sostiene un portatil de forma que se muestra la pantalla. En la pantalla se ve la página de inicio de la web de Ifis Formación.
Cliente:
IFIS Formación
Equipo:
Diseño:
Hoy es el día
Desarrollo:
Marta Torre
Contenido y SEO:
IFIS Formación
Características:
  • Conformidad WCAG 2.1 Nivel AA
  • WordPress, editor de bloques y tema hijo desarrollado a medida
  • Plugin de migración propio
  • WooCommerce

IFIS Educación necesitaba renovar una web que había crecido sobre una estructura difícil de utilizar y mantener. Las personas usuarias tenían problemas para localizar la formación adecuada y, en algunos casos, abandonaban el proceso antes de completar una compra o reserva.

Diseñamos y desarrollamos una nueva tienda online accesible, con una arquitectura más clara y un sistema de gestión a medida. El proyecto permitió ordenar una oferta formativa compleja, simplificar los recorridos principales y proporcionar al equipo de IFIS mayor autonomía para administrar sus contenidos.

Simulación de varias vistas de la web de Ifis Formación en una retícula geométrica

IFIS Educación ofrece cursos propios y homologados para profesionales del trabajo social, la educación social, la psicología y otros ámbitos de la intervención social. Su catálogo reúne diferentes temáticas, niveles y metodologías, además de servicios de formación a medida para empresas y entidades.

La web anterior estaba construida con Divi Builder y había acumulado contenidos, funcionalidades y dependencias difíciles de gestionar. Su estructura complicaba la búsqueda de cursos y no facilitaba que cada persona comprendiera con rapidez qué formación se ajustaba a sus necesidades.

El problema no afectaba únicamente a la navegación. También tenía consecuencias sobre una de las tareas fundamentales de la plataforma: completar la compra o reserva de una plaza. Cuando la información resulta difícil de encontrar o el recorrido no se comprende con claridad, aumenta el riesgo de que el proceso quede a medias.

Al mismo tiempo, el equipo de IFIS necesitaba actualizar con frecuencia una oferta formativa cambiante. El sistema anterior limitaba su autonomía y hacía que muchas tareas editoriales dependieran de una estructura técnica poco mantenible.

El reto: transformar sin perder la información existente

El proyecto debía resolver de forma conjunta tres necesidades:

  • Facilitar la búsqueda de formaciones y la comprensión de la oferta.
  • Mejorar los recorridos de compra y reserva.
  • Crear un sistema de administración que IFIS pudiera gestionar con autonomía.

Todo ello requería conservar y trasladar un volumen considerable de información: páginas, entradas, productos de WooCommerce, pedidos, datos de clientes, tipos de contenido personalizados y metadatos.

La dificultad no consistía únicamente en diseñar una nueva interfaz. Era necesario sustituir la arquitectura técnica existente sin perder información relevante, relaciones entre contenidos ni elementos necesarios para mantener el posicionamiento de la web.

Primer plano de una mano sujetando un dispositivo móvil donde podemos ver la página web de Ifis Formación

Una arquitectura organizada alrededor de las decisiones de las personas

La nueva arquitectura partió de un análisis y reorganización de los contenidos existentes. No se redactaron nuevos textos: el trabajo se centró en estructurar, jerarquizar y presentar mejor la información disponible.

La oferta formativa se organizó atendiendo a dos criterios especialmente relevantes para la búsqueda:

  • La temática de cada curso.
  • La metodología de formación: online, en directo o presencial.

Esta clasificación permite filtrar el catálogo y reducir el esfuerzo necesario para encontrar una formación adecuada. La organización responde a las preguntas que una persona se plantea antes de inscribirse: qué quiere aprender, cómo quiere cursarlo y qué opción se adapta mejor a su situación.

También se trabajaron como parte del sistema los recorridos que permiten consultar las fichas de los cursos, comprar o reservar una plaza, solicitar formación a medida, acceder al campus y consultar noticias u ofertas de empleo.

Diseñar para comprender y actuar

El diseño conservó la identidad corporativa de IFIS, pero revisó su aplicación para construir una experiencia más clara, ligera y coherente. Y sobre todo, se adaptó para cumplir con los criterios de accesibilidad sin perder su identidad visual.

La principal transformación visual fue estructural. En una plataforma con una oferta amplia, el diseño debe ayudar a distinguir categorías, establecer prioridades y comprender qué acción puede realizarse en cada momento con un sistema capaz de acompañar la navegación y la compra.

Simulación de varias vistas de la web de Ifis Formación en formato móvil en una retícula geométrica

Accesibilidad desde la estructura hasta el desarrollo

La accesibilidad formó parte del encargo inicial. Se tomaron como referencia las WCAG 2.1 en su nivel AA.

Como en todos los proyectos, la accesibilidad comienza mucho antes de programar. Una estructura comprensible y una navegación predecible ayudan a que más personas puedan orientarse, localizar una formación y completar una tarea con autonomía. Por eso, la arquitectura fue una de las decisiones centrales del proyecto.

En desarrollo, la sustitución de Divi permitió construir una base técnica más controlada. La nueva web se desarrolló con Gutenberg, un tema a medida, tipos de contenido específicos, campos personalizados de WooCommerce y bloques adaptados a las necesidades de IFIS. Esta solución permitió trabajar la estructura semántica, el comportamiento de los componentes y su compatibilidad con diferentes formas de navegación desde el propio sistema, en lugar de intentar corregir posteriormente las limitaciones de un constructor visual.

Una entidad especializada realizó una revisión externa de accesibilidad. Sus conclusiones quedaron recogidas en la declaración de accesibilidad de IFIS, que delimita el estado de conformidad y las incidencias detectadas. Publicar esta información evita afirmaciones absolutas y presenta la accesibilidad como un proceso verificable que debe mantenerse durante la vida de la web.

Una migración diseñada específicamente para IFIS

La web anterior contenía shortcodes de Divi distribuidos entre páginas, entradas y tipos de contenido personalizados. Rehacer manualmente todos esos contenidos habría supuesto un proceso extenso y un riesgo considerable de pérdida de información.

Para resolverlo, desarrollamos un plugin propio capaz de procesar y limpiar estos shortcodes, recuperar el contenido y prepararlo para la nueva estructura de Gutenberg. La migración incluyó páginas, entradas, productos, pedidos, clientes, contenidos personalizados y sus metadatos.

También se configuraron redirecciones 301 y se revisaron las URL y los metadatos necesarios para preservar la continuidad del sitio durante el cambio. El trabajo de SEO fue asumido por el equipo de IFIS y se coordinó con las necesidades técnicas de la migración. Desde Rights Webs se documentó el proceso técnico y las decisiones adoptadas para eliminar la dependencia de Divi.

Simulación de varias vistas de la web de Ifis Formaciónen formato escritorio en una retícula geométrica

Autonomía sin renunciar a la coherencia

El panel de administración también formaba parte de la experiencia que debíamos diseñar. La nueva web incorporó bloques reutilizables y estructuras predefinidas para que el equipo pudiera crear páginas, actualizar formaciones y gestionar productos sin conocimientos técnicos.

Estos componentes ofrecen flexibilidad, pero mantienen las reglas visuales y estructurales del proyecto. De esta forma, la autonomía editorial no depende de reconstruir cada página ni obliga al equipo a tomar decisiones de diseño cada vez que publica un curso.

Eliminar Divi también redujo la complejidad técnica y las dependencias del sistema. La plataforma resultante está preparada para mantenerse y evolucionar sobre una base desarrollada específicamente para sus contenidos y procesos.

El resultado: una plataforma preparada para enseñar y crecer

La nueva web de IFIS conecta tres experiencias: la de las personas que buscan formación, la del equipo que gestiona la plataforma y la del sistema técnico que debe sostenerla.

El proyecto proporcionó a IFIS:

  • Una arquitectura orientada a encontrar y contratar formaciones.
  • Un catálogo organizado por temáticas y metodologías.
  • Recorridos más claros para consultar, comprar o reservar cursos.
  • Una web accesible desarrollada y diseñada tomando como referencia las WCAG 2.1 AA.
  • Un sistema de bloques adaptado a sus necesidades editoriales.
  • Mayor autonomía para administrar contenidos y productos.
  • Una solución sin dependencia de constructores visuales.
  • Una estructura técnica mantenible y preparada para evolucionar.

Cuando una plataforma reúne muchos contenidos, productos y procesos, la accesibilidad depende de toda su arquitectura. En RightsWebs diseñamos y desarrollamos tiendas online accesibles a medida para que encontrar información, tomar decisiones y completar una compra resulte más claro, también para los equipos que deben gestionarlas.