Skin Type Tester with Product Recommendations

View Live Website

Overview

A beauty brand in Spain approached me to build a custom Skin Type Tester on their Wix website. The goal was to guide users through an interactive series of questions, determine their skin type, and then offer personalized product recommendations—all within a smooth and engaging interface.

This project demanded a combination of smart logic, engaging UI design, and seamless navigation. Using Wix Velo, we created a powerful yet intuitive quiz tool that enhanced both the user experience and the brand’s online conversion strategy.

The Problem: Lack of Personalization & User Guidance

The client’s website lacked an interactive element that could guide users to products based on their individual skin characteristics. Key challenges included:

❌ No Dynamic Questioning: A static questionnaire couldn’t adapt to user answers.

❌ No Progress Visibility: Users had no indication of how far they were into the test.

❌ One-size-fits-all Recommendations: Product suggestions were generic, missing the opportunity for personalized engagement.

The business needed a tool that made users feel heard, guided, and supported—while improving product discovery and driving sales.

The Solution: A Fully Interactive & Personalized Testing Experience

To meet these goals, we developed a custom Skin Type Tester using Wix Velo and JavaScript, incorporating conditional logic, UI enhancements, and tailored content.

1. Smart, Dynamic Question Flow

Using custom JavaScript and Velo’s backend logic, we created a question system where each answer dynamically influenced the next question. This adaptive experience made the test feel more personal and relevant to each user.

2. Real-Time Progress Tracking

A progress bar was integrated to show users how far they were in the test. It updated in real time, giving a sense of direction and motivation to complete the quiz.

3. Reset Functionality for Full Control

We implemented a reset feature allowing users to start over at any point—without any glitches or page reloads. This empowered users to re-evaluate their choices and explore different paths.

4. Personalized Product Recommendations

At the end of the test, a smart matching system generated custom product suggestions based on the user's skin type and quiz responses. These recommendations were linked directly to product pages to boost conversions.

5. Seamless UX to Result Page

The entire journey—from first question to personalized results—was smooth and intuitive. The final page displayed not only products but also wellness tips and relevant skin care advice to enrich the user experience.

Results & Impact

✅ Improved User Engagement: Users interacted more deeply with the website, spending more time exploring the tester.

✅ Higher Conversion Rates: Product click-through and sales increased due to tailored recommendations.

✅ Positive Feedback: The intuitive design and personalization received praise from both the client and end-users.

✅ Brand Differentiation: The unique, intelligent feature set the website apart from generic competitors.

Technologies Used

⚡️ Wix Velo – Custom logic, event handling, and database integration

⚡️ JavaScript – Dynamic flow, conditional rendering, and user interaction handling

Let’s Personalize Your Website Experience!

If you're looking to create interactive tools, quizzes, or dynamic features that boost engagement and guide your customers to the right products, we’d love to help! Whether you’re in beauty, health, or any other industry, custom features like these can take your website to the next level.

🚀 Get in touch today, and let’s build something powerful together!