Chose Your Offer

Project Scope

This type of gamification can be used to highlight bestsellers or seasonal offerings. The type of deal the customer receives for playing the game is always the same however the illusion of choice leads the user feeling more empowered and more likely to provide their email address or phone number in order to discover their discount.

High-fidelity mockup of chose your offer gamification onsite experience
High-fidelity mockup of chose your offer gamification onsite experience
High-fidelity mockup of chose your offer gamification onsite experience

Story Board

Step 1
High-fidelity desktop mockup of step 1
High-fidelity desktop mockup of step 1

The user will be show three products. When the user hovers over a product it will grow in size by 20% and tilt to the side.

Step 2
High-fidelity desktop mockup of step 2
High-fidelity desktop mockup of step 2

Once a product has been selected it will tit to the side and the other two products will fade by 50% opacity.

Step 3
High-fidelity desktop mockup of step 3
High-fidelity desktop mockup of step 3

Next, the selected product will grow by 20% and move to the center of the frame, the other products will fade away completely.

Step 4
High-fidelity desktop mockup of step 4
High-fidelity desktop mockup of step 4

The selected product will then also fade away and the exclusive offer will be revealed from behind the selected product.

Step 5
High-fidelity desktop mockup of step 5
High-fidelity desktop mockup of step 5

Users is prompted to input their email address. When user does so and clicks “Get My 10% Off”, the experience will progress to Step 4.

Step 6
High-fidelity desktop mockup of step 6
High-fidelity desktop mockup of step 6

A coupon code will be generated for user and the user can chose between shopping bestsellers or continuing shopping. The coupon code will have the click to copy feature.

Mobile Experience

High-fidelity mobile mockup of step 5
High-fidelity mobile mockup of step 5
High-fidelity mobile mockup of step 5
High-fidelity mobile mockup of step 2
High-fidelity mobile mockup of step 2
High-fidelity mobile mockup of step 2
High-fidelity mobile mockup of step 3
High-fidelity mobile mockup of step 3
High-fidelity mobile mockup of step 3
High-fidelity mobile mockup of step 4
High-fidelity mobile mockup of step 4
High-fidelity mobile mockup of step 4
High-fidelity mobile mockup of step 5
High-fidelity mobile mockup of step 5
High-fidelity mobile mockup of step 5
High-fidelity mobile mockup of step 6
High-fidelity mobile mockup of step 6
High-fidelity mobile mockup of step 6

Let’s get a conversation started!

Create a free website with Framer, the website builder loved by startups, designers and agencies.