Overview
Chanel launched its newest fragrance called ‘Chance‘ and the brand needed to incorporate high-quality images of the product into their official website while ensuring it was responsive across all devices. The site update was primarily focused on promoting the new fragrance to capture the attention of the target audience and provide an engaging user experience.
Challenges
- Image optimisation: Chanel needed to optimise the images without compromising their quality to ensure a smooth and fast user experience. High-quality images can be large in size, which could have slowed down the website’s loading time.
- Visual consistency: Chanel needed to ensure that the high-quality images aligned with the overall branding and visual style of their website. Consistency in imagery, color schemes, and typography was needed to maintain a cohesive and professional look.
- Brand Image: Since it was a new fragrance of a huge luxury brand being launched it was essential that the launch went absolutely perfect, with little to no bugs on the website.
- Responsive design: Making the website responsive across different devices and screen sizes was another challenge. Chanel needed to ensure that the images adapted and displayed correctly on various devices, including desktops, laptops, tablets, and mobile phones.
- Cross-browser compatibility: Different web browsers may render images differently, leading to inconsistencies in appearance. We had to test the website and images across various browsers (such as Chrome, Firefox, Safari, and Edge) to ensure a consistent and visually appealing experience for all users.
- Scalability: It was expected that the popularity of the new fragrance would grow, the website’s traffic may increase significantly. The website needed a plan for scalability and ensure that the website could handle increased user loads without compromising performance.
- Testing and quality assurance: Prior to the website launch, rigorous regression testing and quality assurance measures had to be taken to identify and resolve any potential issues related to image loading, responsiveness, and overall user experience.
- iFrame & E-commerce: The website had various iFrames on different pages which had to be tested as well, along with the Add to cart functionality to purchase the new fragrance, which had to be tested as well.
Solution & Strategy
- A comprehensive test strategy was produced for the multi-locale site, and wireframes, PSDs, and copy docs were analyzed to ensure that all user stories were broken down into tasks and test cases were created in Testpad. A browser matrix of real devices was agreed upon to test against.
- During the initial testing phase, test runs were executed on desktops, tablets & mobiles to check the iframe implementation of the new product, to ensure proper loading, responsiveness, and security of the iFrames on different pages. We also tested site responsiveness across approved devices, and ensured the successful implementation of Chanel’s Chance images that led to the product page.
- Additionally, thorough testing of the e-commerce functionality, including the “Add to Cart” feature, was performed to ensure accurate product addition, proper cart updates, and a smooth checkout process. Payment gateway integration, order management, and tracking was also tested to ensure a secure and seamless shopping experience for customers.
- In the subsequent sprints, the E-Commerce & add to basket functionality were tested as per the locale, ensuring that the right-to-left format for Arabic did not present any issues, and the UX for product purchase was seamless. Site & social media links were also tested, and the correct copy as per locale was verified.
- The site was tested on QA and Pre-Prod environments using magic cards to perform purchases in the sandbox environment. A smoke test was performed for every new build, and the release candidate was fully tested, including regression. Finally, GO LIVE and a final smoke test was performed on PROD.
- To address the challenge of image optimization, we utilized techniques such as image compression and lazy loading.
- We ensured visual consistency by creating a comprehensive style guide, conducting regular reviews and performing regression testing to maintain the established visual style.
- To provide a seamless user experience, the website went through various rounds of regression testing, so all bugs could be identified and removed from the website.
Conclusion
- The launch of the new fragrance went extremely well, with sales being in the thousands, additionally it was very well received not only by Chanel loyal customers but also by people who were trying out the brand for the first time.
- In conclusion, we implemented a comprehensive test strategy, ensuring proper functionality and localization for the multi-locale site. Thorough testing covered iframe implementation, site responsiveness, e-commerce functionality, and visual consistency.
- Image optimization techniques were employed, and multiple rounds of regression testing were conducted to remove bugs and provide a seamless user experience. We executed smoke tests after every major change, and full regression testing in different environments, and a final smoke test on the live site, resulting in a successful launch.