Zanature
Implementing an AR Shade Finder & Landing Page for cosmetics brand.
Executive Summary
In this project, I integrated an AR shade-matching tool and created a promotional landing page for Zanature. The goal was to address a major barrier in online foundation shopping—difficulty choosing the right shade—which often led to cart abandonment. Additionally, I aimed to replace the brand's manual, unscalable consultation process.I managed the entire product lifecycle: from researching and selecting the AR technology (Holition Beauty) to overseeing its integration. I designed the landing page in Figma and developed it in Framer to promote both the AR studio and a “Sample for 1 PLN” campaign.A key technical achievement was implementing a custom JavaScript iframe solution that connected the AR app's “Add to Cart” feature with Zanature's IdoSell e-commerce platform. I also ensured high usability across devices and collaborated with a copywriter to deliver full Polish localization.The result was a streamlined user experience designed to boost conversions, reduce returns, and increase engagement.
Live landing page here
Problem
The problem I set out to address was that the extensive range of foundation shades made online selection difficult for Zanature's customers, resulting in lost sales and an increased customer support load for the business.
Selection of Satin Cover foundation shades.
User perspective
I understood that Zanature customers struggled to accurately select mineral foundation shades online from a wide array. Their fear of choosing the wrong shade was a major purchase barrier, often leading to cart abandonment.
Business Perspective
Zanature was offering individual online consultations via social media which, while well-intentioned, were time-consuming, inconsistent, and ultimately unsustainable as the brand scaled.
Main Goal
My main goal was to reduce purchase uncertainty by introducing a virtual try-on experience. This aimed to increase conversions, improve user satisfaction, ease the load on customer service, and encourage product trials through a targeted sampling campaign.
Exploration
1. Research & Needs Identification
My user research showed that people feel more confident choosing a foundation after seeing how it looks on their skin. Based on this insight, I defined the main UX goal as reducing purchase uncertainty with a virtual try-on. I also came up with a sampling campaign to let users try the product at a low cost before making a full purchase.
2. Desk Research & Tool Selection
Since a custom AR solution wasn't possible due to budget limits, I explored existing tools. My main criteria were ease of use for Zanature's wide-ranging audience and full Polish localization. I chose Holition Beauty for its intuitive interface, flexible customization, and a unique AI Shade Finder that scans the user's face to suggest the best foundation match.
3. Internal demo
I ran internal usability testing with the Zanature team to check that the AR app worked smoothly and met our user experience goals.
4. Developing project plan
After the internal demo, I made a project plan outlining milestones, timelines, and main deliverables for the design, development, and launch stages.
Implementation
1. App Integration
I mapped the main user flows and found the best place to integrate the app. Then, I worked with a copywriter to improve the Polish translation for clarity and ease of use. Finally, I coordinated between the supplier and our tech team to connect the app with Zanature's online store.
App demo version vs our customized version
2. Assets design
I designed the assets for the campaign, including promotional assets and banners for the online store.
Promotional banner for desktop version of the online store.
3. Landing page design & development
My goal for the landing page was to clearly explain the AR tool, guide users on how to use it best, and encourage them to try the “Sample for 1 PLN” offer to reduce uncertainty. Since no close competitors had a similar page, I followed best practices and tailored them for Zanature.Our key messages were “Matching foundation shade has never been easier” and “Test the formula on your skin for 1 PLN.” The page also had to emphasize 3 rules for best AR results (no makeup/glasses, daylight). I used Google Gemini to simplify content and align it with the brand voice guidelines.I started with black & white sketches for structure, then made a simple content map and moved to iterative visual design in Figma, adhering to brand guidelines. I developed it in Framer due to my tight deadline and experience with the platform.
Some of my early sketches
Desktop explorations from my Figma file
4. Testing & Launch
I conducted pre-launch corridor usability tests (10 users) on the entire flow. One of the major findings from these tests was that when users viewed the AR app embedded on the landing page and pressed the “Add to Cart” button, nothing happened. This occurred because the app, running in an iframe on the landing page, had no direct connection to the store's basket. My solution, which proved effective, was custom JavaScript that listened to iframe events. It captured the product ID when the button was pressed and then opened the correct IdoSell product page in a new tab. This worked like a charm.
Live landing page here
Desktop version of the landing page developed in Framer
Mobile version of the landing page developed in Framer
Outcomes & Impact
Enhanced Customer Experience
The AR tool I implemented directly addressed a major customer pain point, making online foundation selection easier, more interactive, and significantly reducing the uncertainty and fear of making a wrong choice. We expected this to lead to higher customer satisfaction and a more enjoyable shopping journey.
Increased Conversion Rates & Reduced Cart Abandonment
By allowing customers to virtually try on shades, the tool aimed to boost their confidence in purchasing, directly tackling a key reason for cart abandonment. We anticipated this would translate into higher online sales.
Lower Return Rates
We expected that improved shade matching accuracy through virtual try-on and the AI Shade Finder would decrease the number of product returns due to incorrect shade selection, saving costs and logistical efforts for Zanature.
Scalable Customer Support
The AR tool provided a self-service solution for shade matching, which I believe reduced the reliance on time-consuming, individual consultations. This allowed Zanature's customer support to scale more effectively as the brand grew.
Key Learnings
User-Centricity is Key
I learned that directly addressing a well-understood user problem was fundamental to this project's potential success. Deeply understanding the user perspective is crucial for developing effective solutions.
AR is a Powerful Tool for Beauty E-commerce
This project showed me that Augmented Reality can effectively bridge the gap between the online and offline shopping experience for products like foundation, where visual matching is critical.