This document provides an overview and analysis of the key features and design patterns observed on various film company websites. It identifies common elements like portfolio carousels, video players, and content panels. It also outlines the requirements and user experience strategy for a new film company website, including business goals, target audiences, and design criteria focused on presenting company information and showcasing projects and capabilities.

1. Rami
Abdelal
WEBSITE
report

2. Preliminary Website Research Jump to page 4
Preliminary study of design patterns
In the first section of this website report, I will provide an overview of the key features of a selection of successful websites in an effort to identify
design patterns, common features and desirable attributes.
We will be covering websites that:
• Represent a film company or their products
• Showcase their media and bring projects to viewer attention effectively
• Are well structured and user friendly
Requirements Analysis Jump to page 17
Collection of criteria initially required of the website to plan a User Experience Strategy
User Experience Strategy Jump to page 18
We need to establish metrics and understand user needs to measure the success of the website
Design Mockups Jump to page 21
Sketches illustrating potential designs that satisfy criteria and promote a pleasant user experience
Sitemap Jump to page 21
The ultimate tool of Information Architecture that gives a website essential page hierarchy
Table of Contents
IntroductionWebsite Report
Contents
2 Website Report
3 Introduction
Preliminary Website Research
Requirements Analysis
User Experience Strategy
Sitemap
4 Time Warner
5 The Congress Movie
6 M2 Films
7 Pavilion Film
8 Control Films
9 Action Film
10 Caporal Films
11 Cake Film
12 Rosas & Co Films
13 Chocolate Films
14 Ultramarine Films
15 Films by Brett Johnson
16 Preliminary Website Research
17 Requirements Analysis
Business Goals
Target Audience
Preliminary Requirements
Preliminary Website Goals & User Tasks
18 User Experience Strategy
Vision Statement
Situation
Design Criteria
Metrics
21 Design Mockups
Home
About
Portfolio
News

3. Key Features
• Main menu on the top reveals submenus only when the cursor is over it. Ideal when navigating larger websites.
• Full sized carousel showcases latest projects with high quality still photography by taking up the large major-
ity of the browser window and allowing users to view other projects by clicking on the arrows with an animated
transition using Flash. Clicking on any videos will play a trailer in the carousel’s place.
• Quick menu at the bottom reveals company news and social media information.
• Blog is regularly updated and promotes users engagement.
• Detailed corporate information establishes trust for users and investors alike.
http://time-warner.com - An American multinational media corporation
Time Warner
Key Features
• Splash page introduces the movie with a short full sized HTML 5 video looping in the background and ambient
audio much like a DVD menu.
• Film clips displayed on a grid in the background give the user an insight into many of the film’s best scenes
at a glance, with the ability to click and maximise the videos to display each in fullscreen. The many sequences
highlight the variety in the film.
• Main navigation on the left hand side is clear yet doesn’t interfere with content.
• Pages are loaded with animation and relevant background art populates the entire background.
• Content is structured with imagery in mind.
http://thecongress-movie.com - A website for a live action / animated film
The Congress Movie

4. Key Features
• Large carousel showcases projects with visceral posters. Clicking for more information takes you to a dedicated
case study for each project.
• Layout is structured in layers (like a wedding cake) This is a very popular trend that strikes a good balance
between usability and presenting the user with immersive content.
• Compact navigation menu at the top allows users to navigate the website without any bells and whistles dis-
tracting them.
• Design is focused on high contrast geometric shapes and typography. It not only brings urgency and demands
attention but serves to communicate the agency’s investment in other forms of art.
http://m2film.dk - A Danish multi-national & multi-disciplined film agency
M2 Films
Key Features
• Multiple layers of images that take the spotlight are loaded in sequence and appropriately blurred to simu-
late depth, emphasising a carefully placed animated image or video
• Black background serves to emphasise imagery further.
• Background / ambient audo is calm, unobtrusive and helps to establish mood. A speaker icon on the top
right allows you to mute audio with one click, and a link on the top left lets you download the soundtrack.
• Main navigation appears as standalone text with a transparent background near the logo. It does not get
in the way yet uses a bright pink on dark and blurred images to stand out.
• Scene navigation on the top right allows you to view other key scenes of the film which are also multi-lay-
ered, loaded in sequence with simulated depth and animation.
• Content is displayed ontop of the images. The background is faded to add contrast and improve readibil-
ity of the pink text above it. Exiting this content overlay is possible by clicking anywhere outside of the
content.
• Trailer is displayed as an overlay fading the background like the rest of the website content, you can click
on the background again to return.
http://pavilionfilm.com - A calm, immersive website dedicated to a film
Pavilion Film

5. Key Features
• Large slideshow of still video screenshots is the first thing the visitor sees. A list of their Directors is displayed
right in the middle of the slideshow. An an arrow underneath it invites the user to scroll down to view the rest of
the website. Scrolling down triggers an animation that ushers the user into the main portfolio section of the site.
• Main menu at the top allows users to navigate to a single About page or pages dedicated to each director asso-
ciated with the company.
• Portfolio on the home page is comprised of ‘entries’ which are made up of a still of the video, the title and the
name of the director. Placing the cursor over the entry begins playing a short sequence. Entries are placed side
by side in 2 columns for each row.
• Trailer and caption is revealed with a sliding animation by clicking on a portfolio entry. The video begins play-
ing automatically and takes up the width of 2 columns.
• Director pages are dedicated portfolios. They include a featured video at the top. A biography and the rest of
their entries resides underneath.
• Footer features their logo, company address, list of directors and social media icon.
http://controlfilms.tv - A Parisian advert and music video production company
Control Films
Key Features
• Full sized animated Portfolio is displayed in 3 sliding rows of entries appearing as tiles that take up the entire
background. Each entry or tile is captioned and can be clicked on to reveal a content overlay. The middle row is
in the spotlight and is significantly larger than the others. Scrolling will trigger an animation that renders the row
that is now in the middle to be larger, and shrinks the row that was formerly in the spotlight.
• Content overlay fades the background tiles and plays a video in the place of the clicked tile. A related video
is available on an adjacent tile. The video player will move on to the next entry automatically when it’s over, like a
playlist.
• Navigation links are in the form of slim, colourful tabs on the left side. Contact link is found on an equally
slim tab on the right side.
• Content boxes slide out when the cursor is over their tab. They only take up a limited portion of the screen so
the portfolio retains attention.
http://actionfilm.ru - A highly interactive website for a film production studio in Russia
Action Film

6. Key Features
• Layout is comprised of tiles that contain portfolio entries, titles, promotions and a variety of information.
• Main tile is a featured carousel at the top displaying a selection of videos. Clicking on them plays the video in
place of the carousel, which reappears after the video is finished.
• Logo, navigation and contact information is available on a tall single tile on the left hand side. Menu links
send the user to their selected Director’s dedicated portfolio page.
• Magnifying glass icon on the top right above social media links. Clicking the icon will reveal a large search bar
above the main carousel tile and filters portfolio entries by Director name and keywords. Social media icons take
you to their relevant pages.
http://caporalfilms.com - A website for a film production company in Paris
Caporal Films
Key Features
• Large carousel displays featured videos and projects with information in the caption below. A link is present
allowing users to share content to Facebook.
• Simple drop-down menu on the top left is minimalist and does not interfere with content
• High contrast black and white design that emphasises imagery.
• Director and Photographer pages list the names of the creatives. Hovering over the names with your cursor
reveals a featured thumbnail and the ability to click and view their dedicated portfolio page.
• Portfolio pages list entries with each row displaying 3 thumbnails. Clicking on a thumbnail takes you to a page
with a large carousel to view the album or entry. More portfolio thumbnails that belong to the relevant creative
reside underneath.
• Footer features their postal address and social media links.
http://cakefilm.nl - A Dutch film and photography agency’s website
Cake Film

7. Key Features
• Grid based portfolio layout dominates the entire background and is the main showcase of the website.
• Fullscreen video player slides down from the top when portfolio entries are clicked, complete with controls and
an exit button to return to the grid portfolio view. Videos continue running on a playlist.
• Navigation is very simple, filtering portfolio entries or thumbnails by genre or director. The only other prominent
button takes you to the Company section of the website.
• Company section has indepth detail and information of the team involved split into navigable subsections.
• Flat dark grey and red tile design helps portfolio demand attention and makes layout simple.
http://rosasnco.ch - A Swiss advertisement production company’s website
Rosas & Co Films
Key Features
• Agency Showreel auto plays when the website loads. It is a HTML 5 video which is muted and populates the
entire background.
• Small content panel in the middle contains video player controls, navigation and featured video thumbnails.
• Clicking on thumbnails moves the panel to the bottom of the browser to reveal only the player controls and
company logo. Playing a video with audio reveals a speaker icon on the top right that will let you mute it. Press-
ing another button next to it allows you to hide the panel manually.
• Navigating pages replaces the content inside the panel, changing it’s height too.
http://chocolatefilms.ch - A website for a film agency in Switzerland
Chocolate Films

8. Key Features
• Full screen slideshow populates the background depicts stills showcasing their projects. This remains the cen-
tre of attention during all user experiences.
• Navigation menu on the left allows users to load content panels that slide out from the right hand side, keeping
the slideshow in centre view at all times.
• Content panels have sub-menus / sub-panels that extend towards the center of the browser viewport with
more content, like news and details of projects.
• Controls on the top right allow users to change languages, move the slideshow and access social media
presence.
http://ultramarinefilms.com - An independent multi-national TV and Film production company
Ultramarine Films
Key Features
• Single page showreel layout where each scene or section populates the entire browser viewport, allowing users
to scroll through the site like frames of a showreel running through a projector.
• Discreet menu in the form of tabs on the top left tracks which section the user is currently viewing allowing for
quick, unobtrusive navigation.
• Each scene serves as a featured portfolio entry. Background are animated and clicking on the arrow at the
bottom of each scene navigates the user to the next. Each scene has like and tweet buttons on the bottom right.
Content, titles and infomation reside in a small box in the middle of each section, neatly allowing users to appre-
ciate the backgrounds.
• Playing a video slides the background to the left, revealing a vimeo player with full controls.
http://films.bybrettjohnson.com - An American freelance filmmaker and creative’s portfolio
Films by Brett Johnson

9. Features and patterns compared
Preliminary Website Research
Carousel Portfolio Video Player
Content
Panel
Content
Overlay
Blog
Social
Media
Responsive
Time Warner Full Carousel Flash
The Congress Movie Vimeo
M2 Film Thumbnails Vimeo
Pavilion Film Vimeo
Control Films Thumbnails Flash
Action Film Grid HTML5
Caporal Films Grid Flash
Cake Film Thumbnails Flash
Rosas & Co Films Grid HTML5
Chocolate Films Thumbnails HTML5
Ultramarine Films Full List Vimeo
Films by Brett Johnson Showreel Vimeo
Requirements Analysis
Business Goals
• Recruit talent
• Showcase inspiring projects
• Secure investment
• Expand operations
Target Audience
• Investors
• Agents / Actors
• Directors
• Writers
• Other film professionals (e.g: camera operators, critics, producers)
• 15-55 year old television, film and cinema watchers
Preliminary Requirements
As understood from several discussions, initial interview and marketing strategy
• Consistently updated with current information at least once a week
• User friendly structure
• Lots of relevant creative content
• Bright and Colourful
• Energetic and Cool
• Tagline to sum up value proposition
• Easy to understand copywriting
• Content Management System
• Mailing list signup and archive downloads
• Responsive and working on all devices, especially iPad
• Supports possible online store functionality in the future
Preliminary Website Goals & User Tasks
How well the website currently appears to enable users to complete tasks are rated
Learn Trust Engage
Company History View Case Studies or Pitches Email and contact form
Values and Principles Insight into work environment Phone
Business Goals Legal & Professionalism Interact with Social Media
News Social Media Presence Signup to Mailing List
Portfolio Industry Association & Trust Marks Read News
Career Opportunities Good Business Factor Add News to RSS Feed
Industry Tips Employee Biography Visit office
Bad
Ok
Good

10. User Experience Strategy
Vision Statement
To bring people together to produce inspiring digital and film media whether for television, cinema or the wider indus-
try including all important elements and aspects of living today.
Situation
Who What When Where Why
Investors
About
Portfolio
News
After meeting
staff and hearing
about projects
At work, at
home or during
meetings with
stakeholders on
various devices
To learn about the company,
recognise potential, emphathise with
the vision and invest: becoming a
partner and sharing profits
Agents / Actors
About
Portfolio
News
Career
After receiving
script
At work or at
home on various
devices
To understand more about the company and
project in an effort to perform well in an
inspiring production that progresses their
career and earns them money
Agents / Directors
About
Portfolio
News
Career
After receiving
script
At work or at
home on various
devices
To understand more about the company and
project in an effort to perform well in an
inspiring production that progresses their
career and earns them money
Agents / Writers
About
Portfolio
News
Career
After meeting
staff before
optioning a script
At work or at
home on various
devices
To understand more about the company and
trust that they will do a good job with their
script
Film professionals
or enthusiasts
About
Portfolio
News
Career
After hearing
about career
opportunities
At work or at
home on various
devices
To find work and become involved in
the industry in order to progress their
careers
15-55 year old
TV, film and
cinema watchers
Portfolio
News
After watching a
film or show
At work or at
home on various
devices
To discover more trivia, information
and more media produced by a
company whose work they’ve
already watched
Design Criteria
Company Information
Company history, values and goals must be presented in a realistic and engaging way to encourage investors to emphathise with the compa-
ny’s story and recognise potential in an investment opportunity. Company information, above all other content on the site, should be written by a
professional copywriter who will present the New Light Pictures Global Media story in a way that does not highlight inexperience. Rather, the copy
must play to our strengths and show pride in our young, dedicated and enthusiastic team.
Capabilities
• Group photo
• Professionally copywritten company history and vision
Tasks
• Learn company story
• Empathise with vision
Portfolio
A portfolio equates the value of a creative company. It takes time to develop a respectable one with complete projects, and NLPGM is just a
young company with many ideas. The solution is to make more out of less. The smaller the portfolio, the more detail it must contain. Case studies,
behind the scene footage and trivia are valuable pieces of content that can add quality and substance to complete projects.
Ideas have their place here too. Projects that are not yet developed should be represented with a video pitch starring some of the creatives in-
volved, like Kickstarter Projects. Pitches should be produced in a way that communicates brand values and company vision, evoking deep interest
and inspiring involvement. This should be true even if they are just simple interviews with the writer, director and producers. A series of short
sequences of photos and music can kindle inspiration and help investors emphathise with the vision. A video pitch like this not only adds value
to something that was formerly just an idea, but demonstrates production capability and initiative all at the same time. It’s a bite size call out for
involvement that any of our users can consume.
News
Blogs, newsletters and social media posts are essential. They have a lot of direct uses, but more importantly they are the perfect channels to
establish trust, expertise and authority for young startups. NLPGM’s social media presence is already critiqued and actionable solutions are
proposed in the Marketing Strategy. The document also determines that one of our strengths, besides having a dedicated team, is great business
awareness. That is not enough. Instead, the brand should communicate wider industry awareness and expertise to be in line with our vision state-
ment.
News posts on the NLPGM website currently seem self-involved. Although such important business announcements should be highly accessible
on the News section, it should not be the only topic covered. Time Warner bloggers readily report their achievements and ideas. They also cover
other industry events and community stories. Commanding respect in such a saturated sector is difficult, but prolific media industry coverage and
highly engaged feedback from social media provides social proof of authority. To demonstrate expertise and encourage engagement we must blog
about things that not only we care about, but our users care about.
Our target audience is largely professional. Investors, actors, directors, writers, their agents and creatives are sent to our website mainly through
meetings and opportunities. Their interest is already piqued and they will each spend time on the website to gauge our credibility to determine
whether or not to engage. Each hit means more to our business. After the portfolio, an active and industrious blog is the most important marker of
success so it is imperative it is constantly updated.
Content creation will always be an on-going campaign and it must reflect confidence that we can afford to update regularly and that we afford to
blog about things that aren’t about us. We want to appear real and relatable. Our involvement with Fresh2o and Plymouth Drake Foundation are
good topics to cover, as well as Media Awards and other news that suggest wider industry awareness.
Capabilities
• Thumbnail Gallery
• Project Case Studies with extra footage and trivia
• Video Pitches
• Trailers
Tasks
• Select portfolio content to view
• Play, pause, stop video content and return
• Learn indepth information about completed projects
• Visualise creative direction of incomplete projects
Capabilities
• Wordpress Content Management System
• RSS Feed button
• Social Media buttons
• Newsletter Signup Form with Opt In
Tasks
• Read News
• Add News to RSS Feed
• Interact with Social Media
• Signup to Mailing List
• Download old newsletters

11. Design Mockups
Initial ideas for a design that prioritises video content
Full screen carousel on the home page will allow users to play video content and view other featured projects from the portfolio.
Metrics
To be determined
Careers
A small startup needs talent more than anything. The careers page should not only advertise job opportunities but welcome prospective employ-
ees to the world of NLPGM with open arms. Team profiles will feature photos and biographies to promote an open and trustworthy experience.
Group photos and shots of the work environment are an excellent way of helping users visualise the day to day life at NLPGM.
Job posts will appear in one easy to use column and can be filtered and sorted by category and time posted.
Capabilities
• Job posts
• Group photos
• Office photos
• Team profiles and biographies
• Email address
Tasks
• Get to know team
• Feel familiar with work environment
• View vacancies
• Send CV
Contact
The contact page is the end of the conversion funnel. If the user is on this page, they are likely to engage with the company. This page must make
it as easy as possible to get in contact with NLPGM and should feature all the necessary information to visit the office, speak over the phone or
over the internet.
Home
The first impression of our web presence will likely be of this page. Capabilities other than the full screen carousel will be available on every other
page.
Capabilities
• Map
• Postal address
• Office hours
• Phone number
• Public transport stations and routes
• Driving directions
• Email address
• Mailing list signup with opt-in
• Social Media buttons
• Contact form
Tasks
• Find location on map
• Read contact information
• Download and print directions and public transport info
• Sign up to mailing list
• Engage with Social Media
• Send email using contact form
Capabilities
• Logo
• Navigation menu
• Search bar
• Mailing list signup with opt-in
• Social Media buttons
• Full screen carousel
Tasks
• Play, pause, stop video content on the carousel
• View next and previous content on the carousel
• Navigate to a dedicated portfolio entry from carousel
• Navigate to the other pages of the website
• Carry out a search of the contents of the website
• Sign up to mailing list
• Engage with Social Media
Home

12. The about page will contain company information in the form of two professionally copywritten articles. Story and Vision. Story will cover the
history of NLPGM and define a problem in the media industry. It will answer the question “Why was this company created?” The story sets
NLPGM up to be the solution.
Vision answers the question “Why is NLPGM the solution?” Rather than outright stating values and objectives, they will be depicted here.
About Portfolio

13. Low and high specification versions

14. News