<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nebula Labs | SaaS Case Study</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
darkbg: '#0F1120',
darkcard: '#1A1C2E',
purplegrad: {
light: '#9D5CFF',
dark: '#6E18F0'
}
},
fontFamily: {
sans: ['Inter', 'sans-serif']
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
.purple-gradient-text {
background: linear-gradient(90deg, #9D5CFF 0%, #6E18F0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.purple-gradient-bg {
background: linear-gradient(90deg, #9D5CFF 0%, #6E18F0 100%);
}
</style>
</head>
<body class="bg-darkbg text-white font-sans">
<!-- Navigation -->
<nav class="px-6 py-6 md:px-12 lg:px-24 flex justify-between items-center">
<div>
<span class="text-xl font-bold purple-gradient-text">Ore </span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="hover:purple-gradient-text transition-all">Services</a>
<a href="#" class="hover:purple-gradient-text transition-all">Case Studies</a>
<a href="#" class="hover:purple-gradient-text transition-all">About</a>
<a href="#" class="hover:purple-gradient-text transition-all">Blog</a>
</div>
<button class="purple-gradient-bg px-6 py-2 rounded-full font-medium shadow-lg hover:opacity-90 transition-all">
Contact Us
</button>
</nav>
<!-- Hero Section -->
<header class="px-6 py-16 md:px-12 lg:px-24 flex flex-col md:flex-row items-center gap-10">
<div class="md:w-1/2">
<h1 class="text-3xl md:text-5xl font-bold mb-6">
How we helped <span class="purple-gradient-text">TaskFlow</span> increase conversions by <span class="purple-gradient-text">215%</span>
</h1>
<p class="text-gray-300 text-lg mb-8">
A complete redesign and development overhaul of TaskFlow's SaaS platform resulted in dramatic improvements in user engagement and subscription rates.
</p>
<div class="flex gap-4">
<button class="purple-gradient-bg px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition-all">
Read Case Study
</button>
<button class="border border-white/20 px-8 py-3 rounded-full font-medium hover:bg-white/5 transition-all">
View All Cases
</button>
</div>
</div>
<div class="md:w-1/2">
<img src="https://cdn.pixabay.com/photo/2022/09/24/21/13/astronaut-7477215_960_720.png" alt="TaskFlow Dashboard" class="rounded-xl shadow-2xl w-full">
</div>
</header>
<!-- Key Metrics -->
<section class="px-6 py-16 md:px-12 lg:px-24 bg-darkcard">
<h2 class="text-2xl md:text-3xl font-bold text-center mb-12">Key Results</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-darkbg p-8 rounded-xl text-center">
<h3 class="text-5xl font-bold purple-gradient-text mb-4">215%</h3>
<p class="text-gray-300">Increase in conversion rate</p>
</div>
<div class="bg-darkbg p-8 rounded-xl text-center">
<h3 class="text-5xl font-bold purple-gradient-text mb-4">57%</h3>
<p class="text-gray-300">Decrease in bounce rate</p>
</div>
<div class="bg-darkbg p-8 rounded-xl text-center">
<h3 class="text-5xl font-bold purple-gradient-text mb-4">89%</h3>
<p class="text-gray-300">Increase in user engagement</p>
</div>
</div>
</section>
<!-- Challenge -->
<section class="px-6 py-16 md:px-12 lg:px-24">
<div class="flex flex-col md:flex-row gap-12">
<div class="md:w-1/2">
<h2 class="text-2xl md:text-3xl font-bold mb-6">The Challenge</h2>
<p class="text-gray-300 mb-4">
TaskFlow came to us with a robust product but a poor user experience. Their conversion rates were stagnating, and user feedback indicated frustration with the interface and onboarding process.
</p>
<p class="text-gray-300 mb-4">
The application had evolved organically over three years, resulting in inconsistent design patterns and a fragmented user journey.
</p>
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-4">
<li>Complex onboarding that confused new users</li>
<li>Inconsistent UI across different platform sections</li>
<li>Poor mobile responsiveness</li>
<li>Slow loading times affecting user satisfaction</li>
</ul>
</div>
<div class="md:w-1/2 flex items-center">
<img src="https://images.pexels.com/photos/196645/pexels-photo-196645.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Before Redesign" class="rounded-xl shadow-xl w-full">
</div>
</div>
</section>
<!-- Approach -->
<section class="px-6 py-16 md:px-12 lg:px-24 bg-darkcard">
<div class="flex flex-col md:flex-row-reverse gap-12">
<div class="md:w-1/2">
<h2 class="text-2xl md:text-3xl font-bold mb-6">Our Approach</h2>
<p class="text-gray-300 mb-4">
We began with an extensive audit of TaskFlow's platform, conducting user interviews and analyzing usage patterns to identify pain points and opportunities.
</p>
<p class="text-gray-300 mb-6">
Our team then developed a comprehensive redesign strategy focused on simplicity, consistency, and user-centric flows.
</p>
<div class="space-y-4">
<div class="bg-darkbg p-4 rounded-lg">
<h3 class="font-semibold purple-gradient-text mb-2">UX Research & Strategy</h3>
<p class="text-gray-300 text-sm">Conducted interviews with 45 users to identify critical pain points</p>
</div>
<div class="bg-darkbg p-4 rounded-lg">
<h3 class="font-semibold purple-gradient-text mb-2">Design System Development</h3>
<p class="text-gray-300 text-sm">Created a cohesive design system for consistent interfaces</p>
</div>
<div class="bg-darkbg p-4 rounded-lg">
<h3 class="font-semibold purple-gradient-text mb-2">Frontend Performance Optimization</h3>
<p class="text-gray-300 text-sm">Rewrote key components using React and optimized loading times</p>
</div>
</div>
</div>
<div class="md:w-1/2 flex items-center">
<img src="https://images.pexels.com/photos/3584998/pexels-photo-3584998.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Our Process" class="rounded-xl shadow-xl w-full">
</div>
</div>
</section>
<!-- Solution -->
<section class="px-6 py-16 md:px-12 lg:px-24">
<h2 class="text-2xl md:text-3xl font-bold text-center mb-12">The Solution</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<img src="https://images.pexels.com/photos/6612384/pexels-photo-6612384.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="After Redesign" class="rounded-xl shadow-xl w-full">
<img src="https://images.pexels.com/photos/6612388/pexels-photo-6612388.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="After Redesign" class="rounded-xl shadow-xl w-full">
</div>
<div class="bg-darkcard p-8 rounded-xl">
<p class="text-gray-300 mb-6">
Our solution centered on three core pillars:
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold purple-gradient-text mb-3">Streamlined Onboarding</h3>
<p class="text-gray-300 text-sm">
We simplified the onboarding flow from 12 steps to 4, with contextual help and progressive disclosure of features.
</p>
</div>
<div>
<h3 class="text-xl font-bold purple-gradient-text mb-3">Unified Design System</h3>
<p class="text-gray-300 text-sm">
Implemented a consistent design language across all platform areas, improving usability and reducing cognitive load.
</p>
</div>
<div>
<h3 class="text-xl font-bold purple-gradient-text mb-3">Performance Optimization</h3>
<p class="text-gray-300 text-sm">
Reduced average page load time from 3.2 seconds to 0.8 seconds through code optimization and asset delivery improvements.
</p>
</div>
</div>
</div>
</section>
<!-- Testimonial -->
<section class="px-6 py-16 md:px-12 lg:px-24 bg-darkcard">
<div class="max-w-3xl mx-auto text-center">
<svg class="w-12 h-12 text-purple-500 mx-auto mb-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path>
</svg>
<p class="text-xl md:text-2xl text-gray-200 italic mb-8">
The team at Nebula Labs transformed our product into something our users genuinely love. The impact on our business metrics has been nothing short of extraordinary, and the investment has paid for itself multiple times over.
</p>
<div>
<p class="font-bold">Sarah Chen</p>
<p class="text-gray-400">CEO, TaskFlow</p>
</div>
</div>
</section>
<!-- CTA -->
<section class="px-6 py-16 md:px-12 lg:px-24">
<div class="purple-gradient-bg rounded-2xl p-8 md:p-12 text-center">
<h2 class="text-2xl md:text-4xl font-bold mb-6">Ready to transform your SaaS product?</h2>
<p class="text-lg mb-8 max-w-2xl mx-auto">
Let's discuss how we can help you improve user experience, increase conversions, and grow your business.
</p>
<button class="bg-white text-darkbg px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition-all">
Schedule a Consultation
</button>
</div>
</section>
<!-- Related Case Studies -->
<section class="px-6 py-16 md:px-12 lg:px-24">
<h2 class="text-2xl md:text-3xl font-bold mb-12">Related Case Studies</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-darkcard rounded-xl overflow-hidden">
<img src="https://cdn.pixabay.com/photo/2015/05/18/02/54/ui-771829_1280.jpg" alt="DevSync Case Study" class="w-full">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">DevSync</h3>
<p class="text-gray-300 mb-4">Redesigning developer collaboration tools for remote teams</p>
<a href="#" class="purple-gradient-text font-medium flex items-center">
Read Case Study
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="bg-darkcard rounded-xl overflow-hidden">
<img src="https://cdn.pixabay.com/photo/2020/01/26/21/57/computer-4796017_1280.jpg" alt="AnalyticsPro Case Study" class="w-full">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">AnalyticsPro</h3>
<p class="text-gray-300 mb-4">Simplifying complex data visualization for business users</p>
<a href="#" class="purple-gradient-text font-medium flex items-center">
Read Case Study
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="bg-darkcard rounded-xl overflow-hidden">
<img src="https://cdn.pixabay.com/photo/2021/01/09/23/28/mobile-5903726_1280.png" alt="SecureVault Case Study" class="w-full">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">SecureVault</h3>
<p class="text-gray-300 mb-4">Enhancing UX in enterprise-grade security software</p>
<a href="#" class="purple-gradient-text font-medium flex items-center">
Read Case Study
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="px-6 py-12 md:px-12 lg:px-24 bg-darkcard border-t border-white/10">
<div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-10">
<div>
<span class="text-xl font-bold purple-gradient-text mb-4 block">Ore</span>
<p class="text-gray-400">
Transforming SaaS products through strategic design and development.
</p>
</div>
<div>
<h3 class="font-bold mb-4">Services</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white">UX/UI Design</a></li>
<li><a href="#" class="hover:text-white">Web Development</a></li>
<li><a href="#" class="hover:text-white">Product Strategy</a></li>
<li><a href="#" class="hover:text-white">Growth Optimization</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white">About Us</a></li>
<li><a href="#" class="hover:text-white">Case Studies</a></li>
<li><a href="#" class="hover:text-white">Blog</a></li>
<li><a href="#" class="hover:text-white">Careers</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">Connect</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white">contact@nebulalabs.io</a></li>
<li><a href="#" class="hover:text-white">+1 (555) 123-4567</a></li>
<li class="flex space-x-4 pt-2">
<a href="#" class="hover:purple-gradient-text">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path></svg>
</a>
<a href="#" class="hover:purple-gradient-text">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg>
</a>
<a href="#" class="hover:purple-gradient-text">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path></svg>
</a>
</li>
</ul>
</div>
</div>
<div class="border-t border-white/10 pt-8 text-center text-gray-400 text-sm">
<p>© 2026 Ore Labs. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Projects 
Teams
Account
