Un sitio con mucho que decir y poco tiempo de lectura
Grupo Sictel es una integradora mexicana de TI con más de 30 años de experiencia. Su sitio concentra servicios de ciberseguridad, infraestructura, soluciones para gobierno y carriers, cada uno con mucha información técnica y comercial.
Me pidieron una propuesta de rediseño para presentarla internamente. Mi hipótesis desde el inicio: las personas que deciden una compra tecnológica escanean, no leen. Si todo se muestra con el mismo peso, lo importante se pierde.
Páginas largas, con el detalle técnico mezclado con el mensaje principal y secciones que se repiten entre sí.
Un sistema de diseño unificado, contenido sintetizado con criterio y el detalle disponible bajo demanda en PDF.
6 páginas coherentes, cada una con identidad propia, publicadas y navegables como propuesta.
Yo dirijo, Claude ejecuta y propone
Usé Claude (Anthropic) como copiloto durante todo el proyecto. La división fue clara: las decisiones de criterio, prioridad y estilo fueron mías; la lectura masiva de contenido, el código y la verificación visual los aceleró la IA.
Lo que decidí yo
- Qué páginas rediseñar y en qué orden.
- Que la información debía resumirse “con sentido estricto”, no solo acortarse.
- Qué detalle merecía un PDF y cuál no.
- Que cada hero debía sentirse distinto sin romper la identidad.
- Qué opciones del menú se quedaban.
Lo que hizo Claude
- Leer el contenido de las páginas originales a partir de sus URLs.
- Extraer el sistema de diseño del inicio y reutilizarlo en las demás páginas.
- Escribir el HTML/CSS/JS y generar los 6 PDFs de detalle.
- Renderizar las páginas en un navegador para revisar el resultado.
- Señalar inconsistencias de contenido encontradas en el original.
Página de inicio
Punto de partida: una página que fijó el lenguaje visual del sitio (azul corporativo, fondo de red dinámico, tarjetas, formulario único). Es el “patrón” que el resto de páginas debía seguir.
Cinco páginas con un solo sistema
Le entregué a Claude el archivo del inicio y las URLs de SOC, Infraestructura, Gobierno, Carrier y Quiénes somos. En lugar de escribir cada página por separado, se construyó un generador que comparte el mismo CSS, JS, menú, pie de página y formulario: lo que cambia es solo el contenido.
Auditoría y revisión visual
Claude renderizó cada página en un navegador y revisó el resultado. En esa revisión salieron problemas del contenido original (ver sección 04), que corregimos en lugar de trasladarlos al rediseño.
Mi retroalimentación: “hay demasiada información”
Con la primera versión completa vi que el rediseño conservaba demasiado texto. Pedí síntesis estricta, botones “Conoce más” con PDF, hero distintos por página y un menú solo con lo construido. Ese segundo ciclo es donde el proyecto cambió más.
Cada página, lado a lado
Selecciona una página para comparar el sitio original con el rediseño y ver qué decisión hay detrás.
assets/sictel-antes-home.png
Una promesa clara en la primera pantalla
- ·Hero con propuesta de valor, visual de órbita y 4 cifras de confianza.
- ·Servicios en tarjetas y un recorrido “Acompañamiento 360°” interactivo.
- ·Un único formulario de contacto, repetido en todas las páginas.
assets/sictel-antes-soc.png
De un muro de preguntas a lo esencial + guía en PDF
- ·Hero con radar y alertas: el tema se entiende antes de leer.
- ·Paquetes como tarjetas comparables con 3 puntos y una opción destacada; el alcance completo va en PDF.
- ·FAQ de 13 a 5 preguntas y cifras de amenazas de 8 a 4.
assets/sictel-antes-infra.png
Tres soluciones, una a la vez
- ·Pestañas para Data Center, Conectividad y Cómputo en lugar de listas largas.
- ·Cada solución muestra 4 puntos clave; el catálogo completo se descarga.
- ·Hero con racks y conexiones sobre un fondo tipo plano técnico.
assets/sictel-antes-gob.png
Credibilidad institucional en menos secciones
- ·De 8 a 5 secciones; el modelo de trabajo pasa a una línea de tiempo de 5 pasos.
- ·Se eliminó un párrafo ajeno al sector (de otro producto).
- ·Hero con edificio institucional y niveles Federal, Estatal y Municipal; el dossier completo va en PDF.
assets/sictel-antes-carrier.png
Portafolio navegable para un público técnico
- ·El portafolio de 5 dominios se explora con pestañas y 2 puntos por dominio.
- ·Se corrigieron viñetas duplicadas en “Ciberseguridad como servicio”.
- ·Hero con topología de red y paquetes de datos en movimiento; de 6 a 4 secciones.
assets/sictel-antes-nos.png
De la imagen del proceso a un proceso interactivo
- ·“¿Cómo lo hacemos?” dejó de ser solo una imagen: 5 etapas interactivas con texto.
- ·Certificaciones en 5 tarjetas cortas; normas y alcances completos en PDF.
- ·Hero tipográfico “30+” con las tres sedes y el logo como marca de agua.
Los cambios más drásticos y por qué
Cada cambio grande responde a un problema concreto. Estas son las seis decisiones que más pesaron.
Resumir con criterio y mover el detalle a PDF
Qué cambió: las páginas muestran lo esencial y un botón “Conoce más” descarga un PDF con el alcance completo (paquetes SOC, catálogo de infraestructura, dossier de gobierno, portafolio carrier, certificaciones, guía SOC).
Por qué: la gente escanea. La divulgación progresiva deja la decisión rápida a la vista y conserva el detalle para quien lo necesita, sin perder información.
Un Hero distinto por página
Qué cambió: mantuve el azul y el fondo de red, pero cada página tiene una ilustración propia: radar (SOC), racks de servidores (Infraestructura), edificio institucional (Gobierno), topología de red (Carrier) y un “30+” gigante (Quiénes somos).
Por qué: con un mismo Hero, todas las páginas parecían la misma. Cada imagen comunica el tema y avisa que cambiaste de sección.
Menú solo con lo que existe
Qué cambió: se eliminaron 7 opciones sin página (SSIMA, NOC, Nube, Casos de éxito, Alianzas, Blog, Soluciones Educativas). Quedan Inicio, Empresas y Pymes, Gobierno, Carrier y Nosotros.
Por qué: en una propuesta navegable, cada enlace debe llevar a algo. Menos opciones también reducen la carga de decisión.
Corregir el contenido, no solo el diseño
Qué cambió: durante la auditoría aparecieron un párrafo de otro producto en la página de Gobierno, viñetas duplicadas en Carrier, cifras de amenazas sin fuente y un proceso explicado solo con una imagen en Quiénes somos.
Por qué: un buen diseño sobre contenido con errores sigue siendo un mal sitio. Se eliminó lo ajeno, se corrigió lo duplicado y se convirtió el proceso en 5 etapas interactivas con texto.
Un sistema, no seis páginas
Qué cambió: colores, tipografía, tarjetas, pestañas, formulario, menú y pie de página salen de un mismo sistema, con el logo oficial en todas las páginas.
Por qué: la coherencia genera confianza y hace que el sitio sea mantenible: un ajuste de diseño se aplica a todas las páginas a la vez.
Interacción donde ayuda a entender
Qué cambió: listas largas de soluciones pasaron a pestañas (Infraestructura, Carrier, Quiénes somos) y los paquetes SOC a tarjetas comparables con una opción destacada.
Por qué: mostrar una cosa a la vez reduce la saturación y permite comparar sin recorrer un muro de texto.
Menos texto, mismo contenido
Comparación entre la primera versión del rediseño (contenido completo) y la versión final. Lo que sale de la página se conserva en los PDFs.
| Elemento | Versión 1 | Versión final |
|---|---|---|
| SOC · preguntas frecuentes en pantalla | 13 | 5 (las 13 en PDF) |
| SOC · cifras de amenazas | 8 | 4 |
| SOC · puntos por paquete | 5 + alcance extendido | 3 (alcance en PDF) |
| Infraestructura · puntos por solución | 7–8 | 4 |
| Gobierno · secciones | 8 | 5 |
| Carrier · secciones | 6 | 4 |
| Documentos de detalle descargables | 0 | 6 PDFs |
| Composiciones de Hero | 1 patrón | 5 distintas |
Azul corporativo, pocas piezas bien usadas
Una paleta derivada del azul del logo, una sola familia tipográfica (Roboto) y un puñado de componentes que se repiten: Hero, tarjetas, pestañas, paquetes, línea de tiempo, barra “Conoce más” y formulario.
El sitio responde a pantallas móviles: el menú pasa a panel lateral, las rejillas se apilan y las pestañas conservan su función. Los Hero ilustrados se adaptan sin perder legibilidad del mensaje.
Lo que aprendí de diseñar con IA
La IA acelera, pero el rumbo lo marca el criterio de diseño. Mi mejor aporte fue decir “esto es demasiado” y explicar por qué.
La primera versión completa sirvió para ver el problema. Iterar con retroalimentación concreta dio mejores resultados que intentar acertar a la primera.
Hay que revisar lo generado: el contenido original traía errores que una traslación literal habría replicado.
Explora el rediseño en vivo
Hablemos de
tu próximo proyecto
Si quieres conocer más sobre mi trabajo en UX/UI e IA aplicada al diseño, me encantaría conectar contigo.
Enviar mensaje → ← Todos los proyectos