Skip to content
Leonardo
B2BLead developmentResponsive websiteGraphQLReact

Caso de estudio

OpsTalent

Lead frontend development para un sitio B2B responsive con contenido GraphQL y UI pulida.

Lideré la implementación frontend de OpsTalent, con foco en un sitio B2B responsive, componentes reutilizables, contenido GraphQL, animación e interacción de producción.

OpsTalent
Role
Lead Frontend Developer
Period
2019-2021
Ownership
Lideré la implementación frontend de la experiencia web responsive, incluyendo componentes UI, contenido GraphQL, interacción, animación y entrega a producción.
OpsTalent responsive website overview
OpsTalent responsive website overviewResponsive B2B pages presented across device mockups with service and content modules.
OpsTalent page system and UI sections
OpsTalent page system and UI sectionsContent-driven page modules, cards, and visual sections from the production website.
OpsTalent content modules
OpsTalent content modulesReusable content sections for B2B storytelling, services, and marketing pages.
OpsTalent timeline animationMotion detail from the site, showing how interaction polish supports the page experience.

Problema

Convertir una oferta B2B en una experiencia web clara y creíble

B2B service websites often struggle to explain broad offerings clearly. OpsTalent needed a digital presence that could communicate customer experience, outsourcing, technology, culture, case content, and service areas without becoming static or generic.

The frontend problem was to translate a broad B2B brand and service architecture into a responsive, polished, content-driven website with clear navigation and production-ready interaction patterns.

Usuarios / contexto

Visitantes B2B, candidatos, equipos internos y clientes potenciales

OpsTalent's site needed to work for potential clients evaluating CX, outsourcing, technical support, and digital product partners; business decision-makers scanning credibility; candidates exploring culture; and internal teams publishing content.

The public context supports a company focused on multilingual customer experience, technical support, CX technology, outsourcing, and digital product capability.

Restricciones

Arquitectura de contenido, polish de marca, responsive e implementación fiel

The site needed to support service pages, cases, articles, podcasts, ebooks, careers, and contact flows.

GraphQL/CMS-style content required reusable templates and components, while animated pages still needed to load and navigate smoothly across screen sizes.

Decisiones de diseño

Construir secciones reutilizables y mantener el mensaje B2B fácil de escanear

The site needed reusable page sections such as hero blocks, service modules, case cards, article/podcast blocks, CTAs, and contact sections.

Navigation stayed task-oriented so services, technology, cases, careers, and contact paths were easy to find. Animation was used to support flow, feedback, and perceived polish rather than distract from content.

  • Design for variable content lengths, images, cards, and dynamic modules.
  • Balance imagery, icons, and motion with clear service communication.
  • Prioritize responsive polish instead of desktop-only layouts.

Interacción / sistema UI

Módulos B2B reutilizables, motion y componentes UI

The UI system can be shown through homepage sections, technology/service pages, case cards, article/podcast/ebook modules, navigation, contact CTAs, responsive content grids, hover states, transitions, buttons, icons, and image treatments.

The reusable component structure supported content-heavy pages and marketing resources while keeping the frontend consistent.

Implementación y colaboración

Implementación React/Next.js y GraphQL para un sitio content-driven

I led frontend development for the OpsTalent web experience.

The work included React/Next.js, GraphQL, responsive UI, animations, reusable UI components, production-ready interaction patterns, and a componentized structure suitable for content-heavy B2B pages.

Resultado

Una presencia B2B pulida con patrones frontend reutilizables

The project delivered a responsive B2B web experience with production-ready UI components, improved navigation experience through components and micro-interactions, and a React/Next.js + GraphQL frontend supporting OpsTalent's public digital presence.

This page is framed as an implementation and UI-craft case, not a metrics-heavy product case.

Espacios visuales

Evidencia visual planificada

The page is structured for public website screenshots, responsive comparisons, and component or motion examples.

  • Hero visual: homepage or strong public landing section.
  • Responsive proof: desktop and mobile comparison.
  • Content-system proof: service page, case card, article, podcast, or ebook module.
  • Interaction proof: navigation, hover states, transitions, or animated sections.
  • Component proof: buttons, cards, icons, grid sections, CTAs, and GraphQL content structure.

Stack

Herramientas y contexto de implementación.

ReactNext.jsGraphQLAnimationResponsive UI