Caso de estudio

OpsTalent

Lead frontend development para un sitio B2B responsive con contenido GraphQL y secciones content-driven.

B2BLead developmentResponsive websiteGraphQLReact

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.

OpsTalent

Role: Lead frontend development + UI implementation
Period: 2019-2021
Ownership: 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.

OpsTalent page system and UI sectionsContent-driven page modules, cards, and visual sections from the production website.

OpsTalent content modulesContent sections for B2B storytelling, services, and marketing pages.

Pantalla completa

OpsTalent timeline animationMotion detail from the site, showing how interaction supports the page experience.

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.

Composite of OpsTalent website screens showing homepage, culture, and contact sectionsA dark modular interface system across homepage, culture, and contact content.

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.

Long-scroll OpsTalent page system showing home, culture, and contact page depthThe website worked as a full content system, not a single landing page.

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.

Annotated OpsTalent interaction proof points including hero video, service cards, culture storytelling, and contact flowHero video states, animated sections, service cards, page transitions, and contact flows.

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.

OpsTalent visual and component system sheet with palette, hero, card grid, service content, and interaction badgesDark UI surfaces, accent-driven CTAs, modular cards, video states, and content sections.

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.

Stack

Herramientas y contexto de implementación.

ReactNext.jsGraphQLAnimationResponsive UI