Crossover — a promo website of a car draw for orders in a retail chain's delivery service
For four weeks of April, participants signed in to the campaign site got chances for orders in the chain's delivery app: an order of 1400 ₽ or more gave 1 chance, and an order of 1400 ₽ or more with ready meals or a partner product from the selection gave 2 chances. Every week more than 100 prizes were drawn — certificates for travel, outdoor goods and electronics, loyalty programme points, online cinema subscriptions — and the main prize was a family car. For signing up, a participant chose a guaranteed gift — an online cinema promo code.
- Role
- Frontend developer
- Timeline
- 2025, March — April
The challenge
Build the promo website from a ready design on the shared base of the chain's campaigns: the home page with an animated first screen, the mechanics, prizes and selections for double chances, sign-in, an account with chances by week, the gift choice and prizes, and the winners page.
What the solution includes
- The first screen with an Adobe Animate animation in a frame on desktop and a static picture on phones.
- The mechanics as a slider of four steps with its own numbered navigation; prizes in three tabs: the main one, weekly ones (a grid on desktop, a slider with a counter on phones) and guaranteed ones.
- The double chances block — a slider of selections linking into the delivery app, with analytics goals on clicks.
- The account: chances by week with dates and a breakdown by order type, chances in the main draw with progress over the four weeks, a hint on how to earn chances.
- The guaranteed gift for signing up: after accepting the rules, a dialog links to the choice; in the account, a slider of three promo codes; the chosen code opens in a dialog and appears among the participant's prizes with copying and terms of use.
- Sign-in through the chain's single customer account (OAuth), winners with a search by phone and filters by week and prize, FAQ, feedback, a responsive layout.
A commercial team project: I built the whole frontend from a ready design; the first screen animation is an Adobe Animate export. Screenshots are from a local build with test data; the logos, names and QR code of the chain and its delivery service, the name of the bonus programme, the car make and the names of the online cinemas are hidden.