cw_detailview_topimage.png

Project Overview

The CW application offers users access to watch free, full episodes of all their favorite CW shows and is available on iOS and Android devices. After having successfully launched the original 1.0 version of the CW app, Phunware was tasked with launching a 2.0 version of the app which would refresh the UX and UI. 

My Role

After being one of two designers on the original 1.0 version a few years prior, as well as the sole designer on subsequent updates, I was assigned as the lead UX designer for this 2.0 version release. In my role, I was responsible for creating the wireframes for iPad and Android tablet, developing the new visual design that would be applied across all devices, and communicating with the CBS/WB team as the main design voice.

Areas of Improvement

Navigation + Header

Changes to this area included reducing the CW logo size, removing the banner image, eliminating the navigation bar, and creating a navigation drawer housing menu items for Home, Shows, Schedule and Settings. This consolidated the navigation items into one easily accessed point and freed up a significant amount of space at the top of the screen, giving the interface a much more open feel.

 

Featured Carousel

With the Home Screen's featured carousel, I increased the height and reduced the number of items shown from 3 to 1. Having the two unfocused items appear on the sides added no real value and having them there took up space that instead could be used to better highlight each individual featured item.

Featured Carousel.png
 

Show Screen

The CBS/WB team wanted to inject more show branding into each show screen. This request was addressed by utilizing the new space created by the navigation + header redesign to showcase each show's hero artwork (provided by the CW team). 

 

Video-related Enhancements

To enhance the viewing experience, various additions were made, including:

  • In play mode, placing a "Watching Now" overlay on the active video thumbnail

  • Saving progress on viewed videos and having that visualized on the video thumbnail

  • Adding in auto-play functionality after video completion

 

Overall Visual Design

A more visually appealing interface was created by removing extra chrome, exploring different text treatments, and utilizing more imagery across the app.

 

Home: Before & AFTER

SCHEDULE: Before & AFTER

Shows Menu: Before & AFTER

Show Info: Before & AFTER

 

Design Team

  • Suzanne Elizondo - Creative Director

  • Dan Tran - Lead UX Designer (App Map, iPad/Tablet Wireframes, Overall Visual Design)

  • Ivy Knight - UX Designer (iOS/Android Phone Wireframes)