Case Study: TEAcups Film Quiz
As a fun side project that is linked to the main agency website, we built a responsive quiz in a day using the teacup quiz posters created in the studio. The page was shared via social feeds using Oscar nominated films (Birdman & Boyhood) interpreted into teacups in the run up to the Oscars.
The studio created artwork to a restricted size and portrait orientation due to the assets provided, this impacted on the responsive layouts. A very quick turn around was also needed to get the fully responsive page live in time for the pre Oscars buzz.
It was important to create an intuitive game that is fun, easy to complete during a tea break and could be easily shared on social networks. The restricted artwork caused the biggest challenge in terms of the layout solutions across platforms.
Larger desktop screens display a split screen style layout with images cropped into smaller blocks organised into a grid, with the full size image shown on the right hand side. It is important that the user can see the full size image as extra clues may be cropped off and the position of the teacup is not always vertically and horizontally centred. With more time available I would have made the large image fixed in position on scroll for the larger desktop layout as depending the height of the browser window the full grid might not be in view. Smaller screens and tablets display the full images in two columns whereas mobile is laid out in a single column.
Clicking into the input field actives the image block and shows the respective large image on the right. As the user starts typing, instant feedback is given in the text box shown with the 'tea green' background and tick icon when correct and in red with a cross icon when incorrect or incomplete.
When all the fields are completed the user can use the ‘see how you did’ button, this opens up the results panel and the quiz input fields are populated with the correct answers. The user is given the opportunity to share their score via Facebook and Twitter or download the teacup psd file to create their own teacup inspired film poster.
- The Silence of the Lambs
- Jurassic Park
- Mary Poppins
- Reservoir Dogs