1545 lines
58 KiB
TypeScript
1545 lines
58 KiB
TypeScript
import { motion } from "framer-motion";
|
||
import {
|
||
Accessibility,
|
||
ArrowRight,
|
||
BarChart3,
|
||
Brain,
|
||
Compass,
|
||
DollarSign,
|
||
Eye,
|
||
FileText,
|
||
GitBranch,
|
||
GitPullRequest,
|
||
Grid,
|
||
Heart,
|
||
Layers,
|
||
MessageCircle,
|
||
MessageSquare,
|
||
MousePointer2,
|
||
RefreshCcw,
|
||
Rocket,
|
||
Route,
|
||
Search,
|
||
Settings,
|
||
Shield,
|
||
Target,
|
||
TestTube,
|
||
TrendingUp,
|
||
UserCheck,
|
||
UserPlus,
|
||
Users,
|
||
Video,
|
||
} from "lucide-react";
|
||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||
import { Footer } from "../components/Footer";
|
||
import { Navigation } from "../components/Navigation";
|
||
import {
|
||
Accordion,
|
||
AccordionContent,
|
||
AccordionItem,
|
||
AccordionTrigger,
|
||
} from "../components/ui/accordion";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { Button } from "../components/ui/button";
|
||
import { Card, CardContent } from "../components/ui/card";
|
||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { Helmet } from "react-helmet-async";
|
||
|
||
// User Research & Testing Hero Section
|
||
const ResearchHeroWithCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="relative py-20 overflow-hidden bg-black">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>User Research & Testing | Software Development Insights</title>
|
||
<meta
|
||
name="description"
|
||
content="WDI delivers user research that fuels smarter software development. Understand behavior and needs to create user-centric digital experiences."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link
|
||
rel="canonical"
|
||
href="https://www.wdipl.com/services/user-research-testing"
|
||
/>
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta
|
||
property="og:title"
|
||
content="User Research & Testing | Software Development Insights"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="WDI delivers user research that fuels smarter software development. Understand behavior and needs to create user-centric digital experiences."
|
||
/>
|
||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||
<meta property="og:type" content="website" />
|
||
<meta
|
||
property="og:image"
|
||
content="https://www.wdipl.com/your-preview-image.jpg"
|
||
/>
|
||
|
||
{/* Twitter Card Tags */}
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta
|
||
name="twitter:title"
|
||
content="User Research & Testing | Software Development Insights"
|
||
/>
|
||
<meta
|
||
name="twitter:description"
|
||
content="WDI delivers user research that fuels smarter software development. Understand behavior and needs to create user-centric digital experiences."
|
||
/>
|
||
<meta
|
||
name="twitter:image"
|
||
content="https://www.wdipl.com/your-preview-image.jpg"
|
||
/>
|
||
|
||
{/* Social Profiles (using JSON-LD Schema) */}
|
||
<script type="application/ld+json">
|
||
{`
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "WDI",
|
||
"url": "https://www.wdipl.com",
|
||
"sameAs": [
|
||
"https://www.facebook.com/wdideas",
|
||
"https://www.linkedin.com/in/website-developers-india/",
|
||
"https://www.instagram.com/wdipl/"
|
||
]
|
||
}
|
||
`}
|
||
</script>
|
||
</Helmet>
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="space-y-8"
|
||
>
|
||
{/* Research Label */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<span className="text-white/70 text-sm font-medium">
|
||
Design & Experience
|
||
</span>
|
||
</motion.div>
|
||
|
||
{/* Main Heading */}
|
||
<div className="space-y-6">
|
||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||
Comprehensive User Research & Testing
|
||
</h1>
|
||
|
||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||
Gain deep insights into user behaviors, needs, and pain points
|
||
through user research and user testing to inform AI‑powered
|
||
design decisions and build truly user‑centric AI mobile apps.
|
||
</p>
|
||
</div>
|
||
|
||
{/* CTAs */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
className="flex flex-col sm:flex-row gap-4"
|
||
>
|
||
<ShimmerButton
|
||
className="text-lg px-8 py-4"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<Users className="w-5 h-5 flex-shrink-0" />
|
||
<span>Understand Your Users</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<FileText className="w-5 h-5 flex-shrink-0" />
|
||
<span>Get a Research Proposal</span>
|
||
</div>
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right side with User Research Visualization */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="relative flex flex-col items-center"
|
||
>
|
||
{/* User Research Observation Scene */}
|
||
<div className="relative w-full max-w-2xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
className="relative"
|
||
>
|
||
{/* Main Research Setup */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
className="relative bg-gray-900 rounded-2xl p-6 mx-auto max-w-lg shadow-2xl border border-gray-700"
|
||
>
|
||
{/* User Testing Interface */}
|
||
<div className="bg-black rounded-xl p-6 relative overflow-hidden">
|
||
{/* Screen Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 1.0 }}
|
||
className="flex items-center justify-between mb-6"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
|
||
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
||
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||
</div>
|
||
<div className="text-xs text-gray-400">
|
||
User Testing Session
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* User Interface Being Tested */}
|
||
<div className="space-y-4">
|
||
{/* Navigation */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 1.2 }}
|
||
className="h-10 bg-gradient-to-r from-accent to-blue-500 rounded-lg flex items-center px-4"
|
||
>
|
||
<div className="text-white text-sm font-medium">
|
||
Product Interface
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Interactive Elements Being Tested */}
|
||
<div className="space-y-3">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 1.4 }}
|
||
className="h-12 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30 p-3 flex items-center gap-3 relative"
|
||
>
|
||
<div className="w-6 h-6 bg-blue-500 rounded flex items-center justify-center">
|
||
<Search className="w-3 h-3 text-white" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-white text-xs">
|
||
Search Function
|
||
</div>
|
||
</div>
|
||
{/* Click indicator */}
|
||
<motion.div
|
||
animate={{
|
||
scale: [1, 1.5, 1],
|
||
opacity: [1, 0.5, 1],
|
||
}}
|
||
transition={{ duration: 2, repeat: Infinity }}
|
||
className="absolute -top-1 -right-1 w-3 h-3 bg-accent rounded-full"
|
||
></motion.div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 1.6 }}
|
||
className="h-12 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30 p-3 flex items-center gap-3"
|
||
>
|
||
<div className="w-6 h-6 bg-green-500 rounded flex items-center justify-center">
|
||
<Settings className="w-3 h-3 text-white" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-white text-xs">
|
||
User Settings
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6, delay: 1.8 }}
|
||
className="h-8 bg-gradient-to-r from-accent to-accent/80 rounded-lg flex items-center justify-center text-white text-xs font-medium"
|
||
>
|
||
Complete Task
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Observer/Researcher */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 2.0 }}
|
||
className="absolute -bottom-6 -left-6 transform -rotate-12"
|
||
>
|
||
<div className="w-14 h-14 bg-gradient-to-br from-accent/20 to-purple-500/20 rounded-full flex items-center justify-center border border-accent/30">
|
||
<Eye className="w-6 h-6 text-accent" />
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Research Data Visualizations */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8, delay: 2.2 }}
|
||
className="absolute -top-8 -right-8 space-y-2"
|
||
>
|
||
<div className="flex items-center gap-2 text-accent text-sm">
|
||
<BarChart3 className="w-4 h-4" />
|
||
<span>Analytics</span>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<motion.div
|
||
animate={{ width: ["60%", "80%", "60%"] }}
|
||
transition={{ duration: 3, repeat: Infinity }}
|
||
className="h-1 bg-accent rounded-full"
|
||
style={{ width: "60%" }}
|
||
></motion.div>
|
||
<motion.div
|
||
animate={{ width: ["40%", "70%", "40%"] }}
|
||
transition={{ duration: 3, repeat: Infinity, delay: 0.5 }}
|
||
className="h-1 bg-blue-400 rounded-full"
|
||
style={{ width: "40%" }}
|
||
></motion.div>
|
||
<motion.div
|
||
animate={{ width: ["30%", "90%", "30%"] }}
|
||
transition={{ duration: 3, repeat: Infinity, delay: 1 }}
|
||
className="h-1 bg-green-400 rounded-full"
|
||
style={{ width: "30%" }}
|
||
></motion.div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Sticky Notes from Interviews */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.6, delay: 2.4 }}
|
||
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||
>
|
||
<div className="relative">
|
||
{/* Sticky Notes */}
|
||
<motion.div
|
||
animate={{ rotate: [2, -2, 2] }}
|
||
transition={{ duration: 4, repeat: Infinity }}
|
||
className="w-16 h-16 bg-yellow-300 rounded-lg shadow-lg p-2 text-gray-800 text-xs flex items-center justify-center font-medium transform rotate-2"
|
||
>
|
||
User
|
||
<br />
|
||
Feedback
|
||
</motion.div>
|
||
<motion.div
|
||
animate={{ rotate: [-3, 3, -3] }}
|
||
transition={{ duration: 4, repeat: Infinity, delay: 1 }}
|
||
className="absolute -top-2 -right-2 w-12 h-12 bg-pink-300 rounded-lg shadow-lg p-2 text-gray-800 text-xs flex items-center justify-center font-medium transform -rotate-3"
|
||
>
|
||
Pain
|
||
<br />
|
||
Point
|
||
</motion.div>
|
||
<motion.div
|
||
animate={{ rotate: [1, -1, 1] }}
|
||
transition={{ duration: 4, repeat: Infinity, delay: 2 }}
|
||
className="absolute -bottom-2 -left-2 w-14 h-14 bg-blue-300 rounded-lg shadow-lg p-2 text-gray-800 text-xs flex items-center justify-center font-medium transform rotate-1"
|
||
>
|
||
Insight
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Research Features */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 2.6 }}
|
||
className="flex justify-center gap-4 flex-wrap mt-8"
|
||
>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
||
>
|
||
<Eye className="w-3 h-3 mr-1" />
|
||
Observational
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-green-500/20 text-green-300 border-green-500/30"
|
||
>
|
||
<BarChart3 className="w-3 h-3 mr-1" />
|
||
Data-Driven
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
||
>
|
||
<Users className="w-3 h-3 mr-1" />
|
||
User-Centric
|
||
</Badge>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Key Benefits of User Research & Testing
|
||
const ResearchBenefits = () => {
|
||
const benefits = [
|
||
{
|
||
icon: Shield,
|
||
title: "Reduce Development Risk",
|
||
description: "Build what users actually need, not what you assume.",
|
||
},
|
||
{
|
||
icon: Heart,
|
||
title: "Increase User Satisfaction",
|
||
description: "Create intuitive and enjoyable experiences.",
|
||
},
|
||
{
|
||
icon: TrendingUp,
|
||
title: "Improve Conversion Rates",
|
||
description: "Optimize flows based on real user interactions.",
|
||
},
|
||
{
|
||
icon: DollarSign,
|
||
title: "Save Costs",
|
||
description:
|
||
"Identify usability issues early, avoiding expensive reworks.",
|
||
},
|
||
{
|
||
icon: Target,
|
||
title: "Gain Competitive Edge",
|
||
description: "Develop products that truly stand out in the market.",
|
||
},
|
||
{
|
||
icon: Brain,
|
||
title: "Informed Decision Making",
|
||
description: "Data-driven insights to guide product strategy.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Why Invest in Understanding Your Users?
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
Because deep user research leads to AI‑powered design that truly
|
||
fits how people behave, reduces costly redesigns, and drives higher
|
||
engagement and retention across your AI mobile app, web development,
|
||
and iOS mobile app development products.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{benefits.map((benefit, index) => {
|
||
const IconComponent = benefit.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{benefit.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{benefit.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// User Research Process
|
||
const ResearchProcess = () => {
|
||
const steps = [
|
||
{
|
||
title: "Define Objectives",
|
||
description:
|
||
"Clearly establish research goals and key questions to be answered.",
|
||
icon: Target,
|
||
},
|
||
{
|
||
title: "Select Methodology",
|
||
description:
|
||
"Choose the most appropriate research methods for your specific needs.",
|
||
icon: Compass,
|
||
},
|
||
{
|
||
title: "Recruit Participants",
|
||
description:
|
||
"Find and screen participants that represent your target user base.",
|
||
icon: Users,
|
||
},
|
||
{
|
||
title: "Conduct Research",
|
||
description:
|
||
"Execute research sessions using proven methodologies and best practices.",
|
||
icon: Search,
|
||
},
|
||
{
|
||
title: "Analyze Findings",
|
||
description:
|
||
"Process and synthesize data to extract meaningful insights and patterns.",
|
||
icon: BarChart3,
|
||
},
|
||
{
|
||
title: "Deliver Actionable Insights",
|
||
description:
|
||
"Present findings in clear, actionable recommendations for your team.",
|
||
icon: FileText,
|
||
},
|
||
{
|
||
title: "Test & Iterate",
|
||
description:
|
||
"Validate improvements and continue refining based on ongoing feedback.",
|
||
icon: RefreshCcw,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Our Methodical Approach to Uncovering User Insights
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
A structured, research‑driven process that combines user testing
|
||
with targeted activities to uncover deep insights for your web
|
||
development products.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="relative">
|
||
{/* Timeline line */}
|
||
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
||
|
||
<div className="space-y-16">
|
||
{steps.map((step, index) => {
|
||
const IconComponent = step.icon;
|
||
const isEven = index % 2 === 0;
|
||
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||
viewport={{ once: true }}
|
||
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"} flex-col lg:gap-16 gap-8`}
|
||
>
|
||
<div
|
||
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"} text-center lg:text-left`}
|
||
>
|
||
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-accent">
|
||
0{index + 1}
|
||
</div>
|
||
</div>
|
||
<h3 className="text-2xl font-semibold text-white mb-4">
|
||
{step.title}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{step.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Timeline dot */}
|
||
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
|
||
|
||
<div className="flex-1 hidden lg:block"></div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Research Services
|
||
const ResearchServices = () => {
|
||
const services = [
|
||
{
|
||
title: "Qualitative Research",
|
||
description: "User interviews, focus groups, ethnographic studies.",
|
||
icon: MessageCircle,
|
||
features: [
|
||
"User Interviews",
|
||
"Focus Groups",
|
||
"Ethnographic Studies",
|
||
"Contextual Inquiries",
|
||
],
|
||
},
|
||
{
|
||
title: "Quantitative Research",
|
||
description: "Surveys, analytics review, A/B testing setup.",
|
||
icon: BarChart3,
|
||
features: [
|
||
"User Surveys",
|
||
"Analytics Analysis",
|
||
"A/B Testing",
|
||
"Statistical Analysis",
|
||
],
|
||
},
|
||
{
|
||
title: "Usability Testing",
|
||
description: "Moderated and unmoderated testing with real users.",
|
||
icon: TestTube,
|
||
features: [
|
||
"Moderated Testing",
|
||
"Unmoderated Testing",
|
||
"Task Analysis",
|
||
"Performance Metrics",
|
||
],
|
||
},
|
||
{
|
||
title: "Persona Development",
|
||
description: "Creating archetypes of your key user segments.",
|
||
icon: UserCheck,
|
||
features: [
|
||
"User Personas",
|
||
"Journey Mapping",
|
||
"Behavioral Patterns",
|
||
"Segment Analysis",
|
||
],
|
||
},
|
||
{
|
||
title: "User Journey Mapping",
|
||
description: "Visualizing the complete user experience.",
|
||
icon: Route,
|
||
features: [
|
||
"Experience Mapping",
|
||
"Touchpoint Analysis",
|
||
"Pain Point Identification",
|
||
"Opportunity Areas",
|
||
],
|
||
},
|
||
{
|
||
title: "Competitor Analysis",
|
||
description: "Understanding market benchmarks and user expectations.",
|
||
icon: Target,
|
||
features: [
|
||
"Competitive Benchmarking",
|
||
"Feature Analysis",
|
||
"Best Practices",
|
||
"Market Research",
|
||
],
|
||
},
|
||
{
|
||
title: "Information Architecture Testing",
|
||
description: "Card sorting, tree testing for content organization.",
|
||
icon: Layers,
|
||
features: [
|
||
"Card Sorting",
|
||
"Tree Testing",
|
||
"Content Strategy",
|
||
"Navigation Testing",
|
||
],
|
||
},
|
||
{
|
||
title: "Accessibility Audits",
|
||
description: "Ensuring your product is usable for everyone.",
|
||
icon: Accessibility,
|
||
features: [
|
||
"WCAG Compliance",
|
||
"Screen Reader Testing",
|
||
"Keyboard Navigation",
|
||
"Color Contrast",
|
||
],
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Our Specialized User Research & Testing Capabilities
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
Advanced user research expertise to map behaviors, needs, and pain
|
||
points for your AI mobile app experience.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"
|
||
>
|
||
{services.map((service, index) => {
|
||
const IconComponent = service.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-6">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-foreground mb-4">
|
||
{service.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-6 text-sm">
|
||
{service.description}
|
||
</p>
|
||
<div className="space-y-2">
|
||
<h4 className="text-xs font-medium text-foreground">
|
||
Key Methods:
|
||
</h4>
|
||
<div className="flex flex-wrap gap-1">
|
||
{service.features.map((feature) => (
|
||
<Badge
|
||
key={feature}
|
||
variant="secondary"
|
||
className="text-xs bg-muted/50 text-muted-foreground border-muted"
|
||
>
|
||
{feature}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Research Tools
|
||
const ResearchTools = () => {
|
||
const tools = [
|
||
{
|
||
name: "UserTesting",
|
||
icon: Users,
|
||
category: "User Testing",
|
||
color: "green",
|
||
},
|
||
{ name: "Maze", icon: Route, category: "User Testing", color: "blue" },
|
||
{
|
||
name: "Optimal Workshop",
|
||
icon: Layers,
|
||
category: "Information Architecture",
|
||
color: "purple",
|
||
},
|
||
{
|
||
name: "Hotjar",
|
||
icon: MousePointer2,
|
||
category: "User Behavior",
|
||
color: "orange",
|
||
},
|
||
{
|
||
name: "Google Analytics",
|
||
icon: BarChart3,
|
||
category: "Web Analytics",
|
||
color: "yellow",
|
||
},
|
||
{
|
||
name: "SurveyMonkey",
|
||
icon: MessageSquare,
|
||
category: "Surveys",
|
||
color: "green",
|
||
},
|
||
{
|
||
name: "Qualtrics",
|
||
icon: FileText,
|
||
category: "Research Platform",
|
||
color: "blue",
|
||
},
|
||
{
|
||
name: "UsabilityHub",
|
||
icon: TestTube,
|
||
category: "Quick Testing",
|
||
color: "red",
|
||
},
|
||
{
|
||
name: "Card Sorting",
|
||
icon: Grid,
|
||
category: "Information Architecture",
|
||
color: "purple",
|
||
},
|
||
{
|
||
name: "Tree Testing",
|
||
icon: GitBranch,
|
||
category: "Navigation Testing",
|
||
color: "teal",
|
||
},
|
||
{
|
||
name: "A/B Testing",
|
||
icon: GitPullRequest,
|
||
category: "Conversion Testing",
|
||
color: "pink",
|
||
},
|
||
{
|
||
name: "Lookback",
|
||
icon: Video,
|
||
category: "User Interviews",
|
||
color: "indigo",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Research Tools & Methodologies
|
||
</h2>
|
||
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||
Employing a robust toolkit for comprehensive user insights through
|
||
AI‑powered design driven analysis and synthesis.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"
|
||
>
|
||
{tools.map((tool, index) => {
|
||
const IconComponent = tool.icon;
|
||
const colorClasses = {
|
||
green: "bg-green-500/20 text-green-400 border-green-500/30",
|
||
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
|
||
purple: "bg-purple-500/20 text-purple-400 border-purple-500/30",
|
||
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
|
||
yellow: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
|
||
red: "bg-red-500/20 text-red-400 border-red-500/30",
|
||
teal: "bg-teal-500/20 text-teal-400 border-teal-500/30",
|
||
pink: "bg-pink-500/20 text-pink-400 border-pink-500/30",
|
||
indigo: "bg-indigo-500/20 text-indigo-400 border-indigo-500/30",
|
||
};
|
||
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5, scale: 1.05 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
|
||
<div
|
||
className={`w-10 h-10 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tool.color as keyof typeof colorClasses] || "bg-accent/20 text-accent border-accent/30"}`}
|
||
>
|
||
<IconComponent className="w-5 h-5" />
|
||
</div>
|
||
<h4 className="font-semibold text-white text-sm mb-1">
|
||
{tool.name}
|
||
</h4>
|
||
<p className="text-xs text-gray-400">{tool.category}</p>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Research Case Studies
|
||
const ResearchCaseStudies = () => {
|
||
const caseStudies = [
|
||
{
|
||
title: "E-commerce Usability Study",
|
||
client: "Online Retail Platform",
|
||
description:
|
||
"Conducted comprehensive usability testing that identified critical checkout flow issues, resulting in a 45% increase in conversion rates after implementing recommended changes.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
|
||
results: "45% conversion rate increase",
|
||
methodology: "Usability Testing",
|
||
participants: "32 users",
|
||
gradient: "from-green-500/20 to-emerald-500/20",
|
||
},
|
||
{
|
||
title: "SaaS User Journey Research",
|
||
client: "B2B Software Company",
|
||
description:
|
||
"In-depth user interviews and journey mapping revealed key pain points in onboarding, leading to a redesign that reduced churn by 60% in the first month.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
|
||
results: "60% churn reduction",
|
||
methodology: "User Interviews & Journey Mapping",
|
||
participants: "18 stakeholders",
|
||
gradient: "from-blue-500/20 to-cyan-500/20",
|
||
},
|
||
{
|
||
title: "Mobile App Accessibility Audit",
|
||
client: "Healthcare Technology",
|
||
description:
|
||
"Comprehensive accessibility testing and user research with disabled users resulted in WCAG 2.1 AA compliance and expanded user base by 25%.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
|
||
results: "25% user base expansion",
|
||
methodology: "Accessibility Testing",
|
||
participants: "24 diverse users",
|
||
gradient: "from-purple-500/20 to-pink-500/20",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
||
Research-Driven Products That Connect with Users
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
AI‑powered design informed by deep user research and user testing
|
||
builds AI mobile app, web development, and iOS mobile app
|
||
development experiences that truly connect with users and solve real
|
||
problems.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{caseStudies.map((study, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
className="group cursor-pointer"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
||
<CardContent className="p-0 flex flex-col h-full">
|
||
<div className="p-8 pb-6">
|
||
<div className="flex items-start gap-4 mb-6">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||
<Search className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
|
||
{study.client}
|
||
</div>
|
||
<Badge
|
||
variant="secondary"
|
||
className="text-xs bg-accent/20 text-accent border-accent/30"
|
||
>
|
||
{study.results}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
|
||
{study.title}
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="px-8 pb-6 flex-1">
|
||
<div
|
||
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
|
||
>
|
||
<ImageWithFallback
|
||
src={study.image}
|
||
alt={study.title}
|
||
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-8 pb-6">
|
||
<p className="text-muted-foreground text-sm leading-relaxed mb-4">
|
||
{study.description}
|
||
</p>
|
||
<div className="flex gap-4 text-xs text-muted-foreground">
|
||
<div className="flex items-center gap-1">
|
||
<TestTube className="w-3 h-3" />
|
||
{study.methodology}
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<Users className="w-3 h-3" />
|
||
{study.participants}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-8 pt-0 mt-auto">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
|
||
>
|
||
<span className="text-sm font-medium">
|
||
VIEW FULL CASE STUDY
|
||
</span>
|
||
<ArrowRight className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Mid-Page CTA
|
||
const ResearchInlineCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center max-w-4xl mx-auto"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
||
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
|
||
<Search className="w-5 h-5 text-white" />
|
||
<span className="text-white text-base font-medium">
|
||
User Research
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
|
||
Ready to Deeply{" "}
|
||
<span className="text-accent">Understand Your Users?</span>
|
||
</h2>
|
||
|
||
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
|
||
Let's design a research plan that reveals invaluable insights for
|
||
your product.
|
||
</p>
|
||
|
||
<ShimmerButton
|
||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<MessageCircle className="w-6 h-6 flex-shrink-0" />
|
||
<span>Get a Free User Research Consultation</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Hire User Researchers
|
||
const HireResearchers = () => {
|
||
const researcherTypes = [
|
||
{
|
||
title: "Senior User Researchers",
|
||
description:
|
||
"Experienced researchers who design and execute comprehensive research studies",
|
||
icon: Search,
|
||
skills: [
|
||
"Research Strategy",
|
||
"Mixed Methods",
|
||
"Data Analysis",
|
||
"Insight Synthesis",
|
||
],
|
||
},
|
||
{
|
||
title: "UX Researchers",
|
||
description:
|
||
"Specialists in user experience research and usability testing",
|
||
icon: Users,
|
||
skills: [
|
||
"Usability Testing",
|
||
"User Interviews",
|
||
"Journey Mapping",
|
||
"Persona Development",
|
||
],
|
||
},
|
||
{
|
||
title: "Quantitative Researchers",
|
||
description:
|
||
"Data analysts who focus on statistical research and metrics",
|
||
icon: BarChart3,
|
||
skills: [
|
||
"Statistical Analysis",
|
||
"Survey Design",
|
||
"A/B Testing",
|
||
"Analytics",
|
||
],
|
||
},
|
||
{
|
||
title: "Qualitative Researchers",
|
||
description: "Experts in ethnographic studies and behavioral research",
|
||
icon: MessageCircle,
|
||
skills: [
|
||
"Ethnographic Studies",
|
||
"Focus Groups",
|
||
"Interview Techniques",
|
||
"Behavioral Analysis",
|
||
],
|
||
},
|
||
{
|
||
title: "Research Operations Specialists",
|
||
description: "Professionals who streamline and scale research processes",
|
||
icon: Settings,
|
||
skills: [
|
||
"Research Ops",
|
||
"Tool Management",
|
||
"Process Optimization",
|
||
"Team Coordination",
|
||
],
|
||
},
|
||
{
|
||
title: "Accessibility Researchers",
|
||
description: "Specialists in inclusive design and accessibility testing",
|
||
icon: Accessibility,
|
||
skills: [
|
||
"Accessibility Testing",
|
||
"Inclusive Design",
|
||
"WCAG Compliance",
|
||
"Assistive Technology",
|
||
],
|
||
},
|
||
];
|
||
|
||
const navigate = useNavigate();
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Access Expert User Research Talent
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||
Our dedicated user researchers and UX strategists provide the user
|
||
research insights you need to build truly impactful AI mobile app
|
||
products.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"
|
||
>
|
||
{researcherTypes.map((type, index) => {
|
||
const IconComponent = type.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{type.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-6">
|
||
{type.description}
|
||
</p>
|
||
<div className="space-y-2">
|
||
<h4 className="text-sm font-medium text-foreground">
|
||
Core Skills:
|
||
</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
{type.skills.map((skill) => (
|
||
<Badge
|
||
key={skill}
|
||
variant="secondary"
|
||
className="text-xs bg-muted/50 text-muted-foreground border-muted"
|
||
>
|
||
{skill}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="text-center space-y-6"
|
||
>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<ShimmerButton
|
||
className="text-lg px-8 py-4"
|
||
onClick={() =>
|
||
navigate("/hire-talent/user-research-testing-developers")
|
||
}
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<UserPlus className="w-5 h-5 flex-shrink-0" />
|
||
<span>Hire User Researchers</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
className="text-lg px-8 py-4 h-auto border-white/20 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<Eye className="w-5 h-5 flex-shrink-0" />
|
||
<span>View Profiles</span>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// User Research FAQs
|
||
const ResearchFAQs = () => {
|
||
const faqs = [
|
||
{
|
||
question: "How many users should I test with?",
|
||
answer:
|
||
"The optimal number depends on your research method and goals. For qualitative research like usability testing, 5-8 users often reveal 85% of usability issues. For quantitative research like surveys, you'll need larger sample sizes (typically 100+ respondents) for statistical significance. For A/B testing, sample sizes depend on your baseline conversion rate and the effect size you want to detect. We help determine the right sample size based on your specific research objectives and budget constraints.",
|
||
},
|
||
{
|
||
question:
|
||
"What's the difference between qualitative and quantitative research?",
|
||
answer:
|
||
"Qualitative research focuses on understanding the 'why' behind user behaviors through methods like interviews, focus groups, and ethnographic studies. It provides rich insights into user motivations, emotions, and contexts. Quantitative research measures the 'what' and 'how much' through surveys, analytics, and A/B testing, providing statistical data about user behaviors and preferences. Most effective research strategies combine both approaches: qualitative research to understand user needs and quantitative research to validate findings at scale.",
|
||
},
|
||
{
|
||
question: "Can user research be done remotely?",
|
||
answer:
|
||
"Yes, remote user research has become increasingly effective and is often preferred for its convenience and broader participant reach. We conduct remote usability testing, interviews, surveys, and card sorting sessions using tools like Zoom, UserTesting, Maze, and specialized research platforms. Remote research eliminates geographical constraints, reduces costs, and often makes participants more comfortable in their natural environment. However, some research methods like ethnographic studies or physical product testing may still require in-person sessions.",
|
||
},
|
||
{
|
||
question: "How long does a typical usability test take?",
|
||
answer:
|
||
"Usability test duration varies by complexity and scope. Individual user sessions typically last 30-90 minutes, with simple task-based tests taking 30-45 minutes and comprehensive product evaluations lasting 60-90 minutes. The complete process including planning, recruitment, testing, and analysis usually takes 2-4 weeks. Unmoderated tests can be completed faster (1-2 weeks) as users complete tasks on their own time. We provide detailed timelines during project planning to align with your product development schedule.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Frequently Asked Questions
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto"
|
||
>
|
||
<Accordion type="single" collapsible className="space-y-8">
|
||
{faqs.map((faq, index) => (
|
||
<AccordionItem
|
||
key={index}
|
||
value={`item-${index}`}
|
||
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
|
||
>
|
||
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
|
||
<span className="font-semibold text-white">
|
||
{faq.question}
|
||
</span>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
|
||
{faq.answer}
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Final CTA Section
|
||
const ResearchFinalCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20 relative overflow-hidden">
|
||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center max-w-4xl mx-auto"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="mb-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
||
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
||
<Search className="w-5 h-5 text-foreground" />
|
||
<span className="text-foreground text-base font-medium">
|
||
User Research
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
||
Build Products Users Love with{" "}
|
||
<span className="text-accent">Data-Driven Insights</span>
|
||
</h2>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
|
||
>
|
||
Partner with WDI for AI‑powered design–driven insights that ensure
|
||
your AI mobile app and iOS mobile app development products resonate
|
||
with your audience.
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<ShimmerButton
|
||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<Rocket className="w-6 h-6 flex-shrink-0" />
|
||
<span>Start Your User Research</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
|
||
<p className="text-muted-foreground text-sm">
|
||
User Testing • Research Strategy • Data-Driven Insights
|
||
</p>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Background Decorative Elements */}
|
||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
||
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
||
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-purple-500/3 rounded-full blur-3xl"></div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Main User Research & Testing Page
|
||
export const UserResearchTesting = () => {
|
||
return (
|
||
<div className="dark min-h-screen">
|
||
{/* <Navigation /> */}
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-black">
|
||
<ResearchHeroWithCTA />
|
||
</section>
|
||
|
||
{/* Benefits */}
|
||
<section className="bg-background">
|
||
<ResearchBenefits />
|
||
</section>
|
||
|
||
{/* Case Studies */}
|
||
<section className="bg-background">
|
||
<ResearchCaseStudies />
|
||
</section>
|
||
|
||
{/* Research Process */}
|
||
<section className="bg-card">
|
||
<ResearchProcess />
|
||
</section>
|
||
|
||
{/* Services */}
|
||
<section className="bg-background">
|
||
<ResearchServices />
|
||
</section>
|
||
|
||
{/* Tools */}
|
||
<section className="bg-card">
|
||
<ResearchTools />
|
||
</section>
|
||
|
||
{/* Mid-Page CTA */}
|
||
{/* <section className="bg-card">
|
||
<ResearchInlineCTA />
|
||
</section> */}
|
||
|
||
{/* Hire Researchers */}
|
||
<section className="bg-background">
|
||
<HireResearchers />
|
||
</section>
|
||
|
||
{/* FAQs */}
|
||
{/* <section className="bg-card">
|
||
<ResearchFAQs />
|
||
</section> */}
|
||
|
||
{/* Final CTA */}
|
||
<section className="bg-background">
|
||
<ResearchFinalCTA />
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<section className="bg-background">{/* <Footer /> */}</section>
|
||
</div>
|
||
);
|
||
};
|