Incanto is a premium lingerie and fashion retailer known for its elegant designs and high-quality products. Their online presence plays a crucial role in engaging customers and driving sales. This case study explores the UX redesign of Incanto’s website, focusing on usability, aesthetics, and performance, with Framer as the primary design and development tool.
Project Overview
Client:
Incanto – A luxury lingerie and fashion brand with a strong international presence.
Project Scope:
Improve the user experience to enhance conversion rates.
Optimize the mobile shopping experience.
Implement a modern, visually engaging interface using Framer.
Increase page speed and performance for better customer retention.
Role & Team:
UX/UI Designer: Led research, wireframing, prototyping, and interface design.
Frontend Developer: Implemented designs using Framer’s no-code/low-code capabilities.
SEO Specialist: Optimized for search engine visibility.
Project Manager: Coordinated timelines and deliverables.
Problem Statement
The previous Incanto website faced several UX challenges:
Complex Navigation: Users struggled to find specific products due to a cluttered menu and unclear categorization.
Slow Load Times: Heavy imagery and inefficient coding slowed down the site, leading to a high bounce rate.
Lack of Visual Engagement: The previous design did not fully reflect Incanto’s luxury brand identity.
Inefficient Checkout Flow: Users abandoned their carts due to a lengthy and confusing checkout process.
Mobile Responsiveness Issues: The site was not fully optimized for mobile, affecting usability and conversions.
Research & Insights
User Research & Competitive Analysis
We conducted:
User interviews: With existing customers to understand pain points.
Heatmap analysis: To track user interactions on the site.
Competitor analysis: Examined leading fashion and lingerie e-commerce sites like Victoria’s Secret and La Perla.
Key Findings:
70% of users accessed the site via mobile, but mobile conversion rates were significantly lower than desktop.
Users preferred visually rich product pages with zoomable high-quality images.
A shorter, more intuitive checkout process increased conversion rates on competitor sites.
Design Process
1. Wireframing & Prototyping
Using Framer, we created low-fidelity wireframes to establish a new site structure:
Simplified navigation: Categories were reorganized based on customer behavior.
Enhanced product pages: Larger images, quick-view options, and clear pricing.
Revamped checkout flow: Fewer steps, guest checkout option, and improved form design.
After multiple iterations, we developed high-fidelity prototypes with interactive transitions to simulate the final experience.
2. UI Design & Branding
Modern & Elegant Aesthetic: A minimalist yet luxurious design, with a focus on white space, refined typography, and soft pastel tones to align with Incanto’s brand.
Dynamic Microinteractions: Implemented hover effects, smooth scrolling, and fluid animations for a premium feel.
Framer’s Component System: Allowed for reusable UI components, ensuring consistency across pages.
3. Development with Framer
Performance Optimization: Lightweight animations and image compression techniques ensured fast load times.
SEO Best Practices: Implemented structured data, optimized metadata, and mobile-first indexing.
Accessibility Considerations: Ensured proper color contrast, readable fonts, and keyboard navigability.
Final Solution & Key Features
1. Improved Navigation & Information Architecture
✅ Mega Menu with Visual Categories: Users can quickly find product categories with image-based navigation.
✅ Smart Search with Predictive Suggestions: Faster product discovery using AI-driven search recommendations.
2. Enhanced Product Pages
✅ High-Resolution Image Zoom: Users can inspect fabric details before purchasing.
✅ Sticky Add-to-Cart Button: Ensures a seamless shopping experience.
✅ Social Proof Elements: Customer reviews and star ratings increase trust.
3. Optimized Checkout Flow
✅ One-Page Checkout: Fewer form fields and autofill options reduce friction.
✅ Multiple Payment Methods: Including Apple Pay, Google Pay, and Klarna for flexible payment options.
4. Mobile-First Experience
✅ Progressive Web App (PWA) Capabilities: Users can install the site as an app for a native-like experience.
✅ Thumb-Friendly Design: Essential CTAs positioned for easy tapping.
Tools & Technologies Used
Design & Prototyping: Framer
Development: Framer’s built-in low-code framework
Analytics & Testing: Google Analytics, Hotjar, Lighthouse Performance Tests
Project Management: Notion, Slack
Would love to hear your thoughts—how can we further refine Incanto’s digital experience? 🚀
The website is an online store that specializes in clothing and underwear. It offers a variety of products, including bras, panties, lingerie, and casual wear.