TEA cup quiz case study - cover image

Case Study: TEAcups Film Quiz

Client: In-house at TEA
Role: UI/UX designer and front-end build working alongside a fellow developer
Brief: Create a responsive quiz website, that allows users to share, challenge their friends and create their own teacup inspired movie poster.

The Website

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.

TEA cup quiz - desktop
TEA cup quiz - tablet
TEA cup quiz - mobile
Responsive layouts for 1440px desktop, tablet and mobile devices

Brief Constraints

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.

TEA cup quiz - full desktop view
Full page layout for 1440px wide desktop

The Journey

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.

TEA cup quiz - real time input feedback
TEA cup quiz - real time input feedback incorrect
TEA cup quiz - real time input feedback correct
Highlighted input field showing the full, large size image on larger desktops and real time feedback on the answer entered

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.

Desktop screengrabs - quiz completed and results panel
Tweets during the Oscars buzz
Twelve film posters from the TEA Cup Quiz

The Answers

  1. ET
  2. Focus
  3. Jaws
  4. Taken
  5. The Silence of the Lambs
  6. Big
  7. Gravity
  8. Inception
  9. Jurassic Park
  10. Mary Poppins
  11. Reservoir Dogs
  12. Sideways
TEA cup quiz insitu website