Background: WHAT’S WRONG WITH ME?, the site experience for Yorgos Lanthimos’ The Killing of a Sacred Deer, is a subversion of the online sites that people use to figure out what causes their physical ailments. Instead of focusing on symptoms, the site examines the human condition that led the user to ask this question in the first place.
Highlights: The quiz-like checkup experience is the site’s main attraction. It asks users to identify where she or he is hurting before going through a series of questions and scenarios that place users in the headspace of the film. The design of the website is very clean and sterile, drawing inspiration from the medical field and using the Scientific and Technical Information Exchange font. This was paired with short video clips and WebGL animated distortions that hinted at the film’s supernatural elements.
Challenges: We were managing a lot of assets—from the 3-D data of the human body to all the film footage—so the load time had to be optimized to work well. We also had to compress all the videos using ffmpeg and added a custom film grain noise in order to give the illusion of viewing a high-res video.
Favorite details: We really focused on perfecting subtle details in the animation. For example, when the mouse hovers over the five designated areas of the human body, the figure’s head follows and the muscles surrounding that area twitch. For the checkup portion, we used Canvas API to generate shapes that feel hand drawn for the checkup portion of the site.
Navigation structure: Our primary focus was to immerse the user in the atmosphere of the movie, so the checkup experience was the first priority. After that, it was important to ensure that all the essential film information was accessible, so users could easily find the synopsis, trailer and ticketing links.