Pick A Card

Project Scope

The customer will interact with branded playing cards inspired by the client's “All Hands on Deck” playing card deck to reveal an offer that they can use at when checking out. The game is triggered immediately on first page view. Both anonymous and prospective customers, who are not on the CRM list and have never purchased before will receive this game.

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

Customer can select one of three cards. When they hover over the cards on desktop, the card flips over.

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

After the customer selects a card, the other two cards will fade away .

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

The selected card will grow in size by 20%

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

The selected card will flip over one more time to reveal what the user has won.

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

The selected card will fade away after two seconds and the customer will be prompted to enter their email address to use the offer.

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

After the customer submits their email address, a coupon code will be
revealed for them to use at checkout.

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.