ABOUT DRAMAFEVER

DramaFever is a video streaming website owned by Warner Bros that offers on-demand streaming video of documentaries, movies, and TV shows with subtitles. DramaFever's content offering is both ad-supported for regular users and available in high definition for premium subscribers.

DramaFever is available on a variety of devices including iPad, iPhone, Android, and Roku. The company's library of international programming is one of the largest licensed U.S. collections available online, in both English and Spanish, and comprises over 15,000 episodes from 70 content partners across 12 countries. 

DRAMAFEVER NEXT
In 2017, Dramafever decided to refresh their brand by cleaning up their video-streaming website with a new user interface. This project was called Dramafever Next. ​Due to the change, there were some webpages that needed re-structuring due to the change.

I was appointed by our team’s director to redesign the Dramafever app web page. The application page informs users of the devices available for download - to watch on your mobile, television or console devices.
Old App Page
To decide how to structure the new webpage, I analyzed the app page. Prior to designing, I wanted to see what I could use from the page, and what didn't work in comparison to the newer pages. 

First, I noticed the devices were separated into 3 sections: Mobile, Television, and Console. I felt that this design feature was successful in creating an easy-to-navigate experience for the user. I wanted to keep this feature from the old page and apply it to the new one.

Overall, there wasn't much information on the page regarding how to download, but the old design kept it simple with icons and shapes. 
Other Online-Streaming App Pages
After going through the Dramafever app page, I decided to look at other video-streaming website app pages to see if I could get inspired by their layouts. My goal was to incorporate the most effective aspects of their pages and analyze what didn't work. I looked at Netflix, HBO, Showtime, Hulu and more. 

I noticed that ​Netflix had the most similar layout to Dramafever in that they separated their devices under categories - with the goal to make it easy for users to download the app onto the appropriate device. This confirmed that I needed to keep that feature in the new layout. 

The most informative layouts were Showtime and Hulu, which displayed different types of TV and movies streaming on their sites. I liked the fact that they persuaded the user into buying their product's pro features by showing them all the app has to offer. If they are going to download the app, why not download it with all the features? This made me feel that they needed to incorporate more information on the new app page - the goal being to have more users buy Dramafever's app and bring in more revenue.

DESIGN EXPLORATION

After analyzing Dramafever and the other video-streaming website pages, I did a full-site audit on the Dramafever Next website. Then, I went through the navigation, laying out all of the categories to see what patterns, themes, and insights could be used for the new page. I noticed several key elements being used on every page:
​
1. Large header
2. Color scheme
3. Shapes of buttons/icons
4. Layout of pages
​
From there, I used their existing content to create wireframes, and put an emphasis on the design of the new brand.
I was given a style guide of all the new colors, button elements, and texts being used for Dramafever Next. Combining all that I have researched and the Dramafever Next Style Guide, I started to sketch and design some new app pages.
Style Guide

ROUGH DRAFTS

The first iteration's main focus was to keep the page consistent with the old app page while also using key elements of Dramafever Next. With that in mind, I used a larger header and made the buttons the same shape as the ones that were being used all throughout the other webpages.
Dramafever Next Button example
However, when I used those elements on the page, I realized that the categories were getting lost within the design. I knew I had to start re-designing if I wanted the final product to be successful.

SOLUTIONS

In my first design, the main issue I came across was deciphering the three main devices. I tried using icons beneath the images in order for people to be able to tell if it belonged to Mobile, TV, or Console, but I felt it still wasn't strong enough. As a result, I decided to go back and re-design.

I wanted to create a clear way of deciphering between each section. So, I decided to use three colors from the style guide and have each section color-coded to make it visually easier for people to understand.

COLOR SCHEME

Since the app page was broken down into three different categories, I separated each with a color from the style guide:

​1. Mobile : Red
2. Television : Yellow
3. Console : Blue

When you hover over/click on the button the color will highlight the icon beneath.

UPGRADE APPLICATION

Another aspect I really liked about the other video-streaming app pages was the information about their television shows and the app's pro-features (if you wanted to upgrade).

With the goal of keeping navigation simple for the user,  I decided in the drop down (when you click each section) that the information would be beneath the title. 

Also, you can see on the bottom of the app page the simple graphics of what type of upgrades are available.

BUTTON STYLES

The new buttons on Dramafever Next have round edges. For consistency, I made sure to keep that consistent in my design.

Another feature I wanted to highlight in the new design was the icons below the buttons. Each of these icons indicate the device you can use to download the app. I noticed while I was researching the webpage that some of the devices overlap.

​As a result, I decided to put all of the icons below and use the colors to highlight each one.

FINAL DESIGN

New Dramafever Next App Page
Dramafever Next's new layout is simple, clean and informative. I made sure that this page was separated by their specific color to keep it easy for the user to differentiate each section (Mobile, Television, and Console).
​
When you scroll over or click on the Mobile, Television or Console button, the icons get highlighted with the color. There is also a drop down to the different links to download the Dramafever app on the specific platform and information on what the app has to offer.

Beneath that information are options to upgrade your app. It's easily accessible if they wish to do so!
Before
After
Kristin Vogel © 2015