~$perlat kociaj
Nivea Skincare Website
Nivea2023
E-commerceVue.jsNuxtTailwind CSS +2 more

Nivea Skincare Website

Redesigned the e-commerce experience for a leading skincare brand, improving conversion rate by 35% and implementing personalized product recommendations.

Client

Nivea

Timeline

4 months

Services

UX/UI Design, Frontend Development, API Integration, Performance Optimization

Technologies

Vue.js, Nuxt, Tailwind CSS

The Challenge

Nivea needed to completely overhaul their aging e-commerce platform. The existing site suffered from poor mobile responsiveness, slow loading times, and a confusing checkout process that was causing high cart abandonment rates. They also wanted to incorporate product recommendations but lacked the technical infrastructure to implement personalization.

Project Goals

  • Improve mobile experience with responsive design
  • Reduce page load time by at least 40%
  • Simplify the checkout process to reduce abandonment
  • Implement AI-powered product recommendations
  • Increase conversion rate by at least 20%

Before & After Transformations

Homepage Redesign

After: Homepage Redesign
Before: Homepage Redesign
Loading images...
We completely redesigned the homepage to focus on product discovery, with a cleaner layout and improved visual hierarchy.

Mobile Shopping Experience

After: Mobile Shopping Experience
Before: Mobile Shopping Experience
Loading images...
The mobile experience was transformed to provide a seamless shopping journey with intuitive navigation and accessible product information.

Project Gallery

Nivea homepage design
Product detail page
Mobile checkout flow
Recommendation engine in action

The Solution

We developed a modern, responsive e-commerce platform built on Vue.js and Nuxt.js, with a focus on performance and user experience. The design process began with extensive user research and wireframing, allowing us to create a streamlined shopping experience with intuitive navigation and product filtering. We implemented a headless CMS approach with GraphQL for flexible content management, and integrated with their existing product database for real-time inventory and pricing.

1

Discovery & Research

Conducted user interviews, analyzed competitors, and audited the existing website to identify pain points and opportunities.

2

UX/UI Design

Created wireframes and high-fidelity designs with a focus on mobile-first, intuitive navigation and clear product presentation.

3

Development

Built a performant frontend with Vue.js and Nuxt.js, using Tailwind CSS for responsive styling and implementing optimized image loading.

4

Integration & Testing

Connected to backend systems via GraphQL, implemented AI recommendation engine, and conducted extensive testing across devices.

Technical Details

The application uses Nuxt.js for server-side rendering, which provides excellent SEO performance while maintaining fast page loads. We implemented a GraphQL API layer to efficiently fetch only the required data for each page. For product recommendations, we integrated a machine learning algorithm that analyzes browsing history and purchase patterns. The checkout process was rebuilt with a step-by-step flow that saves progress at each stage, reducing abandonment due to session timeouts.

Technologies Used

Vue.jsNuxtTailwind CSSNode.jsGraphQL

Results & Impact

The redesigned website launched after 4 months of development and immediately showed impressive results. Mobile traffic increased significantly, and the improved user experience led to higher engagement metrics across all devices. The simplified checkout process and personalized recommendations contributed to a substantial increase in conversion rate.

35%
Conversion Rate Increase
52%
Faster Page Load Time
27%
Reduction in Cart Abandonment
S

Sara Johnson

Digital Marketing Director, Nivea

"The new website has transformed our online presence. Not only does it look fantastic, but the performance improvements and recommendation engine have had a direct impact on our bottom line. The team understood our needs perfectly and delivered beyond expectations."

Services Provided

  • UX/UI Design
  • Frontend Development
  • API Integration
  • Performance Optimization

Need a similar project?

Let's discuss how I can help bring your vision to life with a tailored solution.

Contact Me

Ready to start your project?Get in touch today to discuss your requirements.