Beauty for all
A PERSONALIZED SHOPPING EXPERIENCE FOR ALL SKIN TONES AND BEAUTY GOALS
Featured deliverables:
- Architecture
- Custom eCommerce Functionality
- eCommerce Integrations
- SEO
- Internationalization
- Visual Page Builders
Based out of Los Angeles, Milani Cosmetics is a market leader in the beauty and cosmetics industry. Milani products are sold in 75 countries through retail partners such as Walmart, Walgreens, Ulta, Target, and CVS.
In addition to these partner sales, MilaniCosmetics.com provides a direct channel for customers to purchase products.
In redesigning this website, the goal for this project was to create a fresh, fast and engaging experience that would grow direct to consumer relationships.
This custom build for Shopify features a series of bespoke features and interfaces that deliver an innovative, engaging, and optimized purchase experience and continues to build the Milani brand for people of all skin tones and beauty goals. This includes content and product personalization throughout product, category and related interfaces automatically select variants for skin tone based on user selection from the 45 available skin tones in the new Pick Your Perfect Shade tool.
The background
Complete redesign & rebuild
In addition to a variety of new tools and functionality such as the innovative Pick Your Perfect Shade tool and the 45 available skin tone selections, this project was a complete rebuild based on the designs provided by CASE based out of New York.
The rebuild included deeper integrations of existing 3rd-party APIs and applications in addition to custom-built functionality and new applications.
Personalized experiences
Intelligent variant selection
The product card and single product views were built to provide personalized and automatic variation selection based on user selection of a skin tone through the Pick Your Perfect Shade interface.
The color matching system includes matching for all variants to one of the 45 available skin tones. This ensures products with differently named but equal skin tone colors are discovered equally throughout the site.
Customers can use the Pick Your Perfect Shade tool to select their preferred variant for purchase throughout the site or in-store, bridging the gap between brick and mortar and digital retail.
Personalized, dynamic product bundles
An interactive quiz experience that recommends personalized, discounted bundles to customers
In addition to the Pick Your Perfect Shade selection and the personalized site-wide shopping and content experience the tool provides for skin tone, the new website offers customers a dynamic, discounted product bundle based on their answers to four additional and optional quiz questions.
These questions include preferences for eye color, preferred skin finish type, preferred lip color type, and makeup expertise level.
At the conclusion of this quick quiz, customers can purchase personalized recommendations uniquely bundled just for them for a discount. Customers also have the option to purchase products individually through Quickshop.
Dynamic product filtering
A comprehensive product browsing experience
A filter menu available at the top of all category pages displays filter groups and checkboxes for filtering down product selections. These include regular filter groups across all products such as Finish type, Color, and other common attributes.
In addition, custom filter groups can be added instantly by the Milani team through a unique naming convention for product tags. Newly added filter groups display after the default set of filters and allow customers to more easily find groups of products they’re most likely to purchase.
Custom page builders
Component-driven, visual design & backend editing
A set of universal and page-specific component allows for fast prototyping and updates in any area of the new site.
The speed and flexibility of the page builders allow the Milani team to quickly prototype, test and publish content for new campaigns. When areas of new technology are developed, these components can also be extended to make up new interfaces and pages.
Many components include advanced technical integrations with 3rd-party API services or apps, including for functionality around reviews, videos, featured product images, and more.
Page builders and components available across multiple templates puts the power of customizability in the hands of Milani’s team so they can quickly build new campaigns, content, product launches, and partnerships.
A D2C experience for a retail leader
Ethical, transparent product badges
In the new decade, a significant majority of consumers across all areas of retail make purchasing decisions around a brand’s ethics and transparency. These choices apply acutely during eCommerce purchases thanks to the available competition and ease of purchase for competing products.
The new Milani website features badges that quickly symbolize the manufacturing process and other details across products. The badges communicate this information quickly and effectively.
Pixlee for Shopify
Building customer confidence with social proof from Instagram
Instagram is a core part of the new Milani website including multiple integrations with Pixlee. These widgets provide a channel to re-share user-generated content on Instagram tagged with unique hashtags and references. The platform allows the Milani team to moderate submissions before they’re featured on the front page of the website and throughout product and category pages.
These social proof widgets engage and build trust with new customers before purchase. For both repeat and returning customers, Pixlee provides a visual reference to follow for new purchases. These widgets also build loyalty and long-term relationships with customers who submit the user-generated content on Instagram as well.
Shopify applications & 3rd-party APIs
Custom integrations
In addition to the integrations mentioned, the new website features functionality for free gifts through preset thresholds at checkout, an affiliate platform that delivers rewards in exchange for word of mouth referrals from customers, and a build-your-own-kit product type that allows customers to pick and choose variants from a pre-defined set of products purchase together at a discount.
During the checkout and purchase process, the new website also features an Afterpay financing integration.
A design system to scale
Reusable style guide classes
User experience consistency is an essential part of the new website. By establishing consistency, the user experience itself establishes trust and returning purchases for the brand.
The design style guide provide by CASE was translated into a design system at the start of the project to speed up the development of new and existing functionality and interfaces. By establishing a set of pre-defined mobile, tablet and desktop styles for typography, buttons, images, and other major elements, development time and costs were reduced.
The design system was also built with flexibility in mind, allowing for easy customizations of pre-defined styles to avoid re-creation and instead use existing building blocks during the entire front-end development and coding process.
Product context & social proof
Product reviews, questions & answers
Each product page and product card on the new Milani Cosmetics website features a star rating that fits seamlessly within the overall visual style and aesthetic of the site. The ratings functionality is powered through a 3rd-party application which is deeply integrated throughout multiple components on the site.
On the product page, users can easily submit new reviews or search through existing ones using a variety of filter tools. A question and answer section also provides a direct connection between prospective customers and the Milani team who answers questions with a verified badge next to each official reply.
An Ecommerce Intelligence Engine
AI-Powered Product Recommendations
In addition to displaying the product result slots for the quiz, Nosto powers a variety of product recommendation components throughout the site including the home, checkout, and 404 pages.
Bridging the gap between retail & digital
Content-based shopping experiences
Through a content-based shopping experience, the new website is a platform to provide product recommendations through partnerships with content creators, influencers, and others.
Through the use of auto-playing, muted videos, customers have a chance to see how the product will actually work after they purchase in addition to inspiration to achieve new looks and styles. This additional context gives customers the confidence they need to use the product to its fullest extent in addition to sharing with existing customers new, relevant products they may not have yet tried.
The videos both engage the user and build the value of partnerships and cross-platform content marketing.
This template includes a page builder system with components integrated with the Vimeo API to provide muted and unmuted functionality via tap for mobile or hover for desktop.
Results
The new MilaniCosmetics.com
The new Milani Cosmetics online platform works in tandem with continuous marketing and promotional cycles as a destination for building long-term connections with customers through personalized and valuable content. As a result, the brand increases D2C sales, brand loyalty, and overall engagement.
The architecture for this project included many additional details behind the scenes, including extensive responsive development for all screen sizes, specially optimized code structure for SEO, and functionality for international sales.
— MilaniCosmetics.com
