Mattressman currently has a large number of SKUs, in addition to the fact that mattresses are considered purchases, this results in choice paralysis and a high cognitive load on the customer.  

As part of an overarching goal to move Mattressman's brand positioning up the purchasing funnel, I led the project to launch a Mattress Quiz to both increase engagement on our site, and to provide a more meaningful customer experience.

Due to the fact that roughly 70% of our traffic comes from mobile users, I made the conscious effort to prioritize a mobile-first design

.Doing this opened up numerous doors including the potential to be adapted to fit our in-store standing tablets to cater for customers who may not wish to speak to sales staff when making their purchase.

As part of the planning process, I worked cross-collaboratively with the Merchandising team to ensure each question provided value in selecting a mattress, and with developers to ensure feasibility.

As the design was to be mobile-first, my first steps were to ensure that the quiz selection buttons had enough padding and gaps to be tapped on without mistakenly selecting the wrong option.

I created a rough draft of the layout on Figma before creating a working prototype on Codepen to share across with the developers on my team.

While building the quiz, the questions consisted of mainly JavaScript, with some basic HTML and CSS elements which included a traditional Bootstrap CSS and additional <style> CSS elements. I was conscious to make the quiz process as seamless as possible, including auto-advance on single-choice questions and skip buttons on questions that not everyone might want to answer (weight).

I also made sure to include an optional email capture form at the end that was GDPR-compliant, to increase our communications list as our website lacks lead capturing.

Other usability elements I added to smoothen the quiz experience was to add a stepper/progress bar so users understood where they were in the quiz, and added the ability to click on previous questions where your answers would be saved if you were go to back and change it.

Finally, I ensured the results page came with a summary of the users' choices, for instance: you're a side sleeper, you suit a Firm mattress, etc. This way, even if they don't make a purchase, they walk away with some research that they may not have been aware of before.