Nespresso Professional — Flavour Quiz app

Nespresso Professional supplies coffee machines and capsules to offices, hotels and other businesses. Its Flavour Quiz helps business customers find the right coffee: up to four quick questions lead to a single recommendation, complete with a description, an intensity rating, a link to buy, related capsules and the sales team’s phone number.

Business customers face a lot of choice — different origins, Ristretto, Lungo and Bianco blends, flavoured coffees and decaf — and the old quiz page made it harder. Its hand-written jQuery show-and-hide logic was difficult to follow and change. Going back with “Previous” left stale buttons and carousel choices behind, the intensity bar showed the wrong level for some coffees, leftover code threw a JavaScript error, and “Take the quiz again” reloaded the whole page. It also relied on jQuery, Bootstrap, Owl Carousel and external fonts and images, some hosted on servers that no longer exist.

The original quiz was a Marketo-hosted landing page, built to engage visitors and pass them on to sales. I rebuilt it from the ground up as a modern React app that behaves correctly, looks polished and is far easier to maintain and deploy.

I rebuilt the quiz as a self-contained React app with all its fonts and images bundled locally. Visitors choose a cup size (small 25ml, medium 40ml or large 110ml), an intensity (milder, intense, or decaf for large cups), whether they want the softer taste of Arabica or the extra “kick” of Robusta, and an aroma profile such as honey, caramel, cocoa or woody.

Only options that lead to a real coffee are shown, so every path ends in a recommendation. The result shows the coffee with its picture, an animated intensity bar out of 12, a short description and a product link, plus a carousel of related capsules and a contact section with the sales number. Questions slide in, the background changes at each step, and “Previous” and “Take the quiz again” now reset cleanly without reloading the page.