Update src/app/projects/saas-product-interface-design/page.tsx
This commit is contained in:
@@ -2,127 +2,88 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
|
||||
export default function SaasProductInterfaceDesign() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
export default function SaasProductInterfaceDesignPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Portfolio"
|
||||
navItems={[
|
||||
{ name: "Work", id: "/" },
|
||||
{ name: "About", id: "/" },
|
||||
{ name: "Services", id: "/" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "contact"}}
|
||||
/>
|
||||
<NavbarLayoutFloatingOverlay navItems={navItems} />
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="SaaS Product Interface Design"
|
||||
description="Designed an intuitive data analytics interface for a growing SaaS platform. Created a comprehensive design system that improved user onboarding, reduced support tickets by 50%, and accelerated feature development."
|
||||
tag="Case Study"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
description="Intuitive interface design for enterprise SaaS product"
|
||||
background={{ variant: "animated-grid" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface showcase"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png", imageAlt: "Data visualization design"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png", imageAlt: "Dashboard interface design"},
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "SaaS interface showcase"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Back to Work", href: "/" },
|
||||
{ text: "View All Projects", href: "/" },
|
||||
{ text: "Back to Projects", href: "/projects" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="overview" data-section="overview">
|
||||
<TextSplitAbout
|
||||
title="Project Overview"
|
||||
description={[
|
||||
"A data analytics SaaS company approached us with a complex challenge: their product was powerful but difficult to use. New customers struggled during onboarding, and support costs were escalating rapidly.", "We conducted extensive user research and discovered that the complexity wasn't the features themselves, but the interface that presented them. Users felt overwhelmed by options and uncertain where to start.", "Our solution was a thoughtful redesign that prioritized clarity, progressive disclosure, and contextual guidance. We created an interactive design system with 15+ component variations that maintained consistency while supporting the product's sophisticated capabilities."]}
|
||||
buttons={[
|
||||
{ text: "View More Projects", href: "/" },
|
||||
]}
|
||||
showBorder={false}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="design-strategy" data-section="design-strategy">
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentyFour
|
||||
title="Design Strategy & Approach"
|
||||
description="Our methodical approach to solving complex product challenges"
|
||||
tag="Strategy"
|
||||
title="Design Solution"
|
||||
description="Creating an intuitive enterprise experience"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Progressive Disclosure", author: "UX Pattern", description: "Implemented progressive disclosure patterns to surface advanced features only when needed. Guided users through workflows step-by-step with contextual help and smart defaults that made quick wins possible.", tags: ["UX", "Onboarding", "Progressive Disclosure"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1", imageAlt: "Progressive disclosure implementation"},
|
||||
id: "1", title: "Dashboard Design", author: "Design", description: "Clean and informative dashboard layout", tags: ["UI", "Dashboard"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Dashboard design"},
|
||||
{
|
||||
id: "2", title: "Design System Creation", author: "System Design", description: "Built a comprehensive design system with 15+ interactive component variations. Documented every component with usage guidelines, do's and don'ts, and code examples. This system enabled developers to build new features 40% faster.", tags: ["Design System", "Components", "Documentation"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png", imageAlt: "Design system components"},
|
||||
id: "2", title: "Component Library", author: "Design", description: "Comprehensive design system and components", tags: ["Design System", "Components"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Component library"},
|
||||
{
|
||||
id: "3", title: "User Onboarding Experience", author: "Product Experience", description: "Redesigned the onboarding flow with interactive tutorials, contextual tooltips, and guided tours. New users could complete key tasks within 15 minutes instead of hours. Support tickets decreased by 50%.", tags: ["Onboarding", "User Education", "Experience"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "Onboarding flow design"},
|
||||
id: "3", title: "User Onboarding", author: "UX", description: "Guided onboarding flow for new users", tags: ["UX", "Onboarding"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Onboarding flow"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="outcomes" data-section="outcomes">
|
||||
<TextSplitAbout
|
||||
title="Project Outcomes & Impact"
|
||||
description={[
|
||||
"The redesigned interface delivered measurable improvements across all key metrics. Support tickets decreased by 50% as users found the product more intuitive and easier to navigate. The onboarding experience was transformed from frustrating to delightful.", "Customer retention improved significantly, with churn decreasing by 25%. Users reported higher satisfaction scores and were more likely to recommend the product to colleagues. The design system became a core competitive advantage.", "Development velocity increased by 40% as the comprehensive design system eliminated design-to-development friction. New features could be implemented consistently and quickly. The company used this efficiency to accelerate their product roadmap."]}
|
||||
buttons={[
|
||||
{ text: "Start Your Project", href: "contact" },
|
||||
]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Let's Collaborate"
|
||||
title="Ready to Simplify Your Product?"
|
||||
description="Let's discuss how thoughtful design and strategic product thinking can make your complex product intuitive and delightful to use."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Build Your SaaS"
|
||||
title="Design for Enterprise"
|
||||
description="Let's create an interface that your users will love"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Send Message"
|
||||
termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
|
||||
buttonText="Discuss Your Project"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
logoText="Our Studio"
|
||||
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
|
||||
rightLink={{ text: "Contact", href: "contact" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user