MadRiver Pictures / MadRiver International
CREATING A NEW WEBSITE FOR A LEADING PRODUCTION, FINANCE, AND INTERNATIONAL SALES COMPANY IN ENTERTAINMENT.
My first project at MadRiver Pictures was creating the layout and design of the MadRiver Pictures website beginning with research and ending with web, mobile, and tablet mockups. After completing mockups and final user testing, I worked step-by-step with the web developers until website launch. For full website functionality, please see www.madriverpictures.com.
BRAND
MadRiver Pictures / MadRiver International
MY ROLE
UX RESEARCH AND DESIGN
PROGRAM
ADOBE INDESIGN, ADOBE XD
DATE
JULY 2019
The Challenge
How can I make it easy for users to understand the 2 divisions of the company while still maintaining a cohesive design?
MadRiver Pictures has 2 main company divisions: MadRiver Pictures, which focuses on production, and MadRiver International, which is the sales and international distribution arm. For this website, I had to create a layout and design that made it easy for users to 1) understand the business model of the company and 2) distinguish films from the two divisions of the company, while still maintaining a cohesive design.
The Process
RESEARCH
Through researching other competing entertainment companies’ websites, I found that many companies who similarly had both production and international sales divisions made separate websites that linked to one another. However, the MadRiver Pictures CEO only wanted one central website, so I had to design differently.
INITIAL DESIGN
Dark Background for Darker Themed Films
For the initial website, I used a darker theme to account for the company having mostly darker themed films. I included a Blog-style “News” section, created one page that included summaries for both MadRiver Pictures and MadRiver International (Called IMR at the time), and created sub-pages for the different “About” sections of MadRiver Pictures and MadRiver International. Through initial user-testing and speaking with the CEO, we decided to take out the News section, due to frequently-changing film News in the industry that could be difficult to manage and constantly update. We also decided to keep only one combined “About” page and move the employee bios to this page between the descriptions in order to show that the employees and two company divisions work together.
REDESIGN
From Dark to Light
Redesign of the MadRiver Pictures Website Home Page.
After initial notes from user testing and CEO notes, I changed to a white theme to make it look cleaner, and changed the header to include logos from both sides of the company. The home page would include films from both MadRiver Pictures and MadRiver International and a short bio.
Final HOMEPAGE Prototype
Redesign of the MadRiver Pictures Website About Page.
2 Divisions, 1 Company
The About page first includes a MadRiver Pictures bio, then the employee bios including employees from both company divisions, followed by a MadRiver International bio. This design was intentional in showing that employees from both divisions of the company work together as a collective unit.
FINAL ABOUT PAGE PROTOTYPE
Reesign of the MadRiver Pictures Website Past Films Page.
Distinguishing films from the separate company divisions
The Films pages are separated by New films in Pre-Production, Production, and Post-Production stages and Past Films that have already been released. The Films pages include films from both MadRiver Pictures and MadRiver International. To distinguish between the two, logos are placed either on the left side (MadRiver Pictures) or right side (MadRiver International) of the banner image.
FINAL FILM PAGE PROTOTPYE
The Take Away
This was my first UX Design project, and it was a challenging yet fun experience to work start to finish on a website. Starting with research, initial designs and testing, redesigns, and working step-by-step with the web developer to create and launch the site was an extremely rewarding process. I worked hard and strategized on how to make two company divisions merge in one site, while making it easy for users to understand the business model and also highlighting the different work that each side does.
See it live here.