DRAMAFEVER APP PAGE

Dramafever redesigned their brand and needed to keep the new look consistent across all platforms. I was appointed by our team’s director to redesign the app web page for Dramafever. ​

Role

​UX research, UI design, project management​, wireframing

For

Redesigning the Dramafever's App website page experience.

Programs Used

PROBLEM

Dramafever's new platform (Dramafever Next) needs a new App page in order to keep all the pages consistent with their new design platform. The App page's buttons, icons and background are out of place with all of the new design changes.

SOLUTION

Using elements from their new platform, I will create a design that will keep it consistent with the rest of the web pages.
Old App Page
Dramafever Next Webpages

Elements

New key elements being used for Dramafever Next:
  1. Large header
  2. Color scheme
  3. Shapes of buttons/icons
  4. Layout of Pages
Style Guide

DESIGN EXPLORATION

To start, I did a full-site audit, making note of all the pages. Then, I went through the navigation, laying out all of the categories to see what patterns, themes, and insights could be used.
From there, I used their existing content to create wireframes, and put an emphasis on the design of the new brand.
New Dramafever Next App Page
My Solutions

1. LARGER HEADER

I designed my own header for this page to emphasize the different shows, movies, and actors that Dramafever has on their platform.

2. COLOR SCHEME

The app page was broken down into 3 different categories:
  • Mobile
  • Television
  • Console
I used three colors in the style guide that I felt worked well together and used those colors as the foundation for the rest of the page.

3. Shapes

All the new buttons on Dramafever Next have round edges. For consistency, I made sure to use those elements with all buttons.

4. Layout of Page

Dramafever Next's new layout is simple, clean and separated into specific sections. I made sure that this page was separated by their specific color to keep it easy for the user to differentiate each section.
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.
Before
After
Kristin Vogel © 2015