Shade Quiz
Find shade depth/undertone using branching logic and Tinder-like photo swiping.
This quiz asks a few questions to figure out your undertone and finishes with a series of photos to swipe up or down (for shade depth) and left or right (for undertone). Choosing “select” will introduce you to the recommended product line with a link to the product page.
The swipe effect uses the Hammer library which handles gestures and animations for a group of cards, listening for gestures on the top card. Directional arrow buttons simulate pan gestures on the card. When a tap gesture occurs, the card rotates along the Y-axis. When a pan gesture occurs (you swipe with your finger), the card is animated off the screen based on the direction of the swipe.
Preceding the group of cards is a series of questions to help customers figure out their undertone and shade depth. Then the first card will show the suggested undertone and shade depth picture based off the user’s previous answers.
