NLB S.U.R.E

Introduction

S.U.R.E is a campaign initiated by the National Library Board. I helped design and develop the website. The website also has a quiz, which gives users their type of online explorer depending on how they answer the questions. I also developed the quiz logic and presentation of results. S.U.R.E stands for: Source, Understand, Research, Evaluate. In this portfolio piece, I’ll be talking about 2 main points: Quiz Design and Development, and Website Design and Development.

Quiz Design and Development

The quiz was designed to be clean and easy to read. As requested by the client, they don’t want users to be able to look through all questions or go back to change their decisions, which is why there are no next/previous buttons, and the form progress indicators below are not clickable. I’ll explain more about why they decided to go this route in the logic section. But first, I’ll show the designs of the quiz and the types of questions.

Two Types of Quiz Question Design

Quiz Logic

In the client brief, they mentioned that there will be 5 main types a user can get, which is the following:

1. The Newbie,
2. The Sleuth,
3. The Defender,
4. The Guardian,
5. The All Rounder

Getting the score would require the user to answer 12 questions, 4 from each category (unknown to the user). These categories are called IL, DS, an DW. Honestly, apart from Information Literacy (IL), I have no idea what the other 2 acronyms are for. From 4 questions per category, they earn a score out of 4 for IL, DS, and DW.

Newbie and All Rounder types are the extreme end of the spectrums. Newbie are users who get 2 and below for all 3 categories, whereas All Rounders get 3 and above.

The slightly complex logic follows for Sleuth, Guardian, and Netizen types, as it depends on whether the user gets 3 and above for only 1 of the categories, and 2 or less for the other 2 categories.

Yeah, it’s pretty confusing. So, to assist myself with forming up the conditional logic, I designed a simple diagram on Figma for a bird’s eye view:

Referencing this diagram made forming the logic for the quiz much simpler, as I was able to visualise the 1s and 0s for each question, and the vertical flow from start to finish.

Quiz Development

Another request from the client was that the forms be sorted randomly, with the exception of the demographic questions. Additionally, the order of the “correct” and “wrong” options are also randomised. Since this resets every time the user refreshes the page, the quiz logic is done on the client side. The data is saved AFTER the user has submitted the quiz. Additionally, the only stored data in the database is the number of “counts” a particular type receives.

Following the diagram above, I decided to score the Quiz Questions based on booleans, or 1 and 0. The correct answer will be given a result of 1, and the wrong answer will be given a result of 0. If they select the correct answer, their IL, DS, or DW score +1. Otherwise, they get 0.

After completing all 12 questions and pressing submit, the data will be sent to server-side where it will compute the score, and performs an action based on the score. The redirection to the appropriate Type page will occur.

A sample of the code that was implemented in the case where user gets an All-Rounder type:

function handle_form_submission($form_data) {
  $total_il_count = isset($form_data[176]) ? (int)$form_data[176] : 0;
  $total_ds_count = isset($form_data[177]) ? (int)$form_data[177] : 0;
  $total_dw_count = isset($form_data[178]) ? (int)$form_data[178] : 0;
  $your_type = isset($form_data[214]) ? $form_data[214] : '';


  if (
      $total_il_count >= 3 &&
      $total_ds_count >= 3 &&
      $total_dw_count >= 3
  ) {
    // Redirect All Rounder
    if ($your_type === 'The All-Rounder') {
        wp_redirect('/type/all-rounder');
        exit;
    }
  } else {
    echo "No redirect conditions met.";
  }
}

// on clicking submit button
$form_data = $_POST;
handle_form_submission($form_data);

Website Design and Development

The website and its content are housed in the WordPress CMS. I chose to go with the WordPress route as it’s easy to manage the content and, with the right optimisation, can perform as fast as a normal static website. Additionally, I’m already very used to working in a WordPress environment, and starting up this project was relatively a breeze.

Most of the design and development are custom-coded, with minor assistance for layouts from AutomaticCSS framework (a framework designed to work for WordPress websites).

The general design of the website follows a blue-ish tone, with a light blue grid background (made with repeating gradients and not a single static image), complemented with a vibrant colours for the characters (types), illustrated by another collaborator hired by NLB for this project.

Online Explorers Types Page

View the page here.

Individual Types Page

View one of the pages here.

One thing I implemented was a fluid and creative Lottie animation, animated by the illustrator. It adds life to the page, and it is complemented well with the subtle fade-in animations when the page loads.