We've just released a new interactive quiz for Sexperience, the website supporting Channel 4's Sex Education Show.
The result - Are you Sexperienced? - takes two minutes to play, and is fun, slightly shocking and both a little bit wrong and a little bit right. And there’s some technical magic on show: in our tireless quest for maximum accessibility, we've pushed JavaScript to the limit to make it 100% Flash-free. So, before you read on, go and play it. Go on, it really is worth it.
And we’re back! Hope you enjoyed it.
For anyone curious about the thinking that went behind the quiz, here’s how the project took shape:
1. Metaphor
We took inspiration from the informal approach to sex implied by toilet graffiti.
Here's a few of our early sketches, fleshing out the ideas for the quiz.
2. Approach
Given the nature of the target audience (late teens), we needed to:
- Have a vibrant, colourful, exciting, sexy layout.
- Shift toilet graffiti from being potentially grotesque and dirty to being something funny, playful, visually enticing and somewhat "safe".
3. Execution
The young, playful feel fed into our design decisions:
- Round, fluid, almost liquid corners and shapes, to provide a smooth organic, sexy feeling.
- Minimal, almost non-existent UI. The content is the UI.
- Typography tripod:
- Bold typography for titles
- Legible, flexible, html-friendly typography for dynamic text content
- Custom-made handwritten fonts for illustration subtitles
- Layout with central focus on the illustrations and interactions. All elements orbit around them.
- Solid layout consistence across every slide. You don't go places. Everything is brought to you in one place.
- Different colours provide a change of moods within the same layout "geography".
- Colour is used the simplest way: dual combination.
4. Structure
The quiz is book-ended by carefully considered intro and end slides.
Intro
It's our box wrapping, a special "novelty gift" presented by C4 and the Sexperience website. It needs to be a clear tone-setter of what’s inside. We chose a deliberately vibrant, eye-popping pink for the landing page - the most energetic colour of the palate we used, making it a great taster of the mood of the quiz.
Questions 1 to 10
Each question takes you through a full spectrum of vivid colours, changing the mood of each section of the quiz without changing the layout. The result is an immediate visual impact that grabs the user’s interest and helps move the quiz along.
End
The end page is both a closing and opening stance, offering up the quiz results and bridging the "novelty" back to its creator, the Sexperience website. The layout shifts to branded colours, offering a smooth transition to the rest of what Sexperience has to offer.
We had a lot of fun working on this project, and we're really delighted with the results. Approaching sex in a quirky, funny, educative way that helps demystify the subject and provoke debate is a real privilege. Plus, it's not every day that you get to draw boobs safely at work. And with 10,000+ plays already, it would seem that teenagers like it too.
Don't be shy, if you haven't already, go play the quiz.
Comments
Andy Bell
17 June, 2011
It is with a mixture of sadness and pride that I mention that this is Andre's last post on the Mint blog. He's following his dream to Mountain View, having landed a job as Human Factors Design Engineer at Steve Job's Chocolate Factory. With his awesome skills, the next generation of Apple products may be even more visually gorgeous. Meanwhile, here's some of the lovely work he designed at Mint: http://mintdigital.com/portfolio/its-my-time and http://mintdigital.com/portfolio/livepitch. Good luck with the new role, Andre! We'll miss you.