Nespresso – flavour profile quiz CRM

Official Nespresso® flavour quiz CRM “Find your your perfect Nespresso professional coffee moment.” A pure JavaScript, jQuery, HTML 5, and Bootstrap 4 web application.

ReallyB2B

This Nespresso Professional application has the core purpose of helping its consumers find out their best Nespresso coffee experience.

While working at ReallyB2B I had numerous opportunities to solely make huge modifications and amends to this particular web application. This was initially developed by the previous developer couple of years back. Credit to him, as in my opinion given the client’s requirements at the time he chose all the appropriate and most efficient programming languages to create the app.

Deployment
This is a pure hand-coded project hosted in Marketo.

While at ReallyB2B, one of Nespresso’s requests was to make some changes to the logic, changing and adding some images to it. While working on it I immediately noticed that this app has been almost created in two separated logics on which I kept wondering why.

Along with these changes, there were many more on which are impossible to write them all, therefore, I have left the link to both before after the changes were made at the bottom of this post.

Decision making (purely nightmare)

Nespresso (flavour profile quiz) Homepage

The app had a unique logic with its unique results for small (25ml) size coffees which on question 2 would then immediately reveal question 4 (Aroma) as question 3 no matter what the user’s choice on question 2 (Mild or Intense) would be. As part of the amend I was forced to practically restructure this application but merge this logic together so that onclick of question two would reveal question 3 (Kick) in its correct place and on click of question 3, it would then reveal question 4 (Aroma). However, on click question 2 (Mild or Intense), if the user chooses MILD it should still skip question 3 and show question 4 in its place instead, but if the user chooses INTENSE, then reveal question 3 and then question 4 as normal.

Ok, so I went ahead and made some modifications to a function called “question2Click“.

Before:

// Reusable function for when user selects an option
  function question2Click() {
    if (question1Answer === "Small") {
      // Run code to show question 4 as question 3
      narrowEarlyButtons();
      // Fade out old text
      $("#containerQuestion2").fadeOut(750);
      // Animate background image transition
      $("#heroImage2").animate({
        'opacity': '0'
      }, 500);
      $("#heroImage4").css({
        'display': 'block'
      });
      $("#heroImage4").animate({
        'opacity': '1'
      }, 500);
      if (question2Answer === "More"){
        $("#galleryMild").hide();
        $("#galleryIntense").show();
      }
      // Update nav menu
      $("#question3Nav").addClass('fill-nav');
      $("#question3Nav").addClass('bg-gold');
      $("#questionTitle").fadeOut(function() {
        $(this).text("QUESTION 3:").fadeIn();
      });
      setTimeout(function() {
        // Show new text
        $("#containerQuestion4").show();
        // Bring in first question
        $("#containerQuestion4").animate({
          'left': '0px'
        }, 600);
      }, 1250);
    } else {
      // Fade out old text
      $("#containerQuestion2").fadeOut(750);
      // Animate background image transition
      $("#heroImage2").animate({
        'opacity': '0'
      }, 500);
      $("#heroImage3").css({
        'display': 'block'
      });
      $("#heroImage3").animate({
        'opacity': '1'
      }, 500);
      if (question2Answer === "More"){
        $("#galleryMild").hide();
        $("#galleryIntense").show();
      }
      // Update nav menu
      $("#question3Nav").addClass('fill-nav');
      $("#question3Nav").addClass('bg-gold');
      $("#questionTitle").fadeOut(function() {
        $(this).text("QUESTION 3:").fadeIn();
      });
      setTimeout(function() {
        // Show new text
        $("#containerQuestion3").show();
        // Bring in first question
        $("#containerQuestion3").animate({
          'left': '0px'
        }, 600);
      }, 1250);
    }
  }

  // When user clicks a question 2 answer, assign them a value and progress the quiz
  $("#question2Answer1").click(function() {
    question2Answer = "Less";
    question2Click();
  });

  $("#question2Answer2").click(function() {
    question2Answer = "More";
    question2Click();
  });

  $("#question2Answer3").click(function() {
    question2Answer = "None";
    question2Click();
  });

Which would then reveal the following results:

  function narrowEarlyButtons() {
    // Only show buttons relevant to the user's choices
    if (question1Answer === "Small" && question2Answer === "Less") {
      // Origin Guatemala
      $("#question4Answer4").show();
      // Origin Brazil
      $("#question4Answer5").show();
    } else if (question1Answer === "Small" && question2Answer === "More") {
      // Ristretto Intenso
      $("#question4Answer1").show();
      // Ristretto
      $("#question4Answer2").show();
    }
  }

However, in order to achieve the client’s request, I have changed both into the following


// Result that shows when a user clicks on 25ml > MILD
  function narrowEarlyButtons() {
    // Only show buttons relevant to the user's choices
    if (question1Answer === "Small" && question2Answer === "Less") {
      // Origin Brazil
      $("#question4Answer5").show()
      // Bianco Delicato
      $("#question4Answer9").show()
    }
  }

  // Reusable function for when user selects an option
  function question2Click() {
    if (question1Answer === "Small" && question2Answer === "Less") {
      // Run code to show question 4 as question 3
      narrowEarlyButtons();
      // Fade out old text
      $("#containerQuestion2").fadeOut(750);
      // Animate background image transition
      $("#heroImage2").animate({
        'opacity': '0'
      }, 500);
      $("#heroImage4").css({
        'display': 'block'
      });
      $("#heroImage4").animate({
        'opacity': '1'
      }, 500);
      if (question2Answer === "More"){
        $("#galleryMild").hide();
        $("#galleryIntense").show();
      }
      // Update nav menu
      $("#question3Nav").addClass('fill-nav');
      $("#question3Nav").addClass('bg-gold');
      $("#questionTitle").fadeOut(function() {
        $(this).text("QUESTION 3:").fadeIn();
      });
      setTimeout(function() {
        // Show new text
        $("#containerQuestion4").show();
        // Bring in first question
        $("#containerQuestion4").animate({
          'left': '0px'
        }, 600);
      }, 1250);
    } else {
      // Fade out old text
      $("#containerQuestion2").fadeOut(750);
      // Animate background image transition
      $("#heroImage2").animate({
        'opacity': '0'
      }, 500);
      $("#heroImage3").css({
        'display': 'block'
      });
      $("#heroImage3").animate({
        'opacity': '1'
      }, 500);
      if (question2Answer === "More"){
        $("#galleryMild").hide();
        $("#galleryIntense").show();
      }
      // Update nav menu
      $("#question3Nav").addClass('fill-nav');
      $("#question3Nav").addClass('bg-gold');
      $("#questionTitle").fadeOut(function() {
        $(this).text("QUESTION 3:").fadeIn();
      });
      setTimeout(function() {
        // Show new text
        $("#containerQuestion3").show();
        // Bring in first question
        $("#containerQuestion3").animate({
          'left': '0px'
        }, 600);
      }, 1250);
    }
    if (question1Answer === "Large" && question2Answer === "More") {
      $("#question3Answer1").hide();
    }
  }


  // When user clicks a question 2 answer, assign them a value and progress the quiz
  $("#question2Answer1").click(function() {
    question2Answer = "Less";
    question2Click();
  });

  $("#question2Answer2").click(function() {
    question2Answer = "More";
    question2Click();
  });

  $("#question2Answer3").click(function() {
    question2Answer = "None";
    $("#question3Answer2").hide();
    $("#question3Answer3").hide();
    question2Click();
  });

  $("#goToQuestion2").click(function(){
    // Go back to Q2
    $("#containerQuestion3").animate({
      'left': '100%'
    }, 750);
    setTimeout(function(){
      $("#containerQuestion3").hide();
    }, 850);
    $("#heroImage3").animate({
      'opacity': '0'
    }, 500);
    $("#heroImage2").css({
      'display': 'block'
    });
    $("#heroImage2").animate({
      'opacity': '1'
    }, 500);
    $("#question3Nav").removeClass('fill-nav');
    $("#question3Nav").removeClass('bg-gold');
    $("#questionTitle").fadeOut(function() {
      $(this).text("QUESTION 2:").fadeIn();
    });
    setTimeout(function() {
      $("#containerQuestion2").fadeIn(750);
    }, 1000);
    question2Answer = "";
  });

  // Reusable function for when user selects an option
  function question3Click() {
    // Fade out old text
    $("#containerQuestion3").fadeOut(750);
    // Animate background image transition
    $("#heroImage3").animate({
      'opacity': '0'
    }, 500);
    $("#heroImage4").css({
      'display': 'block'
    });
    $("#heroImage4").animate({
      'opacity': '1'
    }, 500);
    // Update nav menu
    $("#question4Nav").addClass('fill-nav');
    $("#question4Nav").addClass('bg-gold');
    $("#questionTitle").fadeOut(function() {
      $(this).text("QUESTION 4:").fadeIn();
    });
    setTimeout(function() {
      // Show new text
      $("#containerQuestion4").show();
      // Bring in first question
      $("#containerQuestion4").animate({
        'left': '0px'
      }, 600);
    }, 1250);
  }

Spread the love

About the Author

Aury Silva

I am a Front End Developer from Hull, United Kingdom. With just over five years of experience, I carry a robust digital design set of skills within Adobe Suite as well as a good understanding of CRMs such as Marketo, HubSpot, Adestra and many more.

You may also like these

No Related Post