Case study / iTSM Group
A portfolio presentation for the iTSM Group website, shaped around planning, design thinking, customer integration, design systems, ServiceNow clarity, GSAP motion, QA, and deployment.
Focus topics, ServiceNow excellence, trainings, knowledge.
The live site is a large service-management ecosystem. This portfolio page turns it into a guided build story with ten visible delivery moments.
Ten-section process
Planning
The source site spans focus topics, ServiceNow, trainings, knowledge, company content, and customer contact routes. The portfolio page turns that range into a controlled narrative with clear milestones.
Scope mapping / content inventory / route planningDesign Thinking
The presentation treats every section as a decision aid: what problem is solved, who benefits, where the user can go next, and how the brand promise becomes interface behavior.
Problem framing / user tasks / evidence hierarchyCustomer Integration
Customer paths are brought forward through visible service cards, training entry points, knowledge prompts, and direct calls to the live source. The page keeps business conversion and support needs inside the same experience.
Lead paths / training flow / knowledge entryDesign System
The visual system uses a light operating-room surface, deep teal structure, red signal moments, precise borders, and reusable cards for service families, chapters, and deployment notes.
Color tokens / card rules / content modulesInformation Architecture
The live site organizes agile transformation, digital transformation, information security, process transformation, service management, and ServiceNow capabilities. The case study reflects that structure without reproducing the full menu tree.
Navigation lanes / service taxonomy / topic groupingUX and UI
The page avoids a decorative landing-page treatment and instead uses a working case-study layout: dense enough for consulting content, spacious enough to keep the reading rhythm calm.
Scannability / rhythm / action clarityFrontend Architecture
The implementation follows the existing portfolio pattern with scoped styles, a client-only animation setup, typed DOM queries, and a registry entry for cards, SEO, and sitemap flow.
Qwik / scoped SCSS / portfolio configGSAP Motion
Scroll progress, staged reveals, pinned horizontal movement, service graph activation, and finale glow bring the same GSAP confidence into a more polished consulting presentation.
ScrollTrigger / pinned reel / reveal choreographyQA and Performance
The route respects reduced motion, uses semantic sections, avoids text overlap on compact screens, and keeps fixed-format UI elements stable with aspect ratios and responsive limits.
Reduced motion / responsive QA / stable framesDeployment
The final step adds the route to the portfolio data source with a preview image, metadata, date, category, status, and technology tags so it appears in the existing portfolio overview.
Route / metadata / preview / live CTASystem model
Content architecture
Agile service management, scaling agile, and method training.
Process digitization, consulting, and organizational change.
Compliance, risk, identity access, and security operations.
ITSM, enterprise service management, HR, customer service, and ITIL.
Consulting, implementation, managed services, UX design, and training.
Assessments, guides, webinars, tutorials, and event-driven learning.
Motion score
QA and deployment
Scoped styling, client-only animation, a portfolio preview, SEO metadata, reduced-motion handling, and a direct link back to the source site make the case study feel finished inside the existing project.
Deployment
The presentation is now a dedicated portfolio route with ten process chapters, an independent visual system, and GSAP motion inspired by the test-codex page.