UX Design: Red Letter Films
The Client
Red Letter Films is a BC media company looking to expand their business in new directions. As part of a small team put together by the Oiled Digital agency, I was tasked with leading the user experience research and design for a new website that would allow the company to grow.
RLF has a history of producing documentary film and television. They wanted a new website that would still showcase their core business, while also expanding into two new areas, corporate video production and film-making education.
Research PHASE
The first step for developing a design strategy was a thorough review of the current Red Letter Films site, and also interviews with the clients to identify their brand identity and key values, which I sorted into three groups:
“Social responsibility”
“Ethical”
“Humanist”
“Optimistic”
“Empathy”
“Authentic”
“Fun”
“Friendly”
“Warm”
“Inspiring”
“Family”
“Informative”
“Well-Travelled”
“Confident, but Egoless”
“Storytelling”
“High Quality”
“Curious”
Throughout the design process I made sure every decision aligned with these 3 core values, Integrity, Entertaining, and Knowledgeable.
Research: Users
The biggest challenge was to design a site that speaks to more types of users than it currently did, while maintaining a consistent overall identity. After careful consultation with the client about their future expanding directions, I created these categories of potential audiences for the website:
Broadcast television users
television network development professionals
Corporate video users
small or medium business owners looking for video production services
digital marketers wanting to learn more about video as a tool
marketing agencies looking for video production partners
film education users
film school grads and enthusiasts wanting to enhance their video skills
marketing agency creatives who want to know more about creating video content
people with project ideas who want to learn how to pitch
We grouped these user groups into three conversion funnels based on the user’s goals.
Competitive Analysis: Broadcast
Television production is currently our client’s primary business, and the Broadcast funnel would be the first thing a visitor to the homepage would notice. Highlighting Red Letter Films’ experience in this area builds trust for not just Broadcast users, but all other user types as well. A potential corporate video client visiting the site is much more likely to believe in our client’s expertise after seeing that they have made a number of high-quality productions for major networks.
I researched television broadcasters and specialty channels, primarily Canadian networks that are known to have documentary or unscripted television series. Analyzing the producer guidelines available for specific networks and networks described their desired programming content, I identified the key values broadcasters are looking for, and identified these common values:
“Unique characters”
“Real people”
“Human connection”
“Socially engaging”
“Personality”
“Inclusive”
“Extraordinary Experiences“
“Sparks Conversation”
“Storytelling”
“High-quality”
“Compelling content”
“Witty”
“Emotion”
“Passion”
“Insight”
“Knowledge”
“Informative”
“Confident”
“Meaningful”
I researched the websites of competitors in the field of unscripted television production, and saw that many of them were holding onto outdated, cluttered websites. I concluded there was a great opportunity here for our client’s new site to highlight their core strengths in a confident, modern new design. I identified particular elements the old site was lacking, to better showcase their experience and credibility as a successful media company:
Key takeaways from competitive analysis.
Projects currently in production.
Behind-the-scenes photo galleries from previous productions.
Detailed staff bios of their skilled team members.
More info on the many media broadcasters they have worked with.
From my organizational research on Red Letter Films, I knew they were sitting on a wealth of content in these four categories that wasn’t on their current site.
Competitive Analysis: Corporate
I researched a broad sample of sites for corporate video production companies, one of the new areas our client planned to expand into. I identified these successful key features:
Establish trust: samples of work, testimonials, specify technical expertise, skilled staff.
Demonstrate value: explain production process, marketing effectiveness of video content. Show range of services available and justify costs.
Inbound marketing: informative blog posts, e-books, email newsletter.
Key takeaways from competitive analysis.
Competitive Analysis: Academy
Red Letter Films was interested in exploring options for delivering educational content, to share their considerable expertise and expand their business. I researched the sites of competitors who were offering film-making education in a range of models and summarized the benefits and challenges of each approach. These fell into 3 categories: in-depth training workshops, subscription-based online courses, and limited scope but free blog-style lessons.
I concluded that the most effective strategy to create educational content for their site was to begin with a series of free blog-style posts, either written articles or tutorial videos. This would be the quickest way to get started and attract new users by offering specific, valuable content, with the possibility of converting them to paying customers once our client had time to develop more in-depth course material they could begin charging for.
In addition, this informative blog content can also appeal to the “corporate” user and help move them further along towards being converted to paying customers.
Planning
After cataloguing all the elements on the client’s current site, I added the new content elements suggested by my design research and organized them into a new site information architecture.
Information architecture
for content on the new site.
New site map.
Based on the new information architecture, I created a site map that would be the blueprint for our new design.
Design
From my research, we knew we wanted the new design to be clean, modern, and highly visual. And because we were targeting a wider range of user types, many who would be visiting on mobile devices, the pages needed to be simple, well-organized and responsive. Along with the team’s graphic designer, we created a simple card-based visual style that could be applied to many kinds of content, giving a consistent visual experience across the site.
Card-based design block for desktop.
Card-based design block for mobile.
I sketched design for the content layout of each page, for both the desktop and mobile version of the site.
Initial sketches of page layout wireframes.
Lo-fi page layouts designed in Sketch.
Atomic Design
Since we were targeting a range of different user types, a constant visual experience for the different kinds of content helps align the three funnels and makes each page feel like part of the same place, instead of distinct separate businesses.
We created a style guideline for each UI element.
Mock-up of the home page for tablet.
The “Productions” page in desktop, tablet, and mobile.
Prototype
With the mock-up high-fidelity screens made, I created an interactive prototype of the new site with InVision, which we used to test out the site with sample users and demonstrate it to the clients: The InVision Prototype
Developer specifications for building the responsive grid.
After testing and review with the clients, we iterated on the design, adjusting some visuals and reducing the amount of detail on some of the pages which we found had too much information. After a several round of review, we arrived on a site design which the client was happy with and would allow them to expand into their new business directions at the pace they desired.
We then generated specification documents for each page in the new site for our team’s developers, including how the responsive grid, showing how the site should behave for different screens.
With the new site design built and online, Red Letter Films were excited to be showing off their experience in film and video production for a wider audience.
The clean, modern visual style of the new site is applied across all pages, creating a consistent identity throughout. So the strengths shown off in their broadcast production pages, which previously were only intended for major broadcasters, are now just as valuable for building credibility with potential corporate video clients or educational users.
before & afteR
The new Home page is clean, modern, and highlights the company’s considerable experience, with a clear “contact us” CTA, and the added credibility of the major media companies they have partnered with.
PREVIOUS Home Page
NEW Home Page
The new Productions page is cleaner and easier to navigate, while containing more info at a glance on the many film and video productions the company has in their portfolio. There’s a new section of productions “Coming Soon”, showing how active and in-demand they are.
PREVIOUS Productions Page
NEW Productions Page
The new About Us page has a better description of the company as it is now, showing more of the team with their bios available at a click. There’s a new section of endorsements of the company from some of their major partners.
PREVIOUS About Us Page
NEW About Us Page