Add src/app/projects/ecommerce-platform-redesign/page.tsx
This commit is contained in:
130
src/app/projects/ecommerce-platform-redesign/page.tsx
Normal file
130
src/app/projects/ecommerce-platform-redesign/page.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
"use client";
|
||||
|
||||
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";
|
||||
|
||||
export default function EcommercePlatformRedesignPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
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"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="E-commerce Platform Redesign"
|
||||
description="A complete UX/UI overhaul of an enterprise e-commerce platform that resulted in significant conversion improvements. This project focused on user-centered design, accessibility compliance, and mobile-first optimization."
|
||||
tag="Case Study"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform redesign showcase"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png", imageAlt: "Platform interface design"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png", imageAlt: "Checkout flow optimization"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Back to Work", href: "/" },
|
||||
{ text: "Next Project", href: "/projects/saas-product-interface-design" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="overview" data-section="overview">
|
||||
<TextSplitAbout
|
||||
title="Project Overview"
|
||||
description={[
|
||||
"Our enterprise e-commerce client was struggling with declining conversion rates and high cart abandonment. The existing platform felt cluttered, confusing, and not optimized for mobile shopping.", "We conducted extensive user research through surveys, interviews, and usability testing. The findings revealed critical pain points in product discovery, checkout flow, and mobile experience.", "Through iterative design and testing, we improved the conversion rate by 35%, reduced cart abandonment by 40%, and achieved WCAG 2.1 AA accessibility compliance. The mobile-first redesign resulted in a 60% increase in mobile revenue."]}
|
||||
buttons={[
|
||||
{ text: "View More Projects", href: "/" },
|
||||
]}
|
||||
showBorder={false}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="key-improvements" data-section="key-improvements">
|
||||
<FeatureCardTwentyFour
|
||||
title="Key Design Improvements"
|
||||
description="Major changes that drove business results"
|
||||
tag="Design"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Streamlined Checkout Flow", author: "UX Improvement", description: "Reduced checkout steps from 6 to 3, implemented auto-fill for returning customers, and added clear progress indicators. Guest checkout option was made more prominent, reducing friction for new users.", tags: ["Checkout", "Conversion", "UX"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Checkout flow redesign"},
|
||||
{
|
||||
id: "2", title: "Mobile-First Navigation", author: "Mobile Optimization", description: "Redesigned navigation architecture for touch interaction. Implemented sticky product recommendations and simplified category hierarchy. Mobile revenue increased by 60% following these changes.", tags: ["Mobile", "Navigation", "Responsive"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "Mobile navigation redesign"},
|
||||
{
|
||||
id: "3", title: "Accessibility First", author: "Compliance", description: "Achieved WCAG 2.1 AA compliance with proper color contrast, keyboard navigation, screen reader support, and semantic HTML. Created accessible patterns for complex components like product filters and carousels.", tags: ["Accessibility", "WCAG", "Compliance"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "Accessibility improvements"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="results" data-section="results">
|
||||
<TextSplitAbout
|
||||
title="Measurable Results"
|
||||
description={[
|
||||
"The redesigned platform delivered exceptional business results. Conversion rate increased by 35%, translating to significant revenue growth. Cart abandonment decreased by 40% as the streamlined checkout reduced friction.", "Mobile optimization proved critical, with mobile revenue increasing by 60%. The mobile-first approach ensured the platform performed excellently across all devices, from smartphones to tablets and desktops.", "Customer satisfaction improved significantly. Support ticket volume decreased by 30%, indicating users found the interface more intuitive. The accessibility improvements expanded the addressable market by making the platform usable for everyone."]}
|
||||
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 Improve Your Platform?"
|
||||
description="Let's discuss how user-centered design and optimization can boost your conversions and customer satisfaction."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
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."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user