Mattress Quiz

This project was done in 2021.

This was the biggest coding project that I have ever worked on. I created an interactive quiz tool to help customers select the best mattress. I used JavaScript, jQuery, HTML, and CSS to build this project. The tool comprises 7 questions that narrows down 600 items to return 3 results with 3 accompanying items each and features an auto-start option, the ability to save results to local storage, and filter results based on a price range.

Impact

AB Test was conducted to measure the impact of the quiz. Due to some limitations, we weren't able to obtain enough sample size to fully analyze the result, however, we found some improvements as listed below:

There was a significant increase in mattress sales in the mattress quiz variation
Increased total mattress purchases by 14%
Increased total accessory purchases by 20%
Of those who purhcased a mattress after taking the quiz, 86% purchased the recomended mattress
It suggested that there was a positive impact in store, especially for newer RSAs

Quicklook

Watch the videos of how it works on desktop, tablet and mobile device. The link to Mattress Quiz might not work as the quiz could be taken off of the page.

Features

Smooth transition of the UI
Use of disable state to control the flow for better user experience
Quiz status is saved in a session storage, allowing a user to resume quiz anytime
Results can be saved using local storage, allowing user to retrieve the result at different times
Generates a custom PDF based on the results that user can download and bring it to brick-and-mortor store to try it out
Works responisvely on desktop, tablet and mobile
Incorporated complex business logics to filter out the results

Taking the Quiz

Multiple answers question allows you to choose multiple options. Clicking 'I don't know' unselects all other options, but is the same as choosing all options. 'Next Question' button appears once any option is selected.
Clicking an option for single answer question will take you to the next question immediately. There is no 'Next Question' button.
In the brand question, choosing 'No. I'm open to all brands' will take user to the next question. If 'Yes' is selected, user can further choose specific brands.
In Store option shows a store info of the nearest store based on user's zipcode.
User can move to any questions that they have already answered by simply clicking it.
Answering the final question will trigger the result page

Result Page

Main item (mattress) displays on the left with product image, title, price, checkbox, product details and Foundation Required banner.
On the right side is recommended items for the main item. Each item shows product image, title, quantity selector and checkbox.
The bottom shows the sub total price, quantity for the main item, add to cart button and wishlist button.
Clicking the add to cart checkbox updates the subtotal price
Product image and title are links to its product details pages. Clicking them will open a new tab for the item.