Caso de estudio
OpsTalent
Lead frontend development para un sitio B2B responsive con contenido GraphQL y secciones content-driven.
OpsTalent es un sitio B2B para una compañía de outsourcing y tecnología. Lideré el frontend build con React, Next.js, contenido GraphQL, secciones content-driven y detalles de interacción. El trabajo convirtió una oferta amplia de servicios en una experiencia web content-driven más clara.
- Rol
- Lead frontend development + UI implementation
- Periodo
- 2019-2021
- Alcance
- Lideré la implementación frontend y UI de producción de la experiencia web responsive, incluyendo componentes, contenido GraphQL, interacción, animación y entrega a producción.
Problema
Convertir una oferta B2B en una experiencia web clara y creíble
Los sitios B2B de servicios muchas veces tienen dificultades para explicar ofertas amplias con claridad. OpsTalent necesitaba una presencia digital capaz de comunicar customer experience, outsourcing, tecnología, cultura, contenido de casos y áreas de servicio sin volverse estática o genérica.
El problema frontend era traducir una marca B2B amplia y una arquitectura de servicios en un sitio responsive y content-driven, con navegación clara y patrones de interacción listos para producción.
Usuarios / contexto
Visitantes B2B, candidatos, equipos internos y clientes potenciales
El sitio de OpsTalent necesitaba funcionar para clientes potenciales que evalúan CX, outsourcing, technical support y partners de producto digital; decision-makers de negocio que escanean credibilidad; candidatos explorando cultura; y equipos internos publicando contenido.
El contexto público respalda una compañía enfocada en customer experience multilingüe, technical support, CX technology, outsourcing y capacidad de producto digital.
Restricciones
Arquitectura de contenido, responsive e implementación fiel
El sitio necesitaba soportar páginas de servicios, casos, artículos, podcasts, ebooks, careers y flujos de contacto.
El contenido estilo GraphQL/CMS requería templates y componentes estables, mientras que las páginas con animación seguían necesitando cargar y navegar con fluidez entre tamaños de pantalla.
Decisiones de diseño
Construir secciones de contenido y mantener el mensaje B2B fácil de escanear
El sitio necesitaba secciones claras como hero blocks, módulos de servicios, case cards, bloques de artículos/podcasts, CTAs y secciones de contacto.
La navegación se mantuvo orientada a tareas para que servicios, tecnología, casos, careers y contacto fueran fáciles de encontrar. La animación se usó para apoyar flujo y feedback, no para distraer del contenido.
- Diseñar para longitudes variables de contenido, imágenes, cards y módulos dinámicos.
- Balancear imágenes, iconos y motion con comunicación clara de servicios.
- Priorizar comportamiento responsive en lugar de layouts pensados solo para desktop.
Interacción / sistema UI
Módulos B2B, motion y componentes UI
El sistema UI puede mostrarse mediante secciones de homepage, páginas de tecnología/servicios, case cards, módulos de artículos/podcasts/ebooks, navegación, CTAs de contacto, grids de contenido responsive, hover states, transiciones, botones, iconos y tratamientos de imagen.
La estructura de componentes soportó páginas con mucho contenido y recursos de marketing manteniendo consistencia frontend.
Implementación y colaboración
Implementación React/Next.js y GraphQL para un sitio content-driven
Lideré frontend development y UI implementation para la experiencia web de OpsTalent, colaborando dentro de la dirección visual sin plantear ownership exclusivo de diseño.
El trabajo incluyó React/Next.js, GraphQL, layout responsive, animaciones, componentes UI, patrones de interacción listos para producción y una estructura componentizada adecuada para páginas B2B con mucho contenido.
Resultado
Un sitio B2B más claro con patrones frontend consistentes
El proyecto entregó una experiencia web B2B responsive con componentes UI listos para producción, una navegación mejorada mediante componentes y microinteracciones, y un frontend React/Next.js + GraphQL que soporta la presencia digital pública de OpsTalent.
Esta página está planteada como un caso de implementación y UI craft, no como un caso de producto cargado de métricas.
Aprendizaje / mejora
Los sitios con mucho contenido necesitan sistemas frontend que protejan el mensaje
OpsTalent reforzó que el trabajo frontend B2B no es solo armar páginas. Componentes, estructura de contenido, motion y reglas responsive tienen que mantener legible una oferta amplia de servicios a medida que las páginas crecen.
Si extendiera este case study, agregaría evidencia de repo para accesibilidad, performance y comportamiento de animaciones antes de hacer esos claims públicos. Los screenshots muestran la interfaz, pero el código y la QA son mejor evidencia de calidad de implementación.