My experience designing a fan-made web campaign for A24’s film Uncut Gems. Click here to see the Behance showcase for this project.
Project Overview
Project deliverables
User interface
My role
UI/UX design
Visual design
Wireframing/prototyping
Project context
Personal project
Timeframe: 3 days
Team: Tejus Krishnan
Tools used: Figma, Photoshop
Background
After working on a number of mobile-app projects, I wanted to get outside my comfort zone and try a completely new style of visual design. While browsing work samples on Behance, I was particularly inspired by the work of Watson Design Group, an LA-based creative agency that has produced a number of beautiful web campaigns for several award-winning films. I decided that emulating their design style would be both an opportunity to diversify my portfolio and indulge my massive love for movies.
Watson’s trademark is to immerse their audiences in the visual and tonal aesthetic of their clients’ films. They use the same typeface and color palette as the films’ posters, and fill the page end-to-end with stills, custom-made graphics and quotes from the movie. These visual choices, coupled with sleek animations and seamless navigation elements, turn the webpage into a sort of “digital theme park” that thrusts users into the world of the film in an engaging and interactive manner. By enabling users to personally identify with the plot and characters of the movie through their exploration of the website, Watson’s web campaigns successfully generate anticipation for the film among audiences, which boosts ticket sales for their clients.
One of my favorite films of 2019 was Uncut Gems, a grimy and relentlessly intense thriller directed by the Safdie brothers and featuring an uncharacteristically strong lead performance from Adam Sandler. It’s the latest critical darling from the indie production company A24, a frequent client of Watson’s in the past (with films like Moonlight, The Disaster Artist, and Lady Bird). Watson’s portfolio of A24-catered work gave me some pointed inspiration for how to create an aesthetic for Uncut Gems, since the quirky visual language of an indie film would be shared across both projects.
Design Process
I approached this project purely from a visual design perspective, since I wanted to practice using familiar design tools (i.e. Figma, Photoshop) to create a different-looking end product from what I’m used to. The final design came about quite rapidly compared to my other projects (I completed it over one weekend), since this piece was driven by a constant flow of creative inspiration rather than a long-term, systematic planning process. That being said, I did make all my design choices with intention. Keep reading to understand the rationale and structure behind each part of this piece.
Wireframing and Prototyping
My goal with this project was to create a seamless, yet dynamic browsing experience. I decided that the best way to do that was to style the website as one big, scrollable page that would change according to the user’s scroll position. I wanted the user to feel like they were being carried through the world of the movie, which meant minimizing the amount of work required to navigate the website. As you can see in the final design, the actual visual content of each page is quite “busy,” but the navigation itself is incredibly simple.
Wireframes for a body page (top) and the navigation page (bottom). The links in the corner allow users to jump to important parts of the site without intruding on their scrolling experience.
Since a major component of these web campaigns is animation and movement, I wanted to make full use of Figma’s prototyping tools to bring the website to life. The navigation menu and the “about” pages are the sections of the website that contain the most detailed interaction mechanics. The “about” page in particular is the most information-dense section of the site, walking the user through the synopsis, cast members and crew of the film. This meant it was crucial to chunk all those elements into discrete, navigable components to avoid overwhelming the user with information. It’s where prototyping came in handy the most.
Excerpts from Watson Design Group’s web campaigns for The Disaster Artist and Lady Bird, both from A24.
The wireframe for a page in the “about” section (top) vs. the final product (bottom). The “about” pages emphasize animation and discovery in order to minimize information overload.
Visual design and Brand Identity
The aesthetic identity of this project was the most crucial piece to get right. The navigation structure was made sparse and simple so that the visuals on each page could do most of the talking for viewers of the site.
The recurring design elements of the site include the typeface used in the film’s logo, the rough, noisy texture used in the poster, and a grayscale color palette for the UI components. The only color is from the images.
Uncut Gems is a gritty, stressful movie that portrays the catastrophic effects of greed and gambling. While the film itself is full of bright, colorful imagery and plenty of humor, its posters and marketing contrast this craziness with a somber black-and-white aesthetic that communicates to viewers that this is, at its core, a dark and cautionary tale. I wanted my design to reflect that same juxtaposition, and so I allowed the stills from the movie to add splashes of color to the black, grimy canvas, resulting in a visual style that I believe captures the tone of the movie.
Additionally, I wanted each page to have a distinct layout and color scheme. If the site is a digital theme park, then the pages are the individual attractions. Most of the pages follow the gritty dark mode, but some of the “about” pages adopt a cleaner, lighter look to draw attention to the information being presented. The page for the trailers allows the videos to fill up the entire page, which means that section has a constantly changing color palette.
Finally, I embellished most of the pages with press blurbs from major reviewers to emphasize the widespread acclaim for the film from critics. The website is, at the end of the day, a living, breathing advertisement for the movie. A web campaign should not just inform audiences about the movie, but get them to want to watch it.
Speaking of which, if this project has yet to convince you, then take it from me: this is a great movie. Go see it. But for now, enjoy my work :)
Final Design
Reflection
I found this project to be enormously fun to work on. I look back on it as a healthy exercise in stepping out of my comfort zone and applying my artistic and design intuitions to a different, albeit prominent style of digital media. As a devoted film enthusiast, I certainly plan to create similar mock campaigns for other films and series I enjoy. I believe that such projects lie at the intersection of UI/UX, brand identity, web design, and marketing, resulting in highly immersive and immediately captivating user experiences.
For next time
While site designs like this thrive on variety and unpredictability, I would nonetheless apply a more consistent grid layout to the pages and organize my components in a more disciplined fashion the next time I work on a similar project.
Additionally, I plan to take a more iterative, user-centric approach with the next such project I make - I created each page on this particular design from scratch and based my design choices purely on inspiration and intuition. I believe I would make a more lasting impact by experimenting with different styles and page layouts and consulting the feedback of sample users on what draws their attention in professional marketing campaigns.
Thank you for reading! If you enjoyed this project, please share it out to your social media.