French Factor is premium perfume brand based in USA. The website, a masterpiece of design and development, reflects the brand's luxurious ethos with its seamless animations and refined aesthetics. Each element is crafted to offer a classic and immersive experience, echoing the timeless sophistication of French perfumery. The site's design is not only visually stunning but also a testament to the brand's commitment to quality and elegance.
We were assigned to design and develop 20 premium product pages for French Factor, each capturing the essence of their men's and women's perfumes. Over three months, we also integrated seamless animations to elevate the site's luxurious experience.
UX Research
UI Design
Custom Shopify
Animations
3 Months
French Factor
We engaged in extensive discussions with French Factor’s stakeholders to deeply understand and align with the brand vision, ensuring every detail was in harmony with their luxury ethos.
Dedicated to designing the product pages, where critical thinking was applied to bridge stakeholder expectations with eCommerce business goals. This meticulous approach ensured that the final designs not only met but exceeded expectations, delivering an extraordinary and seamless digital experience for French Factor.
We’ve divided each product page into 8 Sections. Navigation and Footer will generics for all Products to keep the consistency all over the website.
The user's goal is to connect with the story behind each perfume before making a purchase. They want to know what kind of fragrance it offers, the elements French Factor used to create it, and ultimately, what makes it special. This connection gives them a compelling reason to buy, as they feel more attached to the story and the essence of the perfume.
The user's goal is to connect with the story behind each perfume before making a purchase. They want to know what kind of fragrance it offers, the elements French Factor used to create it, and ultimately, what makes it special. This connection gives them a compelling reason to buy, as they feel more attached to the story and the essence of the perfume.
This is where we designed over 4+ Hero Screen banners for each perfume, carefully designed according to the stakeholders' brief. We focused on finalizing the hero section that best matches the personality of each fragrance, ensuring it resonates with the story and essence of the perfume.
When finalizing a product page, it's essential to include key elements that effectively convey the perfume's identity. The page should start with a captivating Hero Section that reflects the fragrance's essence, followed by a detailed Product Description. Highlight the Key Notes to emphasize the primary scents and ingredients, and clearly present the USPs that set the perfume apart. Including Product Reviews adds credibility, while Upselling Other Family Products enhances the shopping experience by offering complementary options.
Jitter was instrumental in animating each product page in Figma, helping us create smooth and engaging interactions. This tool allowed us to enhance the user experience, making the pages more dynamic and visually aligned with the luxury of the French Factor brand.
As we transition into the development phase, our team is focused on translating the creative designs into a fully functional digital experience. This phase involves coding the layouts, integrating essential features, and ensuring seamless interactions across devices.
To address the challenge of making custom pages on Shopify with smooth animations and an enhanced eCommerce flow, here are some specific problems and solutions
Complex animations or custom interactions can cause page loading issues or slow down the performance, especially on mobile devices, which can negatively impact the user experience.
Shopify’s built-in themes often have limited customization options for advanced animations or highly personalized user flows, which can restrict creativity and brand-specific designs.
Optimize animations by using lightweight CSS animations rather than heavy JavaScript-based ones. Also, consider lazy-loading elements and animations that only trigger when needed. Tools like WebP for images and minifying CSS and JS files can improve performance while keeping animations fluid.
Use Shopify’s custom Liquid code to go beyond standard theme templates. For animations, integrate custom JavaScript or CSS animations within the Liquid files. Shopify also allows for embedding third-party animation libraries like GSAP or ScrollMagic to create smooth, responsive animations.
Jitter was instrumental in animating each product page in Figma, helping us create smooth and engaging interactions. This tool allowed us to enhance the user experience, making the pages more dynamic and visually aligned with the luxury of the French Factor brand.
The website has undergone rigorous testing on each device, ensuring optimal performance and consistency across various platforms, including Windows, Mac, iOS, and Android. This thorough process guarantees a flawless user experience, regardless of the device used to access the site.
The website has been successfully launched, delivering a seamless and polished experience across all devices. After thorough testing and refinement, we’re excited to see it live and ready for users to explore.
Visit Website